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

Кратко: В этой статье показано, как создать несколько страниц в приложении Angular и настроить навигацию между ними с помощью модуля маршрутизации, ссылок в HTML и вызовов router.navigate() из TypeScript. Приведены пошаговые команды, пример структуры файлов, шаблоны и проверочные списки для разработки и приёма.

Ноутбук с кодом на экране и книгами на столе

Введение

Если вы создаёте приложение на Angular с несколькими страницами, нужно настроить маршрутизацию (routing). Маршрутизация определяет, какой компонент рендерится при переходе по определённому пути URL. В этой статье показано, как:

создать компоненты для страниц;
зарегистрировать маршруты в модуле маршрутизации;
отображать компонент через ;
навигировать через HTML-ссылки и через TypeScript (router.navigate());
добавить стили и проверить работу локально.

Краткое определение: Router — сервис Angular, который управляет навигацией между компонентами по маршрутам.

Что вам потребуется

Node.js и npm установленными на машине;
Angular CLI (ng);
базовое приложение Angular (можно создать ng new my-app).

Важно: шаги сохранены в порядке, удобном для разработчика. Кодовые фрагменты можно копировать напрямую в соответствующие файлы проекта.

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

План действий:

Создайте приложение Angular или откройте существующее.
В терминале выполните команду генерации компонента. Например, для страницы Home:

ng generate component home

Откройте файл компонента шаблона src/app/home/home.component.html и замените содержимое на следующий HTML:


  Home
  
    I am a photographer that does wedding photography. Check out my projects!
  
  
    John & Amy
    Blue Mountains, Australia
  
  
    Ross & Rach
    Hunter Valley Gardens, Australia

Добавьте стили в 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;
}

Генерируем второй компонент для страницы «About»:

ng generate component about

Замените шаблон src/app/about/about.component.html на:


  About Me
  
    I'm John, and I love taking photos. I have been taking photos for over 25 years. Visit me on my social media:
  
  Facebook
  LinkedIn
  Instagram

Стили для About:

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

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

2. Как настроить маршрутизацию приложения

Мы будем использовать один файл маршрутов для всего приложения: src/app/app-routing.module.ts.

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

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

В результате в src/app появится файл app-routing.module.ts.

Структура файлов Angular с файлом маршрутизации

В начале файла добавьте необходимые импорты. Убедитесь, что вы импортировали CommonModule, RouterModule и компоненты:

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 }
];

Зарегистрируйте маршруты в NgModule:

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

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

— это плейсхолдер, куда Angular будет рендерить компоненты согласно маршрутам.

3. Навигация через ссылки в HTML

Чтобы создать навигацию через HTML, используйте обычные теги с атрибутом href, где путь совпадает с путём в массиве маршрутов.

Вставьте навигационную панель в src/app/app.component.html перед контейнером:


  Home
  About

Добавьте стили в 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

Откройте в браузере URL http://localhost:4200/. Приложение загрузится на страницу Home.

Домашняя страница Angular с контентом

Перейдите на страницу About по ссылке в навбаре.

Приложение Angular показывает страницу About

Примечание: для корректной работы ссылок используйте абсолютные или относительные пути в зависимости от конфигурации базового href в index.html.

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

Иногда нужно управлять навигацией программно. Для этого используют Router из @angular/router и метод navigate().

Замените ссылки на кнопки в src/app/app.component.html:

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

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

В начале файла src/app/app.component.ts импортируйте Router:

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

Инжектируйте Router в конструктор компонента:

constructor(private router: Router) {}

Добавьте метод clickButton() в класс компонента:

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

Повторно запустите ng serve и откройте приложение в браузере. Теперь навигация осуществляется по клику на кнопки.

Приложение Angular показывает домашнюю страницу

Приложение Angular показывает страницу About

Совет: для навигации с передачей параметров используйте this.router.navigate(['/path', id]) или navigateByUrl() при необходимости.

5. Создание множества страниц и архитектурные подсказки

Если ваше приложение содержит много страниц, придерживайтесь таких практик:

Разбейте маршруты по модулям (feature modules) и используйте ленивую загрузку (lazy loading) для крупных разделов.
Для маршрутов с параметрами используйте синтаксис path: 'product/:id' и получайте параметры через ActivatedRoute.
Централизуйте маршруты в отдельных файлах для удобства тестирования и рефакторинга.
Используйте защитники маршрутов (guards) для авторизации и проверки доступа.

Когда маршрутизация может подвести

Сервер не настроен на отдачу index.html для всех путей (нужно настроить fallback), тогда при обновлении страницы на нестандартном пути может выдаваться 404.
Если базовый href в index.html задан неверно, пути будут рассчитаны неверно.
Привязка href напрямую к сторонним ссылкам может вывести пользователя из приложения.

Дополнительные материалы и ускорители разработки

Ниже — полезные чеклисты, критерии приёмки и пример решения в виде decision tree.

Чеклист разработчика

[ ] Сгенерированы компоненты home и about.
[ ] В app-routing.module.ts добавлены маршруты для ‘’ и ‘about’.
[ ] В app.component.html есть .
[ ] Навигация работает через и через router.navigate().
[ ] Приложение запускается командой ng serve и рендерит обе страницы.
Стили добавлены и не ломают адаптивность.

flowchart TD
  A[Запустить приложение] --> B{Отображается ли Home?}
  B -- Да --> C{Работает ли переход на /about через ссылку?}
  B -- Нет --> G[Проверить console и сборку ng serve]
  C -- Да --> D{Работает ли /about при прямом вводе URL в адресной строке?}
  C -- Нет --> H[Проверить пути href и base href]
  D -- Да --> E[Готово]
  D -- Нет --> F[Настроить серверный фолбэк 'напр., redirect to index.html']