Эта история изначально была опубликована здесь.

Эта статья основана на Angular CLI 15.1.4, Node 18.13.0, npm 8.19.3.

Маршрутизация в Angular используется для перехода от одного представления к другому по мере выполнения пользователями действий.

В SPA (одностраничном приложении) вы можете условно отображать или скрывать компоненты в зависимости от действий пользователя, в какой-то момент пользователи будут выполнять действие, которое требует перехода к другому представлению в приложении. Для управления навигацией от одного представления к другому необходимо использовать маршрутизацию, чаще всего @angular/router, см. API маршрутизатора. Маршрутизация играет решающую роль в создании динамичного и удобного для пользователя SPA. Это то, что делает ваше приложение похожим на нативное, а не на разрозненный набор отдельных страниц (вспомните интернет 90-х).

Router обеспечивает навигацию, интерпретируя URL-адрес браузера как инструкцию по изменению представления. Кроме того, можно передать дополнительные параметры для обработки в компоненте представления.

Некоторые примеры действий, связанных с маршрутизацией:

  • Ввод URL-адреса в адресную строку, и браузер переходит на соответствующую страницу в приложении Angular.
  • Щелчок по ссылке, которая переходит на новую страницу
  • Нажмите на изображение продукта, чтобы перейти на страницу сведений о продукте.
  • Нажатие кнопки «Назад» или «Вперед» в браузере для запуска навигации в браузере

Маршрутизатор Angular — это пакет @angular/router, при создании шаблона приложения с помощью интерфейса командной строки Angular ng new YOUR_TEST_APP вам будет предложено использовать угловой маршрутизатор. Этот учебник основан на @angular/router. Если вы не хотите использовать @angular/router, есть другие варианты, например ngrx/router.

Давайте посмотрим на некоторые примеры кода.

Базовая маршрутизация

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

Шаги:

  1. Создайте базовое приложение с модулем маршрутизации
  2. Импортируйте Routermodule и Routes в модуль маршрутизации
  3. Определение и добавление маршрутов приложений

1. Создайте базовое приложение с модулем маршрутизации

Давайте создадим новое приложение Angular и назовем его my-routing в папке angular-routing.

mkdir angular-routing
cd angular routing
ng new my-routing --routing --defaults

Команда ng new ... использует Angular CLI для создания базового приложения Angular с AppRoutingModule (модулем маршрутизации приложений). AppRoutingModule — это NgModule, где вы можете настроить свои маршруты.

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

ng generate component first
ng generate component second

Откройте AppRoutingModule (файл: app-routing.module.ts) и импортируйте два компонента.

import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';

2. Импортируйте Routermodule и Routes в модуль маршрутизации.

Импорт Routermodule в Angular AppModule уже был выполнен Angular CLI. Если вы создаете приложение вручную или у вас нет Angular CLI, вам необходимо добавить импорт.

Ваш app-routing.module.ts должен выглядеть примерно так:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

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

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

3. Определите и добавьте маршруты приложений

Давайте определим наши маршруты. У нас есть два компонента first и second, поэтому мы добавляем два маршрута.

Замените routes на:

const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
];

Теперь мы определили маршруты наших приложений. Запустите приложение ng serve и перейдите к http://localhost:4200/first-component. Первый компонент должен отображаться.

Давайте удалим экран приветствия Angular и добавим навигацию для двух компонентов.

Для этого откройте app.component.html и удалите все. Мы собираемся добавить навигацию и маршрутизатор. router-outlet — это заполнитель, который Angular динамически заполняет в зависимости от текущего состояния маршрутизатора. По сути, Angular использует это для вставки компонента, соответствующего маршруту.

<h1>My Angular Routing App</h1>
<nav>
  <ul>
    <li>
      <a
        routerLink="/first-component"
        routerLinkActive="active"
        ariaCurrentWhenActive="page"
      >
        First Component
      </a>
    </li>
    <li>
      <a
        routerLink="/second-component"
        routerLinkActive="active"
        ariaCurrentWhenActive="page"
      >
        Second Component
      </a>
    </li>
  </ul>
</nav>

<router-outlet></router-outlet>

Теперь снова запустите приложение Angular, и вы должны увидеть заголовок с двумя кнопками. Нажимайте кнопки и смотрите, как отображается компонент и изменяется ваш URL.

TL;DR

  • Маршрутизация — это механизм, который позволяет вам создавать разные страницы в вашем приложении Angular без перезагрузки всей страницы.
  • Массив маршрутизаторов в AppRoutingModule содержит все маршруты.
  • router-outlet используется Angular для вставки компонента, соответствующего маршруту.

Спасибо за внимание. Если у вас есть вопросы, используйте функцию комментариев или отправьте мне сообщение @mariokandut . Если вы хотите узнать больше об Angular, ознакомьтесь с этими Учебными пособиями по Angular.

Ссылки (и большое спасибо): Angular — Docs, Angular Routing Guide, Cory Rylan