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

Представьте, что вы делаете сайт-визитку или интернет-магазин на 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 и можете уверенно использовать его в своих проектах

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