Перевод: Basic Routing in Angular 2

Основы роутинга в Angular 2

Все что написано относиться к версии angular-2.0.0-rc.6

Роутинг используется для отделения различных частей приложения, обычно (но не всегда) для обозначения своего местоположения используется URL. Роутинг Angular 2 очень прост в использование, и ниже мы опишем основы его использования.

Для примера мы разместим нашу логин страницу с URL /login, а страницу с инструментами (dashboard) с URL /dashboard. В Angular 2, создадим компоненты LoginComponent для /login и DashboardComponent для /dashboard.

Существуют три главных компонента которые нам нужно будет использовать для настройки роутинга в Angular:

  • Routes описывает все роутеры приложения
  • RouterOutlet место расположения контента
  • RouterLink используется для переходов между маршрутами

Routes

Routes объект с помощью которого мы можем описать все наши маршруты в приложение. Для примера, создадим наши маршруты:

Здесь мы:

  • использовали path для указания URL
  • привязали component к соотвествующим маршрутам
  • использовали редирект redirectTo

Предоставление Router

Что бы инсталлировать роутер в приложение нам нужно использовать функцию RouterModule.forRoot() в imports в корневом NgModule:

 

Обратите внимание что мы передали routes как аргумент RouterModule.forRoot().

Когда мы указываем RouterModule в imports это означает что мы можем использовать компоненты RouterOutlet м RouterLink в этом модуле. Далее их описание:

RouterOutlet

Директива RouterOutlet говорит нашему роутеру где нам нужно отображать контент вьюх.

Для примера:

 

Когда мы перейдем по данному маршруту то наш контент будет отображен внутри тега router-outlet. В нашем случае если мы перейдем по ссылке /login то будет отображен контент LoginComponent.

RouterLink

Если нам нужно перейти между ссылками то нам нужно использовать директиву RouterLink. Для примера если нам нужно сделать переходы на страницу login и страницу dashboard через навигационное меню, то сделаем следующие изменения:

 

Если вам приходилось раньше использовать ui-router, то вы заметите что router-link очень похож с директивой ui-sref.

Аргумент router-link массив array с именами маршрутов в качестве первого элемента (например "['home']" или "['about']"). Это помогает различать маршруты по именам. Обратите внимание что мы используем имена name маршрутов а не URL.

Это возможно немного странно что значения router-link это строка с массивом содержащим строку ("['home']", для примера). Это потому что существуют много других вещей которые вы можете передать когда используете маршруты но мы поговорим об этом подробнее когда мы будем говорить о дочерних маршрутах и их параметрах в нашей книге.

Расположение imports

Что бы найти все константы которые мы использовали выше нам нужно импортировать все используемые библиотеки:

 

Заключение

Мы описали самые базовые основы для того что бы начать работать с роутингом в Angular 2.

В книге мы опишем более сложные концепции, такие как вложенные маршруты, защищенные (protected) маршруты, жизненный цикл маршрутов, параметры запросов и т.п.. Каждая из этих концепций будет представлена как часть учебного приложения. Так что обязательно посмотрите примеры кода!

It's only fair to share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on VK