31. Configuration du Router Angular

Le routage est essentiel pour les SPAs, permettant la navigation entre différentes vues sans rechargement complet de la page. Le routeur d'Angular fait correspondre les URLs du navigateur aux états de l'application et affiche les composants associés.

Configuration du routeur (Si non effectuée lors du ng new)

Lors du ng new, le CLI crée app-routing.module.ts et importe RouterModule.forRoot() dans l' AppModule.

app-routing.module.ts :

typescript import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router';

// 1. Définir le tableau des Routes const routes: Routes = [ // Les configurations de routes iront ici ];

@NgModule({ imports: [RouterModule.forRoot(routes)], // Configuration du routeur au niveau racine exports: [RouterModule] }) export class AppRoutingModule { }

L'URL de base et le Router Outlet

Angular a besoin d'un point de repère dans le fichier index.html principal pour déterminer le chemin de base. Ceci est généralement configuré par le système de build, mais visible sous cette forme :

html

La balise <router-outlet>

C'est l'élément le plus critique. Il indique à Angular où afficher le composant associé à la route URL actuelle. On le place généralement dans app.component.html.

html