Определение маршрутов: path, component, базовые примеры

1. Введение

В Angular маршрут — это правило, которое говорит: "Если пользователь зашёл по такому-то адресу (URL), покажи вот этот компонент". Можно провести аналогию с почтовым отделением: если письмо пришло по адресу "ул. Angular, д. 1", его доставят в квартиру HomeComponent, а если "д. 2" — то в AboutComponent.

Маршруты описываются в виде массива объектов, где каждый объект — отдельное правило для сопоставления URL и компонента.

Схема маршрута

{
  path: 'адрес',        // часть URL
  component: Компонент  // компонент, который надо отобразить
}

Маршруты обычно объявляются в отдельном файле, например, app-routing.module.ts. Давайте рассмотрим базовый пример.

Пример 1: Минимальный набор маршрутов

Допустим, у нас есть три компонента:

• HomeComponent (главная страница)
• AboutComponent (страница "О нас")
• NotFoundComponent (страница 404)

Вот как выглядит определение маршрутов:

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

const routes: Routes = [
  { path: '', component: HomeComponent },           // Корневой путь ('/')
  { path: 'about', component: AboutComponent },     // /about
  { path: '**', component: NotFoundComponent }      // Любой другой путь (404)
];

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

Разбор примера

• { path: '', component: HomeComponent }
  Срабатывает, когда пользователь заходит на корень сайта (/). Обычно здесь показывают главную страницу.
• { path: 'about', component: AboutComponent }
  Срабатывает при переходе на /about.
• { path: '**', component: NotFoundComponent }
  "Дикий" путь (**) ловит все неизвестные маршруты — это стандартный способ реализовать страницу 404.

2. Как это работает: что происходит в браузере

Когда пользователь вводит адрес вроде http://localhost:4200/about, Angular сравнивает часть после домена (about) с массивом маршрутов. Если находит совпадение — отображает указанный компонент. Если не находит — срабатывает маршрут с **.

Забавный факт:
Angular не перезагружает страницу — он просто подменяет содержимое <router-outlet>, в котором отображаются компоненты.

Связь маршрута и компонента: как происходит отображение

Чтобы маршруты работали, в вашем главном шаблоне (обычно это app.component.html) должен быть специальный элемент:

<router-outlet></router-outlet>

Это как "окошко", в которое Angular подставляет нужный компонент в зависимости от маршрута.

Пример шаблона

<!-- app.component.html -->
<nav>
  <a routerLink="/">Главная</a>
  <a routerLink="/about">О нас</a>
</nav>
<hr>
<router-outlet></router-outlet>

Пояснение:

• <a routerLink="/"> — создаёт ссылку, которая не перезагружает страницу, а меняет маршрут внутри Angular.
• <router-outlet> — сюда будет "подставлен" компонент, соответствующий текущему маршруту.

3. Базовый пример: создаём приложение с маршрутизацией

Давайте шаг за шагом создадим простое приложение с двумя страницами и маршрутизацией.

Шаг 1. Генерируем компоненты

В терминале пишем (если используете Angular CLI):

ng generate component home
ng generate component about
ng generate component not-found

Шаг 2. Создаём файл маршрутизации

Если файл app-routing.module.ts ещё не создан, создайте его:

ng generate module app-routing --flat --module=app

Добавьте маршруты, как показано выше.

Шаг 3. Импортируем AppRoutingModule

Убедитесь, что в app.module.ts импортирован AppRoutingModule:

import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports: [
    // другие импорты
    AppRoutingModule
  ],
  // ...
})
export class AppModule { }

Шаг 4. Добавляем <router-outlet>

В app.component.html:

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

Шаг 5. Проверяем работу

Запустите приложение:

ng serve

• Перейдите на / — увидите HomeComponent.
• Перейдите на /about — AboutComponent.
• Любой другой адрес — NotFoundComponent.

4. Параметры маршрута

Пока что мы задавали только "жёсткие" пути (about, ''). Но иногда нужно, чтобы часть пути была переменной — например, /user/42, где 42 — это ID пользователя.

Это делается с помощью двоеточия:

{ path: 'user/:id', component: UserProfileComponent }

Теперь маршрут сработает для любого /user/что-угодно, а значение попадёт в параметр id.

5. Типичные ошибки при определении маршрутов

Ошибка №1: отсутствие <router-outlet> в шаблоне.
Если забыть добавить <router-outlet>, никакой компонент не будет отображаться при смене маршрута. Это как если бы вы ждали курьера, но забыли открыть дверь.

Ошибка №2: неправильный порядок маршрутов.
Маршруты проверяются сверху вниз. Если поставить { path: '**', ... } выше других, все адреса будут попадать на страницу 404. Всегда размещайте "дикий" маршрут (**) в самом конце!

Ошибка №3: опечатка в пути или компоненте.
Если указать несуществующий компонент или ошибиться в названии пути, Angular не сможет найти нужный ресурс и покажет ошибку в консоли.

Ошибка №4: забыли про импорт RouterModule.
Если не импортировать RouterModule с помощью RouterModule.forRoot(routes), Angular не будет знать о ваших маршрутах, и переходы по ссылкам работать не будут.

Ошибка №5: неправильное использование routerLink.
Иногда новички используют обычный <a href="...">, что приводит к перезагрузке страницы. Для Angular-маршрутов используйте только <a routerLink="...">.