Что такое Angular Router?

Angular Router — это библиотека, встроенная в Angular, которая позволяет разработчикам создавать одностраничные приложения (SPA) с навигацией между различными компонентами. Она отвечает за управление маршрутизацией в приложении, позволяя пользователям переходить между страницами без перезагрузки всего приложения.

Основные функции Angular Router:

1. Маршрутизация: Определяет, какой компонент отображается в зависимости от URL.
2. Навигация: Позволяет пользователям переходить между различными частями приложения.
3. Lazy loading: Позволяет загружать модули только по мере необходимости, что значительно повышает производительность приложения.
4. Защита маршрутов: Доступ к определенным маршрутам может быть ограничен, например, для авторизованных пользователей.

Установка Angular Router

Angular Router устанавливается автоматически при создании нового проекта Angular с помощью Angular CLI. Для создания нового проекта выполните следующую команду в терминале:

ng new my-angular-app --routing

Флаг --routing создаст файлы маршрутизации в вашем проекте.

Настройка маршрутов

Для настройки маршрутов вам нужно определить их в файле маршрутизации (обычно это app-routing.module.ts). Вот пример настройки маршрутов:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent }, // Главная страница
  { path: 'about', component: AboutComponent }, // Страница "О нас"
];

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

Объяснение кода:

• Routes — это массив маршрутов, где каждый маршрут указывает путь (path) и компонент (component), который будет отображаться.
• RouterModule.forRoot(routes) — метод, который конфигурирует маршрутизатор и делает его доступным в приложении.
• AppRoutingModule — модуль, который обрабатывает маршрутизацию.

Навигация по маршрутам

После того как маршруты настроены, вы можете использовать директиву routerLink для навигации между компонентами. Например, для создания кнопок навигации можно использовать следующий код в вашем шаблоне:

<nav>
  <a routerLink="/">Главная</a>
  <a routerLink="/about">О нас</a>
</nav>
<router-outlet></router-outlet>

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

Пример компонента

Вот пример простого компонента, который будет использоваться для главной страницы:

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: `<h1>Добро пожаловать на главную страницу!</h1>`
})
export class HomeComponent { }

Заключение

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