Маршрутизация и навигация в Angular

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

  1. Всякий раз, когда вы используете браузер и нажимаете на какую-либо ссылку, вы получаете опыт маршрутизации,
  2. Когда вы вводите URL-адрес в строку поиска браузера, и он открывает запрашиваемую страницу,
  3. Всякий раз, когда вы нажимаете на ссылку, браузер перенаправляет вас на другую страницу.
  4. Нажимайте кнопки «Назад» и «Вперед» в браузерах, к которым он переходит назад и вперед, используя историю браузера страницы.

Через маршрутизатор можно создать одностраничное приложение (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. Здесь мы реализовали простой маршрут, в моей следующей статье мы увидим продвинутые концепции маршрутизации с несколькими маршрутами и дочерними маршрутами.