del4k1 10 часов назад

Angular Router для начинающих: понятный гайд с примерами

Простой

6 мин

311

Представьте, что вы делаете сайт-визитку или интернет-магазин на Angular. У вас есть главная страница, страница «О нас» и страница с товарами. Логично, что при клике на ссылки пользователь должен переходить между этими страницами

В классических сайтах это решается просто: при каждом клике браузер запрашивает у сервера новую HTML-страницу. Но в современных SPA (Single Page Applications) всё работает иначе — приложение загружается один раз, а дальше мы просто подменяем содержимое внутри него

Именно за это отвечает Angular Router. Он позволяет:

описывать маршруты (какой URL → какой компонент);
переключаться между страницами без перезагрузки;
передавать параметры и query-параметры в адресной строке;
защищать маршруты с помощью Guard’ов;
подгружать части приложения по требованию (lazy loading).

Можно сказать, что Router — это сердце навигации в Angular-приложениях. Если вы его поймёте, то сможете строить полноценные многостраничные приложения, а не просто «выводить компонент на экран»

В этой статье мы разберём Angular Router пошагово: от простейшего примера с тремя страницами до более продвинутых вещей вроде Guard’ов и ленивой загрузки. Всё будет на живых примерах и максимально простым языком, чтобы вы смогли уверенно применить это в реальном проекте

Мини-проект: Pizza Router App 🍕

Чтобы разобраться с Angular Router, мы будем делать маленький сайт пиццерии. У него будут такие страницы:

/ — Главная (приветственный экран + популярные пиццы),
/menu — Меню (список всех пицц),
/pizza/:id — Детальная страница пиццы (динамический роут),
/contacts — Контакты.

По ходу статьи мы добавим:

queryParams (например, сортировка пицц по цене),
Guard (например, «только авторизованный пользователь может сделать заказ»),
Lazy loading (например, админка для добавления новых пицц).

1. Создаём страницы для пиццерии 🍕

Сначала сгенерируем компоненты:

ng g c components/home
ng g c components/menu
ng g c components/pizza
ng g c components/contacts

Теперь у нас есть 4 компонента. Заполним их простым содержимым.

home.html

<h1>🍕 Добро пожаловать в Pizza Router App!</h1>
<p>Здесь вы можете выбрать вкусную пиццу и заказать её онлайн</p>
<a routerLink="/menu">Перейти в меню</a>

menu.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-menu',
  imports: [],
  templateUrl: './menu.html',
  styleUrl: './menu.scss'
})
export class Menu {
  pizzas = [
    { id: 1, name: 'Маргарита', price: 450 },
    { id: 2, name: 'Пепперони', price: 550 },
    { id: 3, name: 'Четыре сыра', price: 600 },
  ];
}

menu.html

<h2>Меню пицц</h2>
<ul>
  @for (pizza of pizzas; track pizza.id) {
    <li>
      <a [routerLink]="['/pizza', pizza.id]">
        {{ pizza.name }} — {{ pizza.price }} ₽
      </a>
    </li>
  }
</ul>

pizza.ts

Здесь используем динамический параметр id

import {Component, inject, OnInit} from '@angular/core';
import {ActivatedRoute, RouterLink} from '@angular/router';

@Component({
  selector: 'app-pizza',
  imports: [
    RouterLink
  ],
  templateUrl: './pizza.html',
  styleUrl: './pizza.scss'
})
export class Pizza implements OnInit {
  private readonly route = inject(ActivatedRoute);
  pizzaId: string | null = null;

  ngOnInit() {
    this.pizzaId = this.route.snapshot.paramMap.get('id');
  }
}

pizza.html

<h2>Вы выбрали пиццу №{{ pizzaId }}</h2>
<p>Здесь могла бы быть подробная информация о пицце (ингредиенты, фото, отзывы)</p>
<a routerLink="/menu">⬅ Назад в меню</a>

contacts.html

<h2>Контакты</h2>
<p>📍 Адрес: ул. Angular, 42</p>
<p>📞 Телефон: +7 (999) 123-45-67</p>

2. Настраиваем роутинг

Angular Router уже встроен, нужно лишь добавить наши роуты

// app.routes.ts

import {Routes} from '@angular/router';
import {Home} from './components/home/home';
import {Menu} from './components/menu/menu';
import {Pizza} from './components/pizza/pizza';
import {Contacts} from './components/contacts/contacts';

export const routes: Routes = [
  {path: '', component: Home},
  {path: 'menu', component: Menu},
  {path: 'pizza/:id', component: Pizza},
  {path: 'contacts', component: Contacts},
];

Теперь в app.html добавим навигацию и место, где будут подставляться страницы:

<nav>
  <a routerLink="/">Главная</a> |
  <a routerLink="/menu">Меню</a> |
  <a routerLink="/contacts">Контакты</a>
</nav>

<!-- Сюда Angular будет рендерить выбранный компонент -->
<router-outlet></router-outlet>

Если сейчас запустить проект (ng serve), то можно уже кликать по ссылкам и переходить между компонентами 🎉

3. Дополнительные параметры маршрутов

У объекта маршрута можно указывать не только path и component. Вот самые важные:

redirectTo

Позволяет перенаправить пользователя на другой маршрут

{ path: '', redirectTo: 'menu', pathMatch: 'full' }

Теперь при заходе на / сразу откроется страница меню

pathMatch

Указывает, как сравнивать путь.

full — путь должен совпадать полностью
prefix — совпадение по началу

{ path: '', redirectTo: 'menu', pathMatch: 'full' }

Если бы мы поставили prefix, редирект срабатывал бы слишком часто (например, даже при /pizza/1)

title

Начиная с Angular 14, можно указывать заголовок страницы прямо в маршруте

{ path: 'menu', component: Menu, title: 'Меню пицц' }

Теперь при переходе на /menu в браузере будет Pizza Router App - Меню пицц

children

Для вложенных маршрутов. Например, сделаем «Личный кабинет»:

{
  path: 'profile',
  component: ProfileLayout,
  children: [
    { path: 'orders', component: Orders },
    { path: 'settings', component: Settings },
  ]
}

canActivate

Для защиты маршрута. Например, доступ к профилю только авторизованным:

{ path: 'profile', component: ProfileLayout, canActivate: [AuthGuard] }

Ленивая загрузка (Lazy Loading) в Angular Router

По умолчанию Angular загружает весь код приложения при старте. Если проект маленький — это нормально. Но когда страниц становится десятки и сотни (например, интернет-магазин с личным кабинетом, админкой, корзиной, заказами) → bundle разрастается и первая загрузка приложения становится медленной

Как решает проблему Lazy Loading?

Мы можем «разбить» приложение на модули, и загружать их только тогда, когда пользователь реально заходит на этот раздел

Например, в нашем приложении «Пиццерия»:

обычным клиентам нужны только Главная, Меню, Контакты;
а вот админку (/admin) им загружать нет смысла

Базовый пример

Допустим, у нас есть такой роутинг

import {Routes} from '@angular/router';
import {Home} from './components/home/home';
import {Menu} from './components/menu/menu';
import {Pizza} from './components/pizza/pizza';
import {Contacts} from './components/contacts/contacts';

export const routes: Routes = [
  {path: 'menu', component: Menu},
  {path: 'pizza/:id', component: Pizza},
  {path: 'contacts', component: Contacts},
  { path: '', redirectTo: 'menu', pathMatch: 'full' }
];

Теперь добавим ленивый роут для админки:

export const routes: Routes = [
  { path: 'menu', component: Menu },
  { path: 'pizza/:id', component: Pizza },
  { path: 'contacts', component: Contacts },
  { path: '', redirectTo: 'menu', pathMatch: 'full' },

  // 👇 ленивый роут со standalone компонентом
  {
    path: 'admin',
    loadComponent: () =>
      import('./pages/admin/admin').then(m => m.Admin),
  },
];

Поддержка вложенных маршрутов

Если админка сложнее и у неё есть вложенные страницы (/admin/orders, /admin/settings), то лучше вынести их в отдельный routes

export const routes: Routes = [
  { path: 'menu', component: Menu },
  { path: 'pizza/:id', component: Pizza },
  { path: 'contacts', component: Contacts },
  { path: '', redirectTo: 'menu', pathMatch: 'full' },

  {
    path: 'admin',
    loadChildren: () =>
      import('./pages/admin/admin.routes').then(m => m.adminRoutes),
  },
];

А внутри admin.routes.ts:

import { Routes } from '@angular/router';
import { AdminDashboard } from './dashboard/dashboard';
import { AdminOrders } from './orders/orders';

export const adminRoutes: Routes = [
  { path: '', component: AdminDashboard },
  { path: 'orders', component: AdminOrders },
];

Когда использовать loadComponent, а когда loadChildren?

loadComponent — когда у тебя одна страница, типа /admin.
loadChildren — когда у тебя несколько маршрутов внутри раздела, например /admin/orders, /admin/settings

🎯 Заключение

Мы прошли большой путь:

разобрали базовые маршруты (path, component),
научились работать с параметрами (:id, queryParams),
посмотрели на дополнительные настройки (redirectTo, pathMatch, title),
сделали ленивая загрузку и вложенные роуты

Теперь вы знаете, как устроен Angular Router и можете уверенно использовать его в своих проектах

Хотите маленький сайт-визитку, интернет-магазин или целую админку — всё это реально построить на тех знаниях, что мы разобрали

Хабы: