Эта история изначально была опубликована здесь.
Эта статья основана на 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.
Давайте посмотрим на некоторые примеры кода.
Базовая маршрутизация
Мы собираемся создать базовое приложение с двумя компонентами и двумя маршрутами.
Шаги:
- Создайте базовое приложение с модулем маршрутизации
- Импортируйте
Routermodule
иRoutes
в модуль маршрутизации - Определение и добавление маршрутов приложений
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