32. Définir des routes de base

Les routes sont définies dans le tableau Routes à l'aide d'objets qui associent un path (le segment d'URL) à un component.

Structure de configuration de route

Chaque objet route nécessite :

• path : Une chaîne représentant le segment d'URL.
• component : La classe du composant qu'Angular doit afficher lorsque le chemin correspond.

typescript import { HomeComponent } from './home/home.component'; import { AboutComponent } from './about/about.component'; import { NotFoundComponent } from './not-found/not-found.component';

const routes: Routes = [ // 1. Route par défaut (chemin vide) -> '/' { path: '', component: HomeComponent },

// 2. Chemin spécifique -> '/about' { path: 'about', component: AboutComponent },

// 3. Route Joker (doit être la dernière !) -> Capture tout pour le 404 { path: '**', component: NotFoundComponent } ];

Comprendre la route Joker (**)

Le chemin joker (**) correspond à toute URL n'ayant pas été validée par les routes précédentes. Il est crucial de définir cette route en dernier dans le tableau, car le routeur traite les routes de manière séquentielle.

Stratégie de correspondance de chemin (Path Matching)

Par défaut, Angular utilise une stratégie de correspondance 'prefix', ce qui signifie qu'il cherche le chemin au début de l'URL. Cependant, pour la plupart des routes, nous voulons une correspondance exacte, en particulier pour le chemin racine.

Nous définissons explicitement la stratégie pour la route racine avec pathMatch: 'full' :

typescript const routes: Routes = [ { path: '', component: HomeComponent, pathMatch: 'full' }, // Nécessite une correspondance exacte sur '/' // ... autres routes ];