Маршрутизация в Angular: создание и навигация между страницами

TL;DR

Кратко: в Angular добавьте маршруты в модуль маршрутизации, создайте компоненты для каждой страницы и используйте либо routerLink / href в шаблоне, либо Router.navigate() в TypeScript для переходов. Рекомендуется использовать RouterModule.forRoot(routes), продумать структуру путей и учитывать lazy loading и guards для масштабируемых приложений.

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

Навигация в шаблоне HTML может осуществляться через якорные ссылки () или директиву routerLink, а в TypeScript — через Router.navigate(). Ниже — подробное руководство, расширенные советы и проверочные списки.

Что такое маршрут в Angular

Маршрут — это запись, которая связывает путь URL с конкретным компонентом. Одно предложение: маршрут определяет, какой компонент показывать при определённом URL.

Как создать новую страницу (компонент) в Angular

1. Создайте новое приложение Angular или откройте существующее.

2. Сгенерируйте компонент через CLI:

ng generate component home

3. Откройте файл src/app/home/home.component.html и замените содержимое на нужное. Ниже пример локализованного содержимого компонента «Главная» (Home):

  
  
 Главная 
  
  
  
    Я — фотограф, занимаюсь свадебной съёмкой. Посмотрите мои проекты!  
  
  
  
  
    
 John & Amy 
  
    
 Blue Mountains, Australia 
  
  
  
  
  
    
 Ross & Rach 
  
    
 Hunter Valley Gardens, Australia 
  
  
  

4. Добавьте стили для компонента src/app/home/home.component.css:

.content {  
  line-height: 2rem;  
  font-size: 1.2em;  
}  
  
.card {  
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);  
  width: 400px;  
  padding: 16px;  
  margin: 24px 0px;  
  background-color: whitesmoke;  
  font-family: sans-serif;  
}

5. Сгенерируйте второй компонент, например для «О себе» (About):

ng generate component about

6. Откройте src/app/about/about.component.html и замените содержимое (пример):

  
 
 О себе 
  
 
  
  Меня зовут John, и я люблю фотографию. Я фотографирую более 25 лет. Найдите меня в соцсетях:  
 
  
  Facebook   
  
  LinkedIn   
  
  Instagram   
  

7. Добавьте стили для src/app/about/about.component.css:

.content {  
  line-height: 2rem;  
  font-size: 1.2em;  
}

Important: видимый текст в компонентах (заголовки, подписи) можно локализовать, но пути маршрутов (например, ‘about’) оставьте консистентными и понятными для приложения.

Как настроить маршрутизацию (app-routing.module.ts)

Если модуля маршрутизации ещё нет, создайте его:

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

Это создаст файл src/app/app-routing.module.ts.

Вверху файла добавьте нужные импорты:

import { CommonModule } from '@angular/common';  
import { Routes, RouterModule } 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 }  
];

И экспортируйте RouterModule в NgModule:

@NgModule({  
  declarations: [],  
  imports: [  
    CommonModule,  
    RouterModule.forRoot(routes)  
  ],  
  exports: [RouterModule]  
})

В корневом шаблоне src/app/app.component.html замените содержимое на контейнер с точкой вставки маршрутов:

Навигация между страницами в шаблоне (HTML)

Чтобы перейти на страницу из HTML, используйте ссылку с путём маршрута. Два распространённых варианта:

• plain href (браузерный переход) — работает, но может перезагружать страницу;
• директива Angular routerLink — предпочтительна, сохраняет состояние SPA и history API.

Примеры:

  
  Главная  
  О себе  




  
  Главная  
  О себе  

Стили src/app/app.component.css (пример):

.container {  
  margin: 48px 35%;  
  font-family: "Arial", sans-serif;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
}  
  
.navbar {  
  background-color: darkslategray;  
  padding: 30px 50px;  
  display: flex;  
  align-items: center;  
  font-family: sans-serif;  
}  
  
.link:first-of-type {  
  margin-right: 32px;  
}  
  
.link {  
  color: white;  
  text-decoration: none;  
  font-size: 14pt;  
  font-weight: bold;  
}

Добавьте глобальные стили src/styles.css:

body {  
  margin: 0;  
  padding: 0;  
}

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

ng serve

Откройте в браузере http://localhost:4200/. По умолчанию загрузится компонент Home.

Нажмите на ссылку «О себе», чтобы перейти на страницу About.

Навигация из TypeScript: Router.navigate()

Если нужно инициировать переход программно (например, по клику кнопки), используйте Router.navigate():

1. В шаблоне замените ссылки на кнопки и вызовите функцию по нажатию:

Главная  
О себе

2. Стили для кнопок (src/app/app.component.css):

button {  
  background-color: black;  
  padding: 4px 8px;  
  cursor: pointer;  
}

3. Импортируйте Router в src/app/app.component.ts:

import { Router } from '@angular/router';

4. Внедрите Router через конструктор:

constructor(private router: Router) {  
}

5. Добавьте функцию навигации:

clickButton(path: string) {  
    this.router.navigate([path]);  
}

6. Перезапустите ng serve, откройте приложение и проверьте переходы.

Нажав «О себе», вы попадёте на страницу About.

Полезные практики и альтернативные подходы

• Используйте routerLink в шаблонах вместо обычного href для избежания полной перезагрузки страницы.
• Для больших приложений применяйте lazy loading (ленивая загрузка модулей) — уменьшает время первого рендера.
• При вложенной структуре страниц применяйте child routes (дочерние маршруты).
• Для защиты маршрутов используйте guards (CanActivate, CanDeactivate).
• Настройте базовый тег в index.html, чтобы корректно работала навигация.
• Рассмотрите стратегию хеш-роутинга (HashLocationStrategy) если сервер не настроен на fallback для SPA.

Пример использования lazy loading (в routes):

const routes: Routes = [  
  { path: '', component: HomeComponent },  
  { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) }  
];

Когда lazy loading не подходит: простые одностраничные приложения с малым количеством компонентов — иногда достаточно простых статических модулей без ленивой загрузки.

Частые ошибки и как их исправить (counterexamples)

• Проблема: при переходе по ссылке 404 от сервера. Причина: сервер не настроен на отдачу index.html для всех путей. Решение: настроить fallback на стороне сервера (например, Nginx, Apache) или использовать HashLocationStrategy.

• Проблема: routerLink не работает. Причина: вы не импортировали RouterModule в модуль или забыли добавить . Решение: проверить импорты и наличие .

• Проблема: путь не совпадает (навигация не срабатывает). Причина: путевой параметр или слэш не соответствует. Решение: проверьте, используется ли абсолютный или относительный путь и корректность base href.

Контроль качества: тест-кейсы и критерии приёмки

Критерии приёмки:

• При старте приложения открывается компонент Home (путь ‘’).
• Клик по ссылке/кнопке «О себе» открывает компонент About без перезагрузки страницы (при использовании routerLink).
• При ручном вводе URL /about приложение корректно рендерит компонент About.
• Guard блокирует доступ к маршруту при отсутствии прав (если предусмотрено).

Минимальные тест-кейсы:

1. ng serve -> открыть / -> ожидать содержимое Home.
2. Нажать routerLink /about -> ожидать содержимое About, сохранение истории (кнопка назад работает).
3. Ввести URL /about в адресной строке -> ожидать содержимое About.

Роли и чек-листы (developer / reviewer)

Developer:

• Сгенерировать компоненты (home, about).
• Добавить маршруты в app-routing.module.ts.
• Добавить в app.component.html.
• Использовать routerLink для внутренних переходов.
• Реализовать lazy loading, если необходимо.

Reviewer:

• Проверить отсутствие полных перезагрузок при переходах.
• Проверить корректность base href и серверного fallback.
• Проверить покрытие тестами критичных маршрутов.

Ментальные модели и эвристики

• Малое приложение = простая маршрутизация в одном модуле.
• Рост приложения = разделение по фичам + lazy loading.
• Безопасность и права = guards + централизованная логика аутентификации.

Быстрый чек-лист при деплое

• Убедитесь, что сервер возвращает index.html на все пути (SPA fallback).
• Проверьте корректность production build (ng build --prod).
• Проверить работу маршрутов после деплоя по прямым ссылкам.

Decision flow (простая диаграмма принятия решения)

flowchart TD
  A[Нужны ли отдельные страницы?] -->|Да| B{Много страниц?}
  B -->|Нет| C[Использовать простой routing]
  B -->|Да| D{Нужна ли оптимизация загрузки?}
  D -->|Да| E[Применить lazy loading]
  D -->|Нет| C
  A -->|Нет| F[Оставить одну страницу]

Безопасность и приватность

• Не храните секреты в маршрутах (в URL). Используйте состояние/сервисы для передачи чувствительных данных.
• Если маршрут содержит параметры, валидируйте их и экранируйте перед выводом.

Краткое резюме

Маршрутизация в Angular — гибкий инструмент для организации навигации в SPA. Начните с простых routes и RouterModule.forRoot(routes), используйте routerLink и Router.navigate() по назначению, внедряйте lazy loading и guards по мере роста приложения.

Сводка ключевых действий

• Сгенерировать компоненты: ng generate component ....
• Создать app-routing.module.ts и объявить routes.
• Использовать в базовом шаблоне.
• Навигировать через routerLink или Router.navigate().

Спасибо — теперь вы можете настроить маршрутизацию и масштабировать её по мере роста приложения.