Маршрутизация и навигация в Angular
Маршрутизация — это путь, который используется для перехода с одной страницы на другую в приложении Angular.
- Всякий раз, когда вы используете браузер и нажимаете на какую-либо ссылку, вы получаете опыт маршрутизации,
- Когда вы вводите URL-адрес в строку поиска браузера, и он открывает запрашиваемую страницу,
- Всякий раз, когда вы нажимаете на ссылку, браузер перенаправляет вас на другую страницу.
- Нажимайте кнопки «Назад» и «Вперед» в браузерах, к которым он переходит назад и вперед, используя историю браузера страницы.
Через маршрутизатор можно создать одностраничное приложение (SPA) в Angular. Маршрутизатор делает две вещи: обновляет состояние приложения при изменении URL-адреса браузера и обновляет URL-адрес при изменении состояния приложения. Когда пользователь переходит с одной страницы на другую, содержимое страницы обновляется без перезагрузки браузера.
Маршрутизация в Angular
В Angular маршрутизация реализована с помощью модуля @angular/router. Теперь создайте новый файл с именем routing.module.ts или, если вы хотите создать с помощью Angular CLI, введите:
ng g module routing
Откройте файл routing.module.ts и введите следующий код, после чего мы собираемся экспортировать RouterModule, чтобы указать, что наш основной модуль зависит от этого модуля.
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from '../home/home.component';
const routes: Routes = [
{ path: '', component: HomeComponent},
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ],
declaration: [ ]
})
export class RoutingModule{ }
Откройте основной модуль app.module.ts и импортируйте указанный выше модуль маршрутизатора.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RoutingModule } from './routing/routing.module';
@NgModule({
imports: [ BrowserModule, RoutingModule ],
});
В app.component.html добавьте тег router-outlet, в котором обновляются и отображаются представления маршрутизатора.
<router-outlet> </router-outlet>
Заключение
Когда пользователь переходит с одной страницы на другую, он будет обновлять содержимое страницы без перезагрузки браузера, даже если URL-адрес изменится. Это называется маршрутизацией. Мы видим, как работает Angular Routing через @angular/Router (RouterModule), и экспортируем это в наш основной модуль приложения, который называется NgModule. Здесь мы реализовали простой маршрут, в моей следующей статье мы увидим продвинутые концепции маршрутизации с несколькими маршрутами и дочерними маршрутами.