CHAPITRE 11 : LE ROUTAGE : NAVIGUER ENTRE LES PAGES

Une application monopage n'a qu'une seule page HTML. Comment, alors, donner l'impression de naviguer entre plusieurs écrans ? C'est le rôle du routeur.

1. Le principe

Le routeur associe une URL à un composant. Quand l'adresse change, il remplace le contenu d'une zone précise de la page : sans jamais recharger le tout.

2. Définir les routes

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

const routes: Routes = [
  { path: '',          component: AccueilComponent },
  { path: 'etudiants', component: ListeEtudiantsComponent },
  { path: 'cours',     component: ListeCoursComponent },
  { path: 'contact',   component: ContactComponent },
  { path: '**',        component: PageIntrouvableComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Deux chemins particuliers : '' correspond à la racine, et '**' attrape tout le reste, c'est votre page 404.

L'ordre compte : Angular retient la première route qui correspond. '**' doit donc toujours être en dernier, faute de quoi il interceptera tout.

3. Afficher le composant actif

Placez cette balise là où le contenu doit apparaître :

<app-entete></app-entete>

<router-outlet></router-outlet>

<app-pied-page></app-pied-page>

L'en-tête et le pied de page restent en place ; seule la zone centrale change.

4. Créer les liens

<nav>
  <a routerLink="/"          routerLinkActive="actif"
     [routerLinkActiveOptions]="{ exact: true }">Accueil</a>
  <a routerLink="/etudiants" routerLinkActive="actif">Etudiants</a>
  <a routerLink="/cours"     routerLinkActive="actif">Cours</a>
</nav>

Utilisez routerLink, jamais href : un href rechargerait toute l'application et ferait perdre son intérêt à la SPA.

routerLinkActive ajoute une classe au lien de la page courante : idéal pour le menu.

5. Passer un paramètre

{ path: 'etudiant/:id', component: DetailEtudiantComponent }

<a [routerLink]="['/etudiant', etudiant.id]">Voir la fiche</a>

Puis dans le composant de destination :

import { ActivatedRoute } from '@angular/router';

export class DetailEtudiantComponent implements OnInit {
  etudiant?: Etudiant;

  constructor(
    private route: ActivatedRoute,
    private service: EtudiantService
  ) { }

  ngOnInit(): void {
    const id = Number(this.route.snapshot.paramMap.get('id'));
    this.etudiant = this.service.obtenirParId(id);
  }
}

6. Naviguer depuis le code

import { Router } from '@angular/router';

constructor(private router: Router) { }

enregistrer() {
  // ... traitement ...
  this.router.navigate(['/etudiants']);
}

7. Une redirection

{ path: '', redirectTo: '/accueil', pathMatch: 'full' },
{ path: 'accueil', component: AccueilComponent }

pathMatch: 'full' est obligatoire ici : sans lui, la route vide correspondrait à toutes les adresses.

À retenir

• Une route associe une URL à un composant
• <router-outlet> marque la zone qui change
• routerLink et non href
• '**' toujours en dernier