Angular для новичков: Маршрутизация и компоненты

Маршрутизация в приложении

В текущем приложении имеется единственная страница (index.html). Для реализации навигации между страницами (например, /about или /user) потребуется маршрутизатор. Начнём с создания компонента.

Создание компонента «Контакты»

В терминале выполните команду:

ng generate component contacts

Это создаст директорию contacts с файлами contacts.component.ts, contacts.component.html, contacts.component.css и добавит компонент в модуль. В contacts.component.html измените заголовок:

<div class="container">
  <br>
  <h3>Страница с контактами</h3>
</div>

Подключение маршрутизатора

Откройте app.module.ts. Импортируйте необходимые модули:

import { RouterModule, Routes } from '@angular/router';

Создайте массив маршрутов:

const appRoutes: Routes = [
  { path: '', component: AppComponent },
  { path: 'about', component: ContactsComponent }
];

Здесь:

path: » — путь к главной странице, отображаемой компонентом AppComponent.
path: ‘about’ — путь к странице «Контакты», отображаемой компонентом ContactsComponent.

Добавьте RouterModule в секцию imports директивы @NgModule:

imports: [
  BrowserModule,
  RouterModule.forRoot(appRoutes)
],

RouterModule.forRoot() регистрирует маршруты.

Добавление router-outlet

В app.component.html добавьте router-outlet:

<router-outlet></router-outlet>

Это место, где будет отображаться компонент, соответствующий текущему URL.

Добавление дополнительных маршрутов

Для добавления новых страниц создайте новый компонент, импортируйте его в app.module.ts и добавьте соответствующий маршрут в массив appRoutes. Например:

const appRoutes: Routes = [
  { path: '', component: AppComponent },
  { path: 'about', component: ContactsComponent },
  { path: 'user', component: UserComponent }
];

Добавление шапки сайта

Для шапки воспользуемся Bootstrap. Скопируйте код шапки из примера на сайте Bootstrap и вставьте его в app.component.html. Замените ссылки на routerLink:

<a routerLink="/">Главная</a>
<a routerLink="/about">Контакты</a>

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