Angular Router: маршруты

Одностраничное приложение не перезагружает страницу при переходе по разделам, но пользователь всё равно ждёт привычного: адресная строка меняется, кнопка 'назад' работает, ссылку можно скопировать и переслать. За этим стоит маршрутизатор - он сопоставляет URL с компонентом и подменяет содержимое на месте, не перезагружая документ. В Angular 21 маршрутизация настраивается одной функцией provideRouter без единого NgModule, а сами маршруты - это просто массив объектов.

• Любой раздел Gmail, GitHub или Notion: смена URL без перезагрузки страницы - это работа клиентского маршрутизатора
• Angular CLI: ng new с флагом маршрутизации сразу создаёт app.routes.ts и provideRouter в конфигурации
• Deep links: пользователь делится ссылкой на конкретную карточку, и маршрутизатор восстанавливает нужный экран по URL
• Навигация и активная подсветка: routerLink и routerLinkActive подсвечивают текущий пункт меню без ручного кода
• Корпоративные дашборды: вложенные router-outlet строят layout с боковым меню и сменяемой рабочей областью

Предварительные знания

• Standalone-компоненты и их селекторы
• Конфигурация приложения ApplicationConfig и функции-провайдеры
• Понимание URL: путь, сегменты, что такое одностраничное приложение

Настройка маршрутизатора

Маршрутизатор Angular подключается одной функцией-провайдером. В standalone-приложении нет RouterModule.forRoot и нет AppModule: вместо них provideRouter(routes) кладётся в массив providers конфигурации приложения. Эта функция регистрирует сервис Router, директивы навигации и сопоставление URL с маршрутами.

provideRouter принимает не только массив маршрутов, но и дополнительные фичи через функции: withComponentInputBinding для проброса параметров во входы, withPreloading для стратегий предзагрузки, withViewTransitions для анимаций переходов. Они добавляются вторым и последующими аргументами.

Конфигурация Routes и router-outlet

Маршруты - это массив объектов Routes. Самая частая форма: { path, component }, где path задаёт сегмент URL (без ведущего слэша), а component - что отрисовать при совпадении. Особые случаи: пустой path для главной, redirectTo для перенаправления, путь ** для перехвата всего несовпавшего.

Порядок имеет значение. Маршрутизатор перебирает массив сверху вниз и берёт первое совпадение, а не самое точное. Поэтому wildcard ** ставят последним, иначе он перехватит всё. Для пустого path с redirectTo нужен pathMatch: 'full', иначе пустой префикс совпадёт со всеми путями.

router-outlet - это маркер в шаблоне, на место которого маршрутизатор подставляет компонент текущего маршрута. Всё, что лежит вокруг outlet в шаблоне (шапка, меню, подвал), остаётся неизменным при навигации, меняется только содержимое outlet. Так строится постоянный layout со сменяемой рабочей областью.

Вложенные маршруты задаются полем children, и каждому уровню вложенности соответствует свой router-outlet в шаблоне родительского компонента. Это позволяет строить layout с боковым меню, где меняется только внутренняя область.

Навигация: routerLink и Router

Навигация бывает декларативной и программной. Декларативная - директива routerLink на ссылке: при клике маршрутизатор меняет URL и подменяет компонент в outlet без перезагрузки страницы. Программная - инъекция сервиса Router и вызов navigate из кода, например после успешной отправки формы.

routerLinkActive добавляет CSS-класс ссылке, когда её маршрут активен, без единой строки логики. Опция exact: true нужна для корневого пути, иначе он подсветится на всех вложенных маршрутах, ведь '/' является префиксом любого URL.

Обычный href вместо routerLink сломает SPA: браузер перезагрузит документ целиком, потеряв состояние приложения. Для внутренней навигации всегда routerLink или Router.navigate, а href оставляют только для внешних ссылок.

Связь с другими темами

Урок про основу маршрутизации. Дальше курс наращивает на ней слои:

• Параметры, resolvers и guards — Маршруты получают динамические сегменты, защиту доступа и предзагрузку данных
• Ленивая загрузка маршрутов — Тот же массив Routes, но компоненты подгружаются по требованию

Итог

• provideRouter(routes) в ApplicationConfig подключает маршрутизатор без NgModule - это standalone-подход по умолчанию
• Routes - массив объектов вида { path, component }, где path - сегмент URL без ведущего слэша
• router-outlet - точка в шаблоне, куда маршрутизатор подставляет компонент текущего маршрута
• routerLink навигирует без перезагрузки страницы, routerLinkActive добавляет класс активному пункту
• Порядок маршрутов важен: маршрутизатор берёт первое совпадение, поэтому wildcard ** ставят в конец

Связанные уроки

• ng-23-route-params-guards — Базовые маршруты - предпосылка для параметров, resolvers и guards, которые навешиваются на эти маршруты
• ng-24-lazy-loading — Поняв синхронную конфигурацию маршрутов, разработчик переходит к их ленивой загрузке
• ng-03-components — Компоненты - то, что маршрутизатор отображает в router-outlet