Маршрутизация в Angular

Angular Router (@angular/router) — официальная библиотека для управления навигацией в приложениях Angular и важная часть платформы. Она включена по умолчанию во все проекты, созданные с помощью Angular CLI.

Зачем нужна маршрутизация в SPA?

Когда вы переходите по URL-адресу в веб-браузере, браузер обычно отправляет запрос к веб-серверу и отображает полученную HTML-страницу. При переходе по другому URL-адресу, например при нажатии на ссылку, браузер отправляет ещё один запрос и заменяет всю страницу новой.

Одностраничное приложение (SPA) устроено иначе: браузер отправляет запрос к веб-серверу только для первой страницы — index.html. После этого управление переходит к клиентскому маршрутизатору, который определяет отображаемое содержимое на основе URL-адреса. Когда пользователь переходит по другому URL-адресу, маршрутизатор обновляет содержимое страницы на месте, не перезагружая её целиком.

Как Angular управляет маршрутизацией

Маршрутизация в Angular состоит из трёх основных частей:

1. Маршруты определяют, какой компонент отображается, когда пользователь посещает определённый URL-адрес.
2. Области отображения — это заполнители в шаблонах, в которые динамически загружаются и выводятся компоненты в зависимости от активного маршрута.
3. Ссылки позволяют пользователям переходить между разными маршрутами в приложении без полной перезагрузки страницы.

Кроме того, библиотека маршрутизации Angular предоставляет дополнительные возможности, такие как:

• Вложенные маршруты
• Программная навигация
• Параметры маршрута, параметры запроса и подстановочные знаки
• Информация об активном маршруте с помощью ActivatedRoute
• Эффекты переходов между представлениями
• Защитники маршрутов

Следующие шаги

Узнайте, как определять маршруты с помощью маршрутизатора Angular.