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

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

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

Це швидко та зручно для користувача, але потребує спеціальної системи, яка розуміє, як обробляти різні 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 виконує все інше, автоматично обробляючи навігацію та рендеринг.

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