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

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

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

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

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

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

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

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

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

http://www.music.com/artists


http://www.music.com/albums


http://www.music.com/tracks

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

Angular RoutingModule

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

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

Требования RoutingModule

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

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

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

import { RouterModule, Routes } from ‘@angular/router’

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

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

const appRoutes: Routes = [
 { path: ‘’, component: HomeComponent }
 { path: ‘artists’, component: ArtistsComponent },
 { path: ‘albums’, component: AlbumsComponent }
]

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

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

@NgModule({
imports: [
 RouterModule.forRoot(appRoutes)
],
...
)}

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

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

<!-- 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

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

<!-- 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-адреса должны загружать соответствующие компоненты.


http://localhost:4200/


http://localhost:4200/artists


http://localhost:4200/albums

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

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

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Шаблоны

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

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

<a routerLink="albums">Albums</a>

TypeScript

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

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

export class HomeComponent {
 constructor(private router: Router) { }
 onSelected(){
 //Do Something
 router.navigate(['albums']);
 }
}

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

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

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

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

<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» класс будет применяться к ссылке в любой момент времени.

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

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

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

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

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

// 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

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

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

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Angular 4 с Нуля до Профи

Angular 4 - полное руководство для современной веб-разработки

Научиться

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree