Angular Routing
Angular Routing est un système puissant qui permet de construire des applications web
monopage (SPA) en Angular, en gérant les transitions et le chargement de différentes vues sans
recharger toute la page. Voici les principaux détails du routage dans Angular :
1. CONFIGURER LE ROUTERMODULE
Pour activer le routage dans une application Angular, il faut importer le RouterModule dans le
module principal (AppModule ou un autre module spécifique) et définir des routes.
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/[Link]';
import { AboutComponent } from './about/[Link]';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];
@NgModule({
imports: [[Link](routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
[Link](routes): Configure le routeur au niveau de l'application.
[Link](routes): Pour des modules avec des routes imbriquées (lazy-
loaded).
2. LES BASES DU ROUTAGE
Path : Indique l’URL dans le navigateur.
Component : Le composant associé à l’URL.
Exemple :
{ path: 'contact', component: ContactComponent }
Redirect : Pour rediriger une URL vers une autre.
{ path: '', redirectTo: '/home', pathMatch: 'full' }
Wildcards : Pour capter les URL non reconnues (404).
{ path: '**', component: PageNotFoundComponent }
3. NAVIGATION ENTRE LES ROUTES
RouterLink : Directive pour créer un lien vers une route.
<a routerLink="/about">About</a>
[Link]() : Pour naviguer de manière programmée.
[Link](['/contact']);
4. PARAMETRES DE ROUTE
Les paramètres permettent de passer des données dans les URLs (par exemple, un identifiant).
{ path: 'user/:id', component: UserComponent }
Pour accéder au paramètre dans le composant :
[Link](params => {
const userId = [Link]('id');
});
5. ROUTES IMBRIQUEES (NESTED ROUTES)
On peut imbriquer des routes en définissant des children pour chaque route.
{
path: 'user',
component: UserComponent,
children: [
{ path: 'profile', component: UserProfileComponent },
{ path: 'settings', component: UserSettingsComponent }
]
}
6. LAZY LOADING (CHARGEMENT A LA DEMANDE)
Permet de charger les modules uniquement lorsque la route correspondante est atteinte.
Utilisez loadChildren pour les modules.
{ path: 'admin', loadChildren: () => import('./admin/[Link]').then(m =>
[Link]) }
7. GUARDS (GARDIENS DE ROUTE)
Les guards sont des services pour contrôler l'accès à certaines routes.
CanActivate : Empêche l'accès à une route si certaines conditions ne sont pas remplies.
CanDeactivate : Bloque la sortie d'une route.
Resolve : Prélève des données avant de naviguer vers la route.
CanLoad : Empêche le chargement des modules lazy-loaded.
Exemple d’utilisation de CanActivate :
{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }
8. GESTION DU SCROLL
Angular permet de configurer le comportement de défilement lors de la navigation entre les
routes.
[Link](routes, { scrollPositionRestoration: 'enabled' });
9. PRE-CHARGEMENT DES MODULES
Angular propose une option de pré-chargement pour charger certains modules en arrière-plan
après le chargement initial.
[Link](routes, { preloadingStrategy: PreloadAllModules });
10. ANIMATIONS DE ROUTAGE
Avec Angular, on peut ajouter des animations lors des transitions de route, en utilisant le module
@angular/animations pour une expérience utilisateur fluide.
11. ROUTER EVENTS
Les événements de routage permettent d'écouter les changements de route et d'exécuter du
code en conséquence.
[Link](event => {
if (event instanceof NavigationStart) {
[Link]('Navigation started!');
}
});