Введение в роутинг в Angular 5

Введение в роутинг в Angular 5

От автора: хотя фреймворк и известен тем, что создает одностраничные приложения, в Angular роутинг —обновление URL-адреса в адресной строке — может сделать ваш сайт значительно проще в использовании. Добавляя маршруты к вашему приложению, пользователи могут: обновлять страницу, не теряя место; сохранять закладку на определенную функцию или часть данных; делиться ссылкой на определенную часть сайта.

Роутинг на высоком уровне

Веб-приложения Angular доступны путем загрузки в браузер имени хоста приложения. При создании приложения на локальной машине, оно будет следующим: //localhost:4200

По мере того, как приложение растет, обычно добавляются новые функции. Эти функциональные компоненты могут отображаться без роутинга с использованием директив (например, «ngIf»), но этот подход становится более сложным для поддержания по мере роста приложения и имеет недостаток, позволяющий пользователю напрямую перемещаться в определенное место в приложении.

Чтобы решить эту проблему, можно использовать Angular RoutingModule, чтобы назвать наши функциональные компоненты и загружать их автоматически, когда имя компонента добавляется к имени хоста нашего приложения: //localhost:4200/feature_component_name

Хотя в приведенном выше примере все может не выглядеть интуитивно понятным, как только роутинг реализован с использованием реальных функций в развернутом приложении, становится значительно легче понять.

Вышеуказанные роуты позволят пользователю просмотреть список исполнителей, альбомов и треков.

Angular RoutingModule

Модуль RoutingModule от Angular (в @angular/router»), синхронизирует приложение с адресной строкой и наоборот.

Кроме того, пакет маршрутизации Angular может также облегчать переадресацию, параметрирование роута, фрагменты хэша, вложенные роуты, подстановочные знаки и выполнение пользовательских функций до или после навигации по роуту (также называемой guards). Если вы не знаете некоторые из этих функций, не волнуйтесь; Они будут освещены в следующей статье.

Требования RoutingModule

Для того, чтобы RoutingModule функционировал, приложение должно иметь следующие обновления:

Импорт зависимостей

Чтобы приложение узнало, что мы хотим использовать роутинг, мы должны импортировать RoutingModule и Routes из @ Angular / router в модуль вашего приложения.

Определение роутов

Чтобы узнать имена функций, поддерживаемых в приложении, необходимо определить роуты. Эти роуты свяжут имена функций (или «путь») с компонентом, который должен загружать модуль RouterModule:

Связь роутов с нашим приложением

Чтобы RoutingModule знал о наших роутах, мы должны предоставить роуты, используя метод forRoot (). Чтобы подключить RoutingModule к нашему приложению, добавим RoutingModule к импорту модуля нашего приложения:

Отображение маршрутизируемого компонента

С помощью вышеуказанных шагов AngularRouter будет знать, какой компонент отображать, а не где его отображать. Чтобы исправить это, мы должны заменить функциональный компонент, загруженный по умолчанию, компонентом маршрутизатора, чтобы отображалась только маршрутизируемая функция

Базовая реализация

Если собрать все вместе, получится следующее:

app.module.ts

app.component.html

На этом этапе следующие URL-адреса должны загружать соответствующие компоненты.

Программная загрузка роута

Хотя это, безусловно, отличный старт, многие пользователи не будут знать эти роуты при первом посещении приложения. Скорее всего, они просто начнут с домашней страницы приложения, а затем перейдут к различным функциям с помощью ссылок, меню и кнопок.

Шаблоны

Хотя вы можете подумать, что это можно легко сделать, добавив маршрут к тегу href ссылки, я бы настоятельно предостерег от этого подхода. Атрибут href может привести к перезагрузке страницы с сервера, что замедлит работу приложения и может увеличить затраты на хостинг. Кроме того, эта перезагрузка может также очистить некоторые из наших пользовательских настроек, что запутает приложение и сделает его сложнее.

Вместо этого RoutingModule предоставляет атрибут, который можно добавить в теги ссылок вместо «href» — «routerLink». «RouterLink» функционирует аналогично «href», но напрямую связывается с RouterModule вместо перезагрузки страницы.

TypeScript

Другим распространенным случаем является перемещение пользователя на другую страницу после завершения действия, например, с сохранением некоторых данных. В этом случае действие навигации по роуту будет инициироваться в нашем коде TypeScript, а не автоматически из нашего шаблона.

Это делается путем вставки сервиса Angular «Router» в конструктор компонента и использования функции «navigate ()», передающей путь в качестве параметра.

Обратите внимание, что параметр path является массивом. Позже это может быть полезно для более сложных случаев, таких как вложенные подроуты.

Индикация выбранного роута

Пользователю удобно видеть свое текущее местоположение в приложении, чтобы сориентироваться по навигации. Это можно сделать, применяя стиль к любым элементам, которые ссылаются на текущий маршрутизируемый компонент.

Angular RoutingModule предоставляет директиву именно для этой цели: routerLinkActive. Когда элемент содержит ссылку на текущий роут, класс, предоставляемый в routerLinkActive dirictive, будет автоматически применен к элементу.

Кроме того, если маршрут изменен, routerLinkActive также будет обновлять удаление всех классов для маршрутов, которые больше не отображаются. Итак, для примера выше, только один «active» класс будет применяться к ссылке в любой момент времени.

Ловушки и недостатки

Ниже приведено несколько общих проблем и способы их решения.

Нет домашнего роута

Если домашний роут не определен (путь: »), маршрутизатор не сможет загрузить компонент при посещении корня приложения. Эта проблема может быть сложной для отладки, поскольку этот неопределенный маршрут не вызывает ошибку в консоли браузера.

Чтобы исправить это, необходимо определить домашний роут. Это можно сделать либо путем предоставления ссылки на «домашний» компонент, либо путем перенаправления на другой роут:

Добавляя «href» к существующим тэгам ссылок, он может сигнализировать, что страница должна обновляться вместо нового загружаемого компонента. Это можно увидеть, когда выбранный компонент маршрута не отображается после выбора.

В этом случае атрибут «href» тега ссылки (<a>) можно просто опустить.

Дополнительная информация

Для дальнейшего чтения, поиска примеров и расширенной функциональности я настоятельно рекомендую взглянуть на страницу Routing & Navigation на сайте Angular.

Заключение

Поздравляю! Теперь вы знаете, что такое роутинг, почему он полезен, и основы того, как его можно добавить в приложение Angular 5.

Автор: Kevin Rejko

Источник: //medium.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: