Следуйте этим простым шагам, чтобы создать полнофункциональный веб-сайт, используя Angular.
Как создать полностраничный веб-сайт в Angular. Часть 1 (4)
Как создать полностраничный веб-сайт в Angular. Часть 2 (4)
Как создать полностраничный веб-сайт в Angular. Часть 3 (4)
Как создать полностраничный веб-сайт в Angular. Часть 4 (4)
07. Устанавливаем routing
Теперь, когда наш контент абстрагируется в сервис (service), давайте настроим маршрутизацию (routing), чтобы мы могли перемещаться со страницы на страницу и динамически извлекать контент из нашего сервиса.
Для мобильности и архитектуры роуты часто выносят в отдельный модуль. Для этого мы начнем с создания нашего файла app-routing.module.ts. CLI не поддерживает генерацию роутов, поэтому нам придется прибегать к старомодным средствам.
|
1 |
touch src/app/app-routing.module.ts |
Объяснение того, как в Angular работают роуты, можно свести к процессу присваивания компонента к определенному URL-адресу. Здесь есть некоторые нюансы, но по сути URL-адрес приложения представляет собой конкретное состояние, в котором мы хотим, чтобы наше приложение было, и компонент, который мы хотим отобразить в этом состоянии.
В приведенном ниже массиве Routes у нас есть роут (маршрут) по умолчанию, который перенаправляет на путь /home, а также маршруты catch-all или wildcard, которые, если маршрут не найден, также перенаправляют на /home.
Итак, если кто-то перейдет на http://localhost:4200/home, Angular узнает этот маршрут и загрузит PageComponent в элемент router-outlet.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// app/app-routing.module.ts import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { PageComponent } from './page/page.component'; const appRoutes: Routes = [ {path: '', redirectTo: '/home', pathMatch: 'full'}, {path: 'home', component: PageComponent}, {path: '**', redirectTo: '/home', pathMatch: 'full'} ]; @NgModule({ imports: [RouterModule.forRoot(appRoutes)], exports: [RouterModule] }) export class AppRoutingModule { } |
Мы можем расширить наш массив маршрутизации, добавив страницы «about» и «contact». Вы заметите, что мы сопоставляем каждый путь с PageComponent. Как отличить одну страницу от другой? В настоящий момент для каждой страницы будет прорисовываться одно и то же содержимое.
|
1 2 3 4 5 6 7 |
const appRoutes: Routes = [ {path: '', redirectTo: '/home', pathMatch: 'full'}, {path: 'home', component: PageComponent}, {path: 'about', component: PageComponent}, {path: 'contact', component: PageComponent}, {path: '**', redirectTo: '/home', pathMatch: 'full'} ]; |
Мы решим эту проблему, добавляя к нашему маршруту кастомное свойство data, указывая тем самым, на какой странице мы находимся. Это также иллюстрирует мощь архитектуры, основанной на компонентах, поскольку мы повторно используем один и тот же компонент и просто изменяем данные, поступающие в него.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// app/app-routing.module.ts const appRoutes: Routes = [ {path: '', redirectTo: '/home', pathMatch: 'full'}, {path: 'home', component: PageComponent, data: { page: 'home' }}, {path: 'about', component: PageComponent, data: { page: 'about' }}, {path: 'contact', component: PageComponent, data: { page: 'contact' }}, {path: '**', redirectTo: '/home', pathMatch: 'full'} ]; |
08. Регистрация route модуля
Чтобы активировать массив роутинг на нашем веб-сайте, обновим наш модуль app.module.ts, включив AppRoutingModule в массив imports.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// app/app.module.ts ... import { AppRoutingModule } from './app-routing.module'; @NgModule({ declarations: [...], imports: [ ... AppRoutingModule ], providers: [ContentService], bootstrap: [AppComponent] }) ... |
09. Обновление компонента страницы
Мы собираемся обновить наш page компонент, чтобы прочитать свойство page текущего роута и использовать его в качестве ключа, чтобы вытащить соответствующий контент с нашего сервера. Для этого нам нужно импортировать ActivatedRoute в наш компонент. Это даст нам информацию об активированном в данный момент роуте, например route.snapshot.data, на котором имеется свойство page.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// app/page/page.component.ts ... import { ActivatedRoute } from '@angular/router'; ... export class PageComponent implements OnInit { page: Object; constructor(private route: ActivatedRoute, private contentService: ContentService) { } ngOnInit() { const pageData = this.route.snapshot.data['page']; this.page = this.contentService.pages[pageData]; } } |
Когда у нас будет значение page роута, мы получим доступ к объекту page в нашем контент сервисе, для получения соответствующего контента.
10. Проверка роута
Вы можете проверить, работают ли наши роуты, перейдя в app.component.html, удалив все в нем и добавив в шаблон <router-outlet></ router-outlet>.
Теперь, если вы перейдете к http://localhost:4200, вас должно редиректнуть на http://localhost:4200/home и отобразится контент домашней страницы. Затем измените URL-адрес на http://localhost:4200/about или http://localhost:4200/contact для проверки обновлений контента.
11. Создаем навигацию
Вручную вводить URL адреса не самое удобное занятие для пользователя, поэтому давайте создадим некоторую навигацию, чтобы упростить задачу. Добавим на наши страницы тулбар Angular Material и три кнопки.
|
1 2 3 4 5 6 7 8 9 |
<!-- app/app.component.html --> <md-toolbar color="primary"> <h1><span class="light">SUPER</span>LOGO</h1> <span class="spacer"></span> <a md-button>HOME</a> <a md-button>ABOUT</a> <a md-button>CONTACT</a> </md-toolbar> |
Используя routerLinkDirective, мы определяем роут, на который должна ссылаться каждая кнопка. Существует несколько способов определить значение того, что входит в ссылку маршрутизатора, но самым безопасным является использование массива, который принимает несколько параметров, поэтому наши значения принимают форму ['path'].
|
1 2 3 4 5 6 7 8 9 |
<a md-button [routerLink]="['home']" routerLinkActive="active">HOME</a> <a md-button [routerLink]="['about']" routerLinkActive="active">ABOUT</a> <a md-button [routerLink]="['contact']" routerLinkActive="active">CONTACT</a> |
Роут также знает, когда мы находимся на определенном маршруте, и мы можем назначить специальный класс активному элементу с помощью routerLinkActive.
Источник creativebloq.com
