angular-routing

Skill do konfiguracji nawigacji w nowoczesnych aplikacjach Angular. Obsługuje lazy loading modułów, funkcyjne strażniki do ochrony tras, resolvery do ładowania danych oraz parametry tras ze wsparciem dla sygnałów. Idealny do budowania systemów nawigacji, tras chronionych autentykacją, zagnieżdżonych struktur routingu i ładowania danych na podstawie trasy.

1. Zdefiniuj tablicę tras w pliku app.routes.ts, importując Routes z @angular/router. Dodaj ścieżki dla komponentów (np. home, about) oraz ścieżkę catch-all dla nieznanych tras.
2. Skonfiguruj aplikację w app.config.ts, dodając provideRouter(routes) do tablicy providers w ApplicationConfig.
3. W głównym komponencie (app.component.ts) zaimportuj RouterOutlet, RouterLink i RouterLinkActive z @angular/router, a następnie umieść je w szablonie — RouterOutlet wyświetla aktualny komponent, RouterLink tworzy linki nawigacyjne.
4. Dla lazy loadingu dodaj w tablicy tras wpisy z loadChildren, wskazując dynamiczny import modułu feature'u — trasa załaduje się tylko gdy użytkownik ją odwiedzi.
5. Aby chronić trasy, dodaj functional guards (np. canActivate) sprawdzające stan autentykacji przed wejściem na trasę.
6. Odczytuj parametry trasy w komponentach za pomocą ActivatedRoute lub sygnałów — parametry dostępne są w queryParams lub params w zależności od konfiguracji trasy.