Щоб усе працювало, потрібно вказати Angular, яка URL-адреса відображає який компонент. Це називається маршрутизацією.

Основний файл маршрутизації

Під час створення Angular-додатку за допомогою CLI можна увімкнути маршрутизацію одразу — просто дайте відповідь "Yes" на запит щодо маршрутизації. Angular автоматично створить необхідні файли (це вже було зроблено під час створення додатку). Один із цих файлів — app.routes.ts.

Якщо з якоїсь причини цього файлу немає, не хвилюйтеся — ви можете створити його самостійно в кореневій папці проєкту. Він має виглядати так:

Цей файл повідомляє Angular, які маршрути існують у вашому додатку та які компоненти слід відображати для кожного маршруту.

Також переконайтеся, що ваші маршрути підключені у app.config.ts таким чином:

Без рядка provideRouter(routes) Angular не знатиме про ваші маршрути, навіть якщо вони визначені у app.routes.ts.

Налаштування маршрутів

Тепер додамо маршрути для нашого додатку Task Tracker. Відкрийте app.routes.ts та напишіть наступний код:

Це просто масив маршрутів, який ми експортуємо. Кожен маршрут — це об'єкт із такими налаштуваннями:

• path — шлях URL;

• component — компонент, який відображається при переході за цим шляхом.

У нашому випадку існують два маршрути:

Головна сторінка зі списком завдань.

Коли користувач переходить за кореневою адресою (localhost:4200/), Angular відображає компонент TaskListComponent.

Сторінка деталей завдання з інформацією про окреме завдання:

Тут :id — це динамічний параметр. Angular розуміє, що :id може бути будь-яким значенням (наприклад, /task/1, /task/42 тощо). Це значення автоматично передається до TaskDetailsComponent, і ви можете використати його для отримання даних про конкретне завдання.

Отже, коли користувач переходить за адресою localhost:4200/task/1, Angular відображає TaskDetailsComponent з деталями для завдання №1.

Зараз ще нічого не працює, оскільки ми лише визначили маршрути, але повністю не підключили їх до наших компонентів. Зробимо це у наступному розділі!