Налаштування Маршрутизації в 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.
Зараз ще нічого не працює, оскільки ми лише визначили маршрути, але ще не повністю підключили їх до наших компонентів. Зробимо це у наступному розділі!
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
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.
Зараз ще нічого не працює, оскільки ми лише визначили маршрути, але ще не повністю підключили їх до наших компонентів. Зробимо це у наступному розділі!
Дякуємо за ваш відгук!
