Занятие 10.
Роутинг
SIS.Angular.2018
Петров Андрей
План занятия
- О задаче роутинга
- Конфигурация роутов
- router-outlet
- Ссылка на страницу
- Параметры роута
Как скинуть ссылку на задачу?
Многостраничные сайты
https://www.wikihow.pet/Potty-Train-a-Puppy
Роутинг
https://www.wikihow.pet/Potty-Train-a-Puppy
https://www.wikihow.com/Feel-Great-in-the-Morning
Роутер на сервере
Роутер на клиенте
/board/
BoardComponent
/board/tasks/42
TaskPageComponent
Конфигурация роутера
const routes: Routes = [{
path: '',
pathMatch: 'full',
component: BoardComponent,
}, {
path: 'tasks/:id',
component: TaskPageComponent
}];
@NgModule({
declarations: [AppComponent, BoardComponent, TaskPageComponent],
imports: [CommonModule, RouterModule.forRoot(routes)],
bootstrap: [AppComponent],
})
export class AppModule {
}
Куда вставлять компонент?
router-outlet
Точка вставки компонента текущего роута в DOM.
<p> Это Канбан! </p>
<router-outlet></router-outlet>
app.component.html
DOM
Ссылка на страницу
Удобное дополнение для ссылок HTML
<a routerLink="/user/bob"
routerLinkActive="class1 class2">
Bob
</a>
<a [routerLink]="['user', 'bob']"
[routerLinkActive]="['class1', 'class2']">
Bob
</a>
Как получить id из URL?
Роуты
const routes: Routes = [{
path: '',
pathMatch: 'full',
component: BoardComponent,
}, {
path: 'tasks/:id',
component: TaskPageComponent
}];
Параметры страниц
ActivatedRoute – активный роут
-
params – observable с параметрами роута
-
queryParams – observable с параметрами запроса
constructor(private route: ActivatedRoute, private backend: BackendService) {
}
ngOnInit() {
this.taskSub = this.route.params
.pipe(
map(params => parseInt(params.id, 10)),
switchMap(id => this.backend.getTask(id))
)
.subscribe(task => this.task = task);
}
Ленивый роутер
/tasks/512
/tasks/514
Изменился только параметр роута
Переиспользовать компонент
Иерархия роутов
"/"
AppComponent
"country"
CountryComponent
"person"
PersonComponent
"add"
AddCountryComponent
"list"
CountryListComponent
"list"
PersonListComponent
Even more!
-
Lazy modules
Механизм, позволяющий разбить приложение на лениво загружаемые части
-
Guards
Механизм проверки прав доступа к роуту
-
Resolvers
Механизм предзагрузки данных для роута
-
Routes cache
Механизм кэширования роутов
Практика
Добавим в канбан отдельную страницу задачи!
Полезные ссылки
-
Основы работы с роутером
https://metanit.com/web/angular2/7.1.php
-
Полная документация по роутеру
https://angular.io/guide/router
Вопросы?
Routing
By walkingdev
Routing
- 477