Routing (маршрутизация) в Angular — это механизм, позволяющий навигировать между разными представлениями (компонентами) в одностраничном приложении (SPA), изменяя URL без перезагрузки страницы. Angular Router — это встроенный модуль, который отвечает за отображение компонентов в зависимости от текущего маршрута.

1. Установка и подключение маршрутизатора

Для работы маршрутизации необходимо подключить модуль RouterModule в корневом или фиче-модуле:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = \[/\* маршруты \*/\];
@NgModule({
imports: \[RouterModule.forRoot(routes)\],
exports: \[RouterModule\]
})
export class AppRoutingModule {}

2. Определение маршрутов

Маршруты определяются как массив объектов типа Route. Каждый маршрут связывает путь URL с компонентом.

const routes: Routes = \[
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'users/:id', component: UserComponent },
{ path: '\*\*', component: NotFoundComponent }
\];

Пояснение:

• path: '' — путь по умолчанию.

• path: 'about' — статический маршрут.

• path: 'users/:id' — динамический маршрут с параметром.

• path: '**' — wildcard (обрабатывает все несуществующие пути, часто используется для 404).

3. Использование маршрутов в шаблоне

3.1. Навигация

С помощью директивы routerLink:

<a routerLink="/about">О нас</a>
<a \[routerLink\]="\['/users', userId\]">Профиль</a>

Для активной ссылки:

<a routerLink="/home" routerLinkActive="active">Домой</a>

3.2. Вывод компонента

Нужно разместить <router-outlet></router-outlet> в шаблоне — это место, куда Angular будет подставлять компоненты согласно маршрутам:

<router-outlet></router-outlet>

4. Параметры маршрута

4.1. Параметры URL

Если маршрут содержит :id, его можно получить через ActivatedRoute:

constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.params.subscribe(params => {
console.log(params\['id'\]);
});
}

Или через snapshot:

const id = this.route.snapshot.paramMap.get('id');

4.2. Query параметры

URL: /search?term=angular&page=2

this.route.queryParams.subscribe(params => {
console.log(params\['term'\], params\['page'\]);
});

Передача:

<a \[routerLink\]="\['/search'\]" \[queryParams\]="{ term: 'angular', page: 2 }">Поиск</a>

5. Программная навигация

Сервис Router позволяет управлять навигацией программно:

constructor(private router: Router) {}
goToUser(id: string) {
this.router.navigate(\['/users', id\]);
}

С query параметрами:

this.router.navigate(\['/search'\], { queryParams: { term: 'vue' } });

6. Дочерние маршруты (nested routes)

Для вложенной навигации один компонент может иметь собственные children:

const routes: Routes = \[
{
path: 'admin',
component: AdminComponent,
children: \[
{ path: 'dashboard', component: DashboardComponent },
{ path: 'settings', component: SettingsComponent }
\]
}
\];

В шаблоне AdminComponent должен быть <router-outlet> для отображения дочерних компонентов.

7. Переадресация и путь по умолчанию

const routes: Routes = \[
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: '\*\*', component: NotFoundComponent }
\];

• redirectTo — перенаправление.

• pathMatch: 'full' — полное совпадение пути ('').

• ** — wildcard для обработки несуществующих маршрутов.

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

Позволяет загружать модули и их маршруты только при необходимости.

Шаг 1: Создание модуля с маршрутом

const routes: Routes = \[
{ path: '', component: LazyComponent }
\];
@NgModule({
declarations: \[LazyComponent\],
imports: \[RouterModule.forChild(routes)\]
})
export class LazyModule {}

Шаг 2: Подключение в основном маршруте

const routes: Routes = \[
{
path: 'lazy',
loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
}
\];

9. Guards — защита маршрутов

Можно ограничивать доступ к маршрутам с помощью Guard-ов.

{ path: 'admin', component: AdminComponent, canActivate: \[AuthGuard\] }

Типы Guard-ов:

Пример AuthGuard:

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
constructor(private auth: AuthService, private router: Router) {}
canActivate(): boolean {
if (this.auth.isLoggedIn()) return true;
this.router.navigate(\['/login'\]);
return false;
}
}

10. Preloading Strategy

Для предварительной загрузки лениво подключённых модулей:

RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })

Это позволяет ускорить навигацию, загружая модули в фоне после загрузки основного приложения.

11. Навигация с сохранением истории

Angular использует LocationStrategy, по умолчанию — HTML5 (без #):

{ provide: LocationStrategy, useClass: PathLocationStrategy }

Если нужно использовать hash-навигацию (например, для старых серверов):

{ provide: LocationStrategy, useClass: HashLocationStrategy }

12. Навигация при помощи события

Сервис Router предоставляет Observable events:

this.router.events.subscribe(event => {
if (event instanceof NavigationStart) {
console.log('Переход начался');
}
if (event instanceof NavigationEnd) {
console.log('Переход завершён');
}
});

Полезно для отображения спиннеров, логирования, анимаций переходов.

13. Восстановление прокрутки

Для сохранения позиции прокрутки при навигации:

RouterModule.forRoot(routes, {
scrollPositionRestoration: 'enabled'
});

Опции:

• 'disabled'

• 'enabled'

• 'top'

14. Анимации при переходах

Можно реализовать переходы между компонентами с анимацией с помощью Angular Animations, используя router-outlet и @routeAnimations.

Пример в шаблоне:

<div \[@routeAnimations\]="prepRouteState(outlet)">
<router-outlet #outlet="outlet"></router-outlet>
</div>

15. Повторное использование компонентов

По умолчанию Angular уничтожает компонент при уходе с маршрута. Можно настроить RouteReuseStrategy, чтобы переиспользовать компонент (например, кэшировать страницу).

16. Поддержка параметров в URL

Можно комбинировать params, queryParams, fragment и data для гибкой настройки маршрутов.