Наразі наш трекер завдань є простою односторінковою програмою (SPA). Вона завжди завантажується з однієї й тієї ж адреси у браузері (localhost:4200) і відображає однаковий вміст незалежно від обставин.

Але ми хочемо зробити крок далі — дозволити користувачам переходити до різних розділів застосунку за допомогою URL-адрес, таких як /task/1, /settings або /analytics. Під час переходу між цими адресами сторінка не повинна перезавантажуватися — замість цього лише вміст має динамічно оновлюватися у тому ж вікні браузера.

Такий підхід і визначає SPA (односторінковий застосунок) — вся програма завантажується один раз, а вся подальша навігація відбувається шляхом динамічної заміни вмісту.

Це швидко та зручно для користувача, але потребує спеціальної системи, яка розуміє, як обробляти різні URL-адреси. Саме для цього і потрібна маршрутизація.

Що таке маршрутизація?

У нашому трекері завдань можуть бути різні розділи, наприклад, список завдань і сторінка деталей завдання. Наприклад:

• Коли користувач переходить на /tasks, ми хочемо показати компонент зі списком завдань;

• Коли він переходить на /tasks/42, ми хочемо показати деталі завдання з ID 42.

Angular зчитує поточну URL-адресу та визначає, який компонент відобразити — все це без перезавантаження сторінки. За лаштунками це все ще той самий HTML-файл, але вміст змінюється динамічно. Для користувача це виглядає як навігація звичайним вебсайтом, але все відбувається всередині SPA.

Простіше кажучи, маршрутизація дозволяє нам вказати застосунку:

"Якщо користувач переходить на /tasks, показати TaskListComponent. Якщо переходить на /tasks/42, показати TaskDetailsComponent."

Як працює маршрутизація в Angular

Angular надає вбудований інструмент під назвою RouterModule, який спрощує керування навігацією між представленнями.

Для нашого трекера завдань маршрутизація надає багато можливостей:

• Визначення маршрутів — наприклад, зв’язати шлях /tasks з компонентом, який відображає всі завдання;

• Навігація без перезавантаження — перехід до /tasks/15 і миттєвий перегляд деталей завдання 15;

• Відображення різних компонентів залежно від URL — наприклад, список завдань, форма створення нового завдання або налаштування;

• Використання параметрів маршруту — таких як ідентифікатори завдань або фільтри (/tasks?status=done);

• Створення вкладених маршрутів — наприклад, налаштування користувача всередині розділу профілю (/profile/settings);

• Захист маршрутів — наприклад, вимога авторизації для доступу до /settings.

На практиці потрібно лише визначити набір правил: який шлях завантажує який компонент. Angular виконує все інше, автоматично обробляючи навігацію та рендеринг.

З точки зору користувача все працює як на звичайному сайті — можна натискати посилання, використовувати кнопки "назад" і "вперед" у браузері, а також ділитися прямими посиланнями на конкретні сторінки застосунку.