Angular – це потужний інструмент для розроблення Front End-додатків, що дає змогу створювати складні проєкти, які масштабуються. Однак його багаті можливості іноді вимагають вдумливого підходу. Якщо ти коли-небудь намагався реалізувати багаторівневу навігацію, то знаєш, що це не просто “взяв і зробив”.
У цій статті ми детально розберемо, як крок за кроком налаштувати таку річ як Angular маршрутизація, і додати хлібні крихти (breadcrumbs) для зручності користувачів. А якщо ти хочеш ще більш детально розібратися у Front End-розробці, записуйся на курси програмування FoxmindEd.
Що таке багаторівнева навігація?
Уяви собі застосунок, у якому ти переходиш від головної сторінки до деталей продукту через кілька категорій. Це і є приклад багаторівневої навігації. Вона потрібна для:
- Чіткого структурування маршрутів.
- Зручного інтерфейсу для користувачів.
- Логічного поділу коду, щоб ти не потонув у своєму проєкті за кілька тижнів.
В Angular вся магія крутиться навколо Angular Router. Цей модуль дає змогу задавати маршрути, пов’язувати їх із компонентами та налаштовувати логіку переходів. Давай розберемося, як це працює.
Крок 1: Налаштування маршрутів
Спочатку створимо базову структуру маршрутів. Для цього потрібно у файлі app-routing.module.ts описати основні маршрути:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { CategoryComponent } from './category/category.component';
import { ProductComponent } from './product/product.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{
path: 'category/:id',
component: CategoryComponent,
children: [
{ path: 'product/:productId', component: ProductComponent },
]
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }Що ми тут зробили? Ми налаштували маршрут для категорії з вкладеними маршрутами для продуктів. Це дає змогу відображати компонент ProductComponent всередині CategoryComponent.
курси формату Менторинг саме для вас.
Крок 2: Створення хлібних крихт (breadcrumbs)
Тепер додамо Angular breadcrumbs, щоб користувач міг бачити, де він перебуває. Це особливо актуально для додатків із глибокими рівнями вкладеності. Для цього створимо сервіс:
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, Router } from '@angular/router';
@Injectable({
providedIn: 'root',
})
export class BreadcrumbService {
getBreadcrumbs(route: ActivatedRouteSnapshot, url: string = '', breadcrumbs: Array<any> = []): Array<any> {
const children = route.children;
if (children.length === 0) {
return breadcrumbs;
}
for (const child of children) {
const routeURL = child.url.map(segment => segment.path).join('/');
if (routeURL !== '') {
url += `/${routeURL}`;
}
breadcrumbs.push({
label: child.data['breadcrumb'],
url: url
});
return this.getBreadcrumbs(child, url, breadcrumbs);
}
return breadcrumbs;
}
}Цей сервіс дає змогу генерувати список крихт на основі поточного маршруту. Тепер додамо дані маршруту в app-routing.module.ts:
const routes: Routes = [
{ path: '', component: HomeComponent, data: { breadcrumb: 'Home' } },
{
path: 'category/:id',
component: CategoryComponent,
data: { breadcrumb: 'Category' },
children: [
{
path: 'product/:productId',
component: ProductComponent,
data: { breadcrumb: 'Product' }
},
]
},
];Крок 3: Динамічне оновлення навігації
Щоб хлібні крихти динамічно оновлювалися, впровадь сервіс у головний компонент:
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { BreadcrumbService } from './breadcrumb.service';
@Component({
selector: 'app-root',
template: `
<nav>
<ng-container *ngFor="let breadcrumb of breadcrumbs">
<a [routerLink]="breadcrumb.url">{{ breadcrumb.label }}</a>
<span *ngIf="breadcrumb !== breadcrumbs[breadcrumbs.length - 1]"> / </span>
</ng-container>
</nav>
<router-outlet></router-outlet>
`,
})
export class AppComponent implements OnInit {
breadcrumbs: Array<any> = [];
constructor(private breadcrumbService: BreadcrumbService, private router: Router, private route: ActivatedRoute) {}
ngOnInit() {
this.router.events.subscribe(() => {
this.breadcrumbs = this.breadcrumbService.getBreadcrumbs(this.route.root);
});
}
}Тепер під час навігації користувачеві відображатимуться актуальні хлібні крихти.
Крок 4: Поліпшення UX за допомогою lazy loading
Багаторівнева навігація може бути важкою для продуктивності, особливо якщо ти вантажиш усі модулі одразу. Використовуй ліниве завантаження (lazy loading):
const routes: Routes = [
{ path: '', component: HomeComponent },
{
path: 'category/:id',
loadChildren: () => import('./category/category.module').then(m => m.CategoryModule),
},
];Так Angular буде довантажувати модуль тільки тоді, коли він реально потрібен.
Висновок
Angular navigation може здатися складною на початку, але щойно ти розберешся в її принципах, налаштування маршрутів стане таким самим простим і логічним, як рефакторинг невеликого модуля наприкінці робочого дня. Пам’ятай, що грамотно організована структура маршрутів спрощує життя не тільки користувачам, а й самим розробникам, даючи змогу підтримувати код чистим і масштабованим.
Хочете дізнатися більше про створення багаторівневої навігації в Angular? Задайте своє питання в коментарях нижче! 🤔👇