#7 Angular2. Тур героев. Роутинг. Часть 1

poster
В этом уроке мы добавим страницу Dashboard, прикрутим роутинг и реализуем навигацию между дашбоардом и списком героев.
Понравилось? Поделитесь с друзьями!
Понравилось?
Поделитесь с друзьями!
Комментарии
Текст видео

Всем привет. Мы продолжаем "Тур Героев". В этом уроке мы добавим страницу Dashboard, прикрутим роутинг и реализуем навигацию между дашбоардом и списком героев.

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

Давайте переименуем наш app.component.ts в heroes.component.ts и переименуем внутри него класс AppComponent на HeroesComponent. Теперь переименуем селектор с my-app на my-heroes.

@Component({
  selector: 'my-heroes',
})
export class HeroesComponent implements OnInit {
}

Наш новый AppComponent будет содержать в себе ссылки навигации вверху страницы, а под ними выводить страницу, которую мы хотим отобразить в аутлете.

Давайте с вами создадим новый файл app.component.ts. Опишем класс AppComponent. Он у нас пока будет пустой. Так же не забываем слово export в начале.

export class AppComponent {
}

Создаем переменную title

title = 'Tour of Heroes'

Импортируем Component и описываем декоратор.

import { Component } from 'angular2/core';
@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <my-heroes></my-heroes>
  `
})

Внутри темплейта описываем тег в который мы будем выводить наших героев.

Теперь очень важный момент, о котором я говорил в прошлом уроке. Нам нужно удалить HeroService из списка провайдеров в файле heroes.component.ts так как теперь его регистрация будет в app.component.ts и мы не хотим, чтобы у нас создавалось 2 копии сервиса на 2 разных уровнях приложения. Поэтому мы удаляем HeroProviders из списка провайдеров в heroes.component.ts

providers: []

Также нужно не забыть добавить в app.component.ts директивы HeroesComponent, которая будет отрисовывать у нас список героев и наш провайдер HeroService.

directives: [HeroesComponent],
providers: [HeroService]

Теперь нужно не забыть их импортировать.

import {HeroService} from './hero.service';
import {HeroesComponent} from './heroes.component';

Теперь у нас есть все, что нам необходимо для работы. Также мы можем удалить наш title из шаблона heroes.component.ts и переменную title из класса HeroesComponent.

Если мы посмотрим в браузере, то все наши герои выводятся и все работает по прежнему, но теперь герои у нас выводятся из компонента heroes в теге .

Теперь давайте реализуем роутинг.

Первое, что нам нужно сделать, это добавить тег base в index.html

<head>
  <base href="/">

Это нужно делать по двум причинам. Во первых, только так у нас будет работать pushState для изменения урла, иначе ангулар у нас будет материться на то, что мы не добавили base href. Во вторых, браузеру нужен base href для того, чтобы строить относительные ссылки к css, скриптам и картинкам.

Также нужно добавить router.js в подключение скриптов в index.html

<script src="node_modules/angular2/bundles/router.dev.js"></script>

Роутер в angular 2 - это сервис. Мы можем его импортировать и добавить в список провайдеров, чтобы начать его использовать. Роутер состоит из сервисов, директив и конфига. Давайте все это импортируем.

import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';

Что это такое? RouteConfig - это конфиг роутера, ROUTER_DIRECTIVES - это набор директив для роутера, и ROUTER_PROVIDERS - это провайдеры для роутера.

Для начала добавим в directives и providers импортированые сервисы и директивы.

directives: [ROUTER_DIRECTIVES],
providers: [
  ROUTER_PROVIDERS,
  HeroService
]

Как вы видите мы удалили HeroesComponent из списка directives. Это потому, что AppComponent больше не будет отрисовывать компонент героев. Это будет делать роутер.

Теперь давайте добавим конфиг нашего роутера.

@RouteConfig([
  {
    path: '/heroes',
    name: 'Heroes',
    component: HeroesComponent
  }
])

RouteConfig принимает массив обьектов. В каждом обьекте у нас есть path - путь при котором будет срабатывать роут, name - оффициальное имя роута, которое всегда должно начинаться с большой буквы и компонент - который будет отрисовываться когда мы будет переходить на этот роут.

Теперь нам нужно задать в шаблоне место, куда этот компонент будет выводиться. Для этого воспользуемся директивой роутера . Он позволяет выводить в это место компонент, описаный в конфиге роутера.

template: `
  <h1>{{title}}</h1>
  <router-outlet></router-outlet>
`

Если мы перейдем на урл /heroes, то увидим, что у нас отрисовались наши герои.

Теперь давайте добавим в шаблон ссылку для перехода на урл с списком героев.

<a [routerLink]="['Heroes']">Heroes</a>

Мы применяем RouterLink директиву, а это еще одна директива ROUTER_DIRECTIVES. У тега а мы просто указываем атрибут с именем Heroes. Это как раз имя, которое мы определили в RouteConfig.

Если мы перейдем на рутовый урл и нажмем на ссылку, то мы все так же попадем на список героев без перезагрузки страницы.

Давайте добавим теперь еще одну страницу. И это будет страница Dashboard. Для этого создадим файл dashboard.component.ts с таким кодом.

import { Component } from 'angular2/core';

@Component({
  selector: 'my-dashboard',
  template: '<h3>My Dashboard</h3>'
})
export class DashboardComponent { }

Импортируем DashboardComponent в AppComponent.

import { DashboardComponent } from './dashboard.component';

Теперь добавим еще 1 роут в RouteConfig.

{
  path: '/dashboard',
  name: 'Dashboard',
  component: DashboardComponent,
  useAsDefault: true
}

Единственно, что тут появилось нового - это useAsDefault переменная. Она указывает какой роут нужно применять для рутовой страницы.

Давайте добавим ссылку на dashboard и обрамим их в nav тег.

<nav>
    <a [routerLink]="['Dashboard']">Dashboard</a>
    <a [routerLink]="['Heroes']">Heroes</a>
  </nav>

Теперь в браузере мы можем переходить между страницами и все работает.

Только зарегистрированные пользователи могут оставлять комментарии.  Войдите, пожалуйста.
klinski
2 лет назад
Спасибо за замечательный курс. Планируется ли обновление и продолжение курса?
monsterlessons
2 лет назад
Пока с сожалению нет, так как не хватает времени. Возможно позже.
Alex Krepchuk
2 лет назад
Спасибо за курс, ждем продолжение...
monsterlessons
2 лет назад
На здоровье)