Маршрутизация Angular 2 с модулями

Маршрутизация Angular 2 с модулями

Это сообщение было впервые опубликовано на CodingTheSmartWay.com.

Онлайн-курс №1: Angular 2 с TypeScript для начинающих
Онлайн-курс №2: Angular 2 - Полное руководство
Онлайн-курс №3: Angular 2 - С нуля

Концепция модулей Angular 2

Используя новый декоратор @NgModule, мы можем определять модули в нашем приложении Angular 2. Декоратор прикреплен к классу и содержит набор метаданных, описывающих модуль. Согласно официальной документации Angular 2 модули Angular 2 используются, чтобы «помочь организовать приложение в сплоченные функциональные блоки».

Преимущества модульности в Angular 2

• Приложение может быть организовано в более мелкие функциональные блоки.
• Легко расширять приложение, включая модули (например, для внешних библиотек)
• Angular 2 предлагает стандартные библиотеки, такие как: FormsModule, HttpModule, RouterModule.
• Модули Angular объединяют компоненты, директивы и каналы в функциональные блоки.

На самом деле модули Angular 2 можно использовать для разных целей:

• Для каждого приложения определяется один модуль приложения. Этот модуль называется AppModule и по соглашению реализован в файле app.module.ts. Модуль приложения / корневой модуль является основной точкой входа и содержит компоненты, каналы и службы, которые не принадлежат последующим функциональным модулям и должны быть доступны для всего приложения.
• В дополнение к модулю приложения функциональные модули могут помочь в дальнейшей структуре вашего приложения и сгруппировать вашу реализацию в функциональные блоки. Кроме того, функциональные модули могут ускорить работу вашего приложения и обеспечить отложенную загрузку. Когда ваше приложение запускается, вы можете не захотеть, чтобы все загружалось сразу. Области функций, которые не нужны в первую очередь, могут быть загружены позже. Хранение всего вместе в функциональном модуле - это необходимое условие для включения отложенной загрузки в вашем приложении.
• Модули также используются для инкапсуляции конфигурации маршрутизатора. Настройка маршрутов может выполняться на уровне приложения (для AppModule) или на уровне последующих функциональных модулей. Указывая маршруты, мы определяем, какой компонент должен загружаться и отображаться, когда пользователь указывает на определенный URL-адрес в браузере.

В этом посте мы сосредоточимся на третьем типе модулей Angular 2: модулях маршрутизатора.

Модули для настройки маршрутизатора

Добавить логику маршрутизатора / конфигурацию маршрутизатора в наше приложение с помощью модулей очень просто. Модули маршрутизатора могут использоваться на уровне прикладных модулей и функциональных модулей. Давайте сосредоточимся на примере использования модуля маршрутизатора на уровне приложения.

Пошаговое руководство

1) Начните с настройки нового проекта

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

|-app
 — |-app.component.ts
 — |-app.module.ts
 — |-main.ts
 |-index.html
 |-package.json
 |-systemjs.config.js
 |-tsconfig.json
 |-typings.json

2) Добавьте некоторые дополнительные компоненты в папку приложения

Добавьте в папку добавления следующие компоненты:

 |-app
 — |-first.component.ts
 — |-second.component.ts
 — |-third.component.ts

Для каждого из этих компонентов мы используем простую реализацию, как вы можете видеть на следующем (first.component.ts):

import { Component } from ‘@angular/core’;
@Component({
  selector: ‘my-app’,
  template: `
    <h1>First Component</h1>
    <hr>
    This is the first component!
  `
})
export class FirstComponent { }

3) Затем добавьте модуль маршрутизатора

Для реализации модуля маршрутизатора необходимо создать новый файл в папке приложения: app.routing.ts. Вставьте следующий код:

 import { NgModule } from ‘@angular/core’;
 import { Routes, RouterModule } from ‘@angular/router’;
 import { FirstComponent } from ‘./first.component’;
 import { SecondComponent } from ‘./second.component’;
 import { ThirdComponent } from ‘./third.component’;
 
 const routes: Routes = [
   { path: ‘’, pathMatch: ‘full’, redirectTo: ‘first’ },
   { path: ‘first’, component: FirstComponent },
   { path: ‘second’, component: SecondComponent },
   { path: ‘third’, component: ThirdComponent },
 ];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule],
 })
 export class AppRoutingModule { }
 
 export const routingComponents = [FirstComponent, SecondComponent, ThirdComponent];

Сначала нам нужно добавить несколько операторов импорта поверх файла:

• NgModule импортируется из @ angular / core. Декоратор модулей необходим для объявления модулей маршрутизации.
• Маршруты и RouterModule импортируются из @ angular / router. Тип класса Routes используется для создания конфигурации маршрута. RouterModule - это стандартный модуль маршрутизатора Angular 2, который необходимо импортировать каждым модулем маршрутизации.
• Также добавлены операторы импорта для наших компонентов FirstComponent, SecondComponent и ThirdComponent.

Затем мы создаем константный массив типа Routes. Этот массив содержит четыре элемента конфигурации маршрута. Каждый элемент состоит из следующих свойств:

• path: URL-путь маршрута в виде строки.
• компонент: компонент, который должен быть загружен при использовании пути.

Это первый элемент конфигурации маршрута, который не соответствует этому шаблону. Вместо этого вы найдете следующие свойства:

• путь
• pathMatch
• redirectTo

Это перенаправление маршрута. Мы определяем, что корневой путь приложения должен быть перенаправлен на путь первый. Это означает, что когда пользователь вводит http: // localhost /, перенаправление на http: // localhost / first выполняется автоматически.

Теперь, когда массив маршрутов содержит конфигурацию маршрутизации, мы может передать этот массив конфигурации методу RouterModule.forRoot (routes). Этот метод возвращает модуль Router, содержащий нашу конфигурацию. Вызов метода forRoot помещается в массив импорта. Это необходимо, потому что мы хотели бы импортировать получившийся модуль в AppRoutingModule.

Примечание: метод forRoot () следует использовать только для создания RouteModules, которые используются на уровне приложения (в AppModule).

Еще одна вещь, на которую следует обратить внимание, это то, что определен другой массив констант: routingComponents. Этот массив содержит три компонента, которые используются в конфигурации маршрутизации. Поскольку этот массив экспортируется, мы можем снова импортировать этот массив в AppModule. Это упрощает добавление всех компонентов для маршрутизатора в массив объявлений AppModule.

4) Импортируйте AppRoutingModule в AppModule

Реализация AppModule, основного модуля приложения, выглядит следующим образом:

 import { NgModule } from ‘@angular/core’;
 import { BrowserModule } from ‘@angular/platform-browser’;
 
 import { AppComponent } from ‘./app.component’;
 import { AppRoutingModule, routingComponents } from ‘./app.routing’;
 
 @NgModule({
   imports: [ BrowserModule, AppRoutingModule ],
   declarations: [ AppComponent, routingComponents ],
   bootstrap: [ AppComponent ]
 })
 export class AppModule { }

Здесь мы импортируем AppRoutingModule и routingComponents из app.routing.ts. AppRoutingModule добавляется к массиву, которому назначено свойство imports @NgModule. Массив routingComponents используется для добавления всех модулей маршрутизации в массив объявлений. Нам не нужно добавлять операторы импорта для компонентов маршрутизации (FirstComponent, SecondComponent, ThirdComponent).

5) Реализуйте шаблон AppComponent

Для завершения реализации нам нужно добавить шаблон для компонента AppComponent. Мы делаем это, добавляя внешний файл шаблона app.component.html и вставляя следующий код:

 <nav class=”navbar navbar-default”>
   <div class=”container-fluid”>
     <div class=”navbar-header”>
       <a class=”navbar-brand” href=”#”>Angular 2 Router</a>
     </div>
     <ul class=”nav navbar-nav”>
       <li><a routerLink=”/first”>First Component</a></li>
       <li><a routerLink=”/second”>Second Component</a></li>
       <li><a routerLink=”/third”>Third Component</a></li>
     </ul>
   </div>
 </nav>
 <div class=”container”>
   <router-outlet></router-outlet>
 </div>

Мы используем платформу Bootstrap для отображения панели навигации вверху страницы. Панель навигации состоит из трех ссылок на маршруты, которые мы настроили в AppRoutingModule. Чтобы Angular генерировал ссылки для маршрутов, мы используем здесь атрибут routerLink:

routerLink=”/first”

Кроме того, код шаблона содержит элемент ‹router-outlet›. Этот элемент является заполнителем, указывающим Angular, куда следует вставить HTML-вывод компонента маршрутизатора.

6) Запустить приложение

Теперь мы готовы к работе. Переключитесь в командную строку, перейдите в каталог проекта и выполните следующую команду, чтобы запустить проект:

$ npm start

Браузер запускается автоматически, и отображается приложение. Пользовательский интерфейс должен выглядеть следующим образом:

Видеоурок

Этот видеоурок содержит шаги, описанные в тексте выше:

Это сообщение было впервые опубликовано на CodingTheSmartWay.com.