От автора: хотя фреймворк и известен тем, что создает одностраничные приложения, в Angular роутинг —обновление URL-адреса в адресной строке — может сделать ваш сайт значительно проще в использовании. Добавляя маршруты к вашему приложению, пользователи могут: обновлять страницу, не теряя место; сохранять закладку на определенную функцию или часть данных; делиться ссылкой на определенную часть сайта.
Роутинг на высоком уровне
Веб-приложения Angular доступны путем загрузки в браузер имени хоста приложения. При создании приложения на локальной машине, оно будет следующим: //localhost:4200
По мере того, как приложение растет, обычно добавляются новые функции. Эти функциональные компоненты могут отображаться без роутинга с использованием директив (например, «ngIf»), но этот подход становится более сложным для поддержания по мере роста приложения и имеет недостаток, позволяющий пользователю напрямую перемещаться в определенное место в приложении.
Чтобы решить эту проблему, можно использовать Angular RoutingModule, чтобы назвать наши функциональные компоненты и загружать их автоматически, когда имя компонента добавляется к имени хоста нашего приложения: //localhost:4200/feature_component_name
Хотя в приведенном выше примере все может не выглядеть интуитивно понятным, как только роутинг реализован с использованием реальных функций в развернутом приложении, становится значительно легче понять.
1 2 3 |
//www.music.com/artists //www.music.com/albums //www.music.com/tracks |
Вышеуказанные роуты позволят пользователю просмотреть список исполнителей, альбомов и треков.
Angular RoutingModule
Модуль RoutingModule от Angular (в @angular/router»), синхронизирует приложение с адресной строкой и наоборот.
Кроме того, пакет маршрутизации Angular может также облегчать переадресацию, параметрирование роута, фрагменты хэша, вложенные роуты, подстановочные знаки и выполнение пользовательских функций до или после навигации по роуту (также называемой guards). Если вы не знаете некоторые из этих функций, не волнуйтесь; Они будут освещены в следующей статье.
Требования RoutingModule
Для того, чтобы RoutingModule функционировал, приложение должно иметь следующие обновления:
Импорт зависимостей
Чтобы приложение узнало, что мы хотим использовать роутинг, мы должны импортировать RoutingModule и Routes из @ Angular / router в модуль вашего приложения.
1 |
import { RouterModule, Routes } from ‘@angular/router’ |
Определение роутов
Чтобы узнать имена функций, поддерживаемых в приложении, необходимо определить роуты. Эти роуты свяжут имена функций (или «путь») с компонентом, который должен загружать модуль RouterModule:
1 2 3 4 5 |
const appRoutes: Routes = [ { path: ‘’, component: HomeComponent } { path: ‘artists’, component: ArtistsComponent }, { path: ‘albums’, component: AlbumsComponent } ] |
Связь роутов с нашим приложением
Чтобы RoutingModule знал о наших роутах, мы должны предоставить роуты, используя метод forRoot (). Чтобы подключить RoutingModule к нашему приложению, добавим RoutingModule к импорту модуля нашего приложения:
1 2 3 4 5 6 |
@NgModule({ imports: [ RouterModule.forRoot(appRoutes) ], ... )} |
Отображение маршрутизируемого компонента
С помощью вышеуказанных шагов AngularRouter будет знать, какой компонент отображать, а не где его отображать. Чтобы исправить это, мы должны заменить функциональный компонент, загруженный по умолчанию, компонентом маршрутизатора, чтобы отображалась только маршрутизируемая функция
1 2 3 4 5 6 7 8 |
<!-- One possible app.component.html --> <app-header></app-header> <div class=”container”> <div class=”row”> <!-- <default-feature></default-feature> DELETE THIS --> <router-outlet></router-outlet> <!-- ADD THIS --> </div> </div> |
Базовая реализация
Если собрать все вместе, получится следующее:
app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import { BrowserModule } from '@angular/platform-browser'; import { Routes, RouterModule } from '@angular/router' import { AppComponent } from './app.component'; import { ArtistsComponent } from './artists/artists.component'; import { AlbumsComponent } from './albums/albums.component'; const appRoutes: Routes = [ { path: ‘’, component: HomeComponent } { path: ‘artists’, component: ArtistsComponent }, { path: ‘albums’, component: AlbumsComponent } ] @NgModule({ declarations: [ AppComponent, ArtistsComponent, AlbumsComponent ], imports: [ BrowserModule, RouterModule.forRoot(appRoutes) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
app.component.html
1 2 3 4 5 6 7 8 |
<!-- One possible app.component.html --> <app-header></app-header> <div class=”container”> <div class=”row”> <!-- <default-feature></default-feature> DELETE THIS --> <router-outlet></router-outlet> <!-- ADD THIS --> </div> </div> |
На этом этапе следующие URL-адреса должны загружать соответствующие компоненты.
1 2 3 |
//localhost:4200/ //localhost:4200/artists //localhost:4200/albums |
Программная загрузка роута
Хотя это, безусловно, отличный старт, многие пользователи не будут знать эти роуты при первом посещении приложения. Скорее всего, они просто начнут с домашней страницы приложения, а затем перейдут к различным функциям с помощью ссылок, меню и кнопок.
Шаблоны
Хотя вы можете подумать, что это можно легко сделать, добавив маршрут к тегу href ссылки, я бы настоятельно предостерег от этого подхода. Атрибут href может привести к перезагрузке страницы с сервера, что замедлит работу приложения и может увеличить затраты на хостинг. Кроме того, эта перезагрузка может также очистить некоторые из наших пользовательских настроек, что запутает приложение и сделает его сложнее.
Вместо этого RoutingModule предоставляет атрибут, который можно добавить в теги ссылок вместо «href» — «routerLink». «RouterLink» функционирует аналогично «href», но напрямую связывается с RouterModule вместо перезагрузки страницы.
1 |
<a routerLink="albums">Albums</a> |
TypeScript
Другим распространенным случаем является перемещение пользователя на другую страницу после завершения действия, например, с сохранением некоторых данных. В этом случае действие навигации по роуту будет инициироваться в нашем коде TypeScript, а не автоматически из нашего шаблона.
Это делается путем вставки сервиса Angular «Router» в конструктор компонента и использования функции «navigate ()», передающей путь в качестве параметра.
1 2 3 4 5 6 7 |
export class HomeComponent { constructor(private router: Router) { } onSelected(){ //Do Something router.navigate(['albums']); } } |
Обратите внимание, что параметр path является массивом. Позже это может быть полезно для более сложных случаев, таких как вложенные подроуты.
Индикация выбранного роута
Пользователю удобно видеть свое текущее местоположение в приложении, чтобы сориентироваться по навигации. Это можно сделать, применяя стиль к любым элементам, которые ссылаются на текущий маршрутизируемый компонент.
Angular RoutingModule предоставляет директиву именно для этой цели: routerLinkActive. Когда элемент содержит ссылку на текущий роут, класс, предоставляемый в routerLinkActive dirictive, будет автоматически применен к элементу.
1 2 3 4 5 6 7 8 |
<ul class="nav navbar-nav"> <li routerLinkActive="active"> <a routerLink="albums">Albums</a> </li> <li routerLinkActive="active"> <a routerLink="artists">Artists</a> </li> </ul> |
Кроме того, если маршрут изменен, routerLinkActive также будет обновлять удаление всех классов для маршрутов, которые больше не отображаются. Итак, для примера выше, только один «active» класс будет применяться к ссылке в любой момент времени.
Ловушки и недостатки
Ниже приведено несколько общих проблем и способы их решения.
Нет домашнего роута
Если домашний роут не определен (путь: »), маршрутизатор не сможет загрузить компонент при посещении корня приложения. Эта проблема может быть сложной для отладки, поскольку этот неопределенный маршрут не вызывает ошибку в консоли браузера.
Чтобы исправить это, необходимо определить домашний роут. Это можно сделать либо путем предоставления ссылки на «домашний» компонент, либо путем перенаправления на другой роут:
1 2 3 4 5 |
// Adding Home Component { path: ‘’, component: HomeComponent } // Redirection { path: ‘’, redirectTo: 'albums', pathMatch: 'full'}, { path: ‘albums’, component: AlbumComponent } |
Добавляя «href» к существующим тэгам ссылок, он может сигнализировать, что страница должна обновляться вместо нового загружаемого компонента. Это можно увидеть, когда выбранный компонент маршрута не отображается после выбора.
В этом случае атрибут «href» тега ссылки (<a>) можно просто опустить.
Дополнительная информация
Для дальнейшего чтения, поиска примеров и расширенной функциональности я настоятельно рекомендую взглянуть на страницу Routing & Navigation на сайте Angular.
Заключение
Поздравляю! Теперь вы знаете, что такое роутинг, почему он полезен, и основы того, как его можно добавить в приложение Angular 5.
Автор: Kevin Rejko
Источник: //medium.com/
Редакция: Команда webformyself.