Маршрутизация в Angular
Маршрутизация помогает изменять то, что видит пользователь в одностраничном приложении (SPA).
Angular Router (@angular/router) — это официальная библиотека для управления навигацией в приложениях Angular и основная часть фреймворка. Она включена по умолчанию во все проекты, созданные с помощью Angular CLI.
Зачем нужна маршрутизация в SPA?
Когда вы переходите по URL-адресу в веб-браузере, браузер обычно делает сетевой запрос к веб-серверу и отображает возвращенную HTML-страницу. Когда вы переходите по другому URL-адресу, например, нажимая на ссылку, браузер делает еще один сетевой запрос и заменяет всю страницу новой.
Одностраничное приложение (SPA) отличается тем, что браузер делает запрос к веб-серверу только для первой страницы, index.html. После этого клиентский роутер берет управление на себя, контролируя, какой контент отображается на основе URL-адреса. Когда пользователь переходит по другому URL-адресу, роутер обновляет контент страницы на месте, не вызывая полной перезагрузки страницы.
Как Angular управляет маршрутизацией
Маршрутизация в Angular состоит из трех основных частей:
- Routes (Маршруты) определяют, какой компонент отображается, когда пользователь посещает определенный URL.
- Outlets (Аутлеты) — это заполнители в ваших шаблонах, которые динамически загружают и рендерят компоненты на основе активного маршрута.
- Links (Ссылки) предоставляют пользователям возможность перемещаться между различными маршрутами в вашем приложении без вызова полной перезагрузки страницы.
Кроме того, библиотека маршрутизации Angular предлагает дополнительные функции, такие как:
- Вложенные маршруты
- Программная навигация
- Параметры маршрута, параметры запроса и подстановочные знаки (wildcards)
- Информация об активированном маршруте с помощью
ActivatedRoute - Эффекты перехода представления (View transition effects)
- Навигационные защитники (Navigation guards)
Следующие шаги
Узнайте, как вы можете определить маршруты с помощью роутера Angular.