Занятие 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
    Механизм кэширования роутов

Практика

Добавим в канбан отдельную страницу задачи!

Полезные ссылки

  1. Основы работы с роутером
    https://metanit.com/web/angular2/7.1.php
     

  2. Полная документация по роутеру
    https://angular.io/guide/router

Вопросы?

Made with Slides.com