Налаштування Маршрутизації в Angular
Щоб усе працювало, потрібно вказати Angular, яка URL-адреса відображає який компонент. Це називається маршрутизацією.
Основний файл маршрутизації
Під час створення Angular-додатку за допомогою CLI можна увімкнути маршрутизацію одразу — просто дайте відповідь "Yes" на запит щодо маршрутизації. Angular автоматично створить необхідні файли (це вже було зроблено під час створення додатку). Один із цих файлів — app.routes.ts.
Якщо з якоїсь причини цього файлу немає, не хвилюйтеся — ви можете створити його самостійно в кореневій папці проєкту. Він має виглядати так:
routes.ts
Цей файл повідомляє Angular, які маршрути існують у вашому додатку та які компоненти слід відображати для кожного маршруту.
Також переконайтеся, що ваші маршрути підключені у app.config.ts таким чином:
config.ts
Без рядка provideRouter(routes) Angular не знатиме про ваші маршрути, навіть якщо вони визначені у app.routes.ts.
Налаштування маршрутів
Тепер додамо маршрути для нашого додатку Task Tracker. Відкрийте app.routes.ts та напишіть наступний код:
routes.ts
Це просто масив маршрутів, який ми експортуємо. Кожен маршрут — це об'єкт із такими налаштуваннями:
-
path— шлях URL; -
component— компонент, який відображається при переході за цим шляхом.
У нашому випадку існують два маршрути:
Головна сторінка зі списком завдань.
routes.ts
Коли користувач переходить за кореневою адресою (localhost:4200/), Angular відображає компонент TaskListComponent.
Сторінка деталей завдання з інформацією про окреме завдання:
routes.ts
Тут :id — це динамічний параметр. Angular розуміє, що :id може бути будь-яким значенням (наприклад, /task/1, /task/42 тощо). Це значення автоматично передається до TaskDetailsComponent, і ви можете використати його для отримання даних про конкретне завдання.
Отже, коли користувач переходить за адресою localhost:4200/task/1, Angular відображає TaskDetailsComponent з деталями для завдання №1.
Зараз ще нічого не працює, оскільки ми лише визначили маршрути, але повністю не підключили їх до наших компонентів. Зробимо це у наступному розділі!
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Can you explain how to connect the routes to the components?
What should I do if my app.routes.ts file is missing?
How do I use the dynamic :id parameter in TaskDetailsComponent?
Awesome!
Completion rate improved to 3.13Налаштування Маршрутизації в Angular
Свайпніть щоб показати меню
Щоб усе працювало, потрібно вказати Angular, яка URL-адреса відображає який компонент. Це називається маршрутизацією.
Основний файл маршрутизації
Під час створення Angular-додатку за допомогою CLI можна увімкнути маршрутизацію одразу — просто дайте відповідь "Yes" на запит щодо маршрутизації. Angular автоматично створить необхідні файли (це вже було зроблено під час створення додатку). Один із цих файлів — app.routes.ts.
Якщо з якоїсь причини цього файлу немає, не хвилюйтеся — ви можете створити його самостійно в кореневій папці проєкту. Він має виглядати так:
routes.ts
Цей файл повідомляє Angular, які маршрути існують у вашому додатку та які компоненти слід відображати для кожного маршруту.
Також переконайтеся, що ваші маршрути підключені у app.config.ts таким чином:
config.ts
Без рядка provideRouter(routes) Angular не знатиме про ваші маршрути, навіть якщо вони визначені у app.routes.ts.
Налаштування маршрутів
Тепер додамо маршрути для нашого додатку Task Tracker. Відкрийте app.routes.ts та напишіть наступний код:
routes.ts
Це просто масив маршрутів, який ми експортуємо. Кожен маршрут — це об'єкт із такими налаштуваннями:
-
path— шлях URL; -
component— компонент, який відображається при переході за цим шляхом.
У нашому випадку існують два маршрути:
Головна сторінка зі списком завдань.
routes.ts
Коли користувач переходить за кореневою адресою (localhost:4200/), Angular відображає компонент TaskListComponent.
Сторінка деталей завдання з інформацією про окреме завдання:
routes.ts
Тут :id — це динамічний параметр. Angular розуміє, що :id може бути будь-яким значенням (наприклад, /task/1, /task/42 тощо). Це значення автоматично передається до TaskDetailsComponent, і ви можете використати його для отримання даних про конкретне завдання.
Отже, коли користувач переходить за адресою localhost:4200/task/1, Angular відображає TaskDetailsComponent з деталями для завдання №1.
Зараз ще нічого не працює, оскільки ми лише визначили маршрути, але повністю не підключили їх до наших компонентів. Зробимо це у наступному розділі!
Дякуємо за ваш відгук!
