Routage

Routage

Le routage permet de naviguer entre différentes vues (pages) d'une application Angular sans recharger la page dans le navigateur (Single Page Application). 3 leçons, avec cours, exemple et exercice.

Prérequis : avoir lu la page Composants.

C'est quoi, à quoi ça sert, pourquoi ?

• C'est quoi ? Le module @angular/router, qui associe des chemins d'URL (/accueil, /contact...) à des composants à afficher.
• À quoi ça sert ? À afficher dynamiquement un composant différent selon l'URL courante, avec <router-outlet>, et à naviguer entre eux avec routerLink — sans recharger la page dans le navigateur.
• Pourquoi ? Une application avec plusieurs écrans (accueil, détail, contact...) a besoin d'un système de navigation. Sans routeur, il faudrait tout afficher/masquer manuellement avec des @if, ce qui devient vite ingérable et casse le bouton "retour" du navigateur.

Sommaire

1. Activation du routage
2. Définir un itinéraire
3. Lien vers un itinéraire avec RouterLink

---

1. Activation du routage

Cours

Le routeur Angular (@angular/router) doit être fourni à l'application via provideRouter() dans app.config.ts. Le composant racine doit ensuite afficher la vue correspondant à la route active grâce à la directive <router-outlet>, qui agit comme un emplacement réservé où le composant de la route courante sera inséré.

Exemple

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)],
};

// app.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  template: `
    <nav><!-- liens de navigation --></nav>
    <router-outlet></router-outlet>
  `,
})
export class App {}

Exercice

Dans un projet généré avec ng new, vérifie (ou ajoute) que provideRouter(routes) est bien présent dans app.config.ts, et que <router-outlet> est bien présent dans le template du composant racine App.

Solution

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)],
};

// app.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  template: `<router-outlet></router-outlet>`,
})
export class App {}

---

2. Définir un itinéraire

Cours

Les routes sont définies dans un tableau Routes (généralement dans app.routes.ts). Chaque route associe un path (chemin d'URL) à un component (le composant à afficher).

{ path: 'accueil', component: Accueil }

Le path: '' correspond à la route par défaut (racine du site), et path: '**' (route "wildcard") capture toutes les URL non reconnues — utile pour une page 404.

Exemple

// app.routes.ts
import { Routes } from '@angular/router';
import { Accueil } from './accueil/accueil';
import { APropos } from './a-propos/a-propos';
import { PageIntrouvable } from './page-introuvable/page-introuvable';

export const routes: Routes = [
  { path: '', component: Accueil },
  { path: 'a-propos', component: APropos },
  { path: '**', component: PageIntrouvable },
];

Exercice

Ajoute une route contact qui affiche un composant Contact, ainsi qu'une route "wildcard" (**) qui affiche un composant PageIntrouvable.

Solution

import { Routes } from '@angular/router';
import { Accueil } from './accueil/accueil';
import { Contact } from './contact/contact';
import { PageIntrouvable } from './page-introuvable/page-introuvable';

export const routes: Routes = [
  { path: '', component: Accueil },
  { path: 'contact', component: Contact },
  { path: '**', component: PageIntrouvable },
];

---

3. Lien vers un itinéraire avec RouterLink

Cours

La directive routerLink remplace l'attribut href classique pour naviguer entre les routes sans recharger la page. La directive routerLinkActive permet d'appliquer une classe CSS au lien correspondant à la route actuellement active (pratique pour styliser un menu de navigation).

Exemple

import { Component } from '@angular/core';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterLink, RouterLinkActive, RouterOutlet],
  template: `
    <nav>
      <a routerLink="/" routerLinkActive="lien-actif" [routerLinkActiveOptions]="{ exact: true }">
        Accueil
      </a>
      <a routerLink="/a-propos" routerLinkActive="lien-actif">À propos</a>
    </nav>
    <router-outlet></router-outlet>
  `,
})
export class App {}

Exercice

Construis une barre de navigation avec trois liens (Accueil, Contact, À propos) utilisant routerLink, et applique la classe actif au lien de la page courante avec routerLinkActive.

Solution

import { Component } from '@angular/core';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterLink, RouterLinkActive, RouterOutlet],
  template: `
    <nav>
      <a routerLink="/" routerLinkActive="actif" [routerLinkActiveOptions]="{ exact: true }">Accueil</a>
      <a routerLink="/contact" routerLinkActive="actif">Contact</a>
      <a routerLink="/a-propos" routerLinkActive="actif">À propos</a>
    </nav>
    <router-outlet></router-outlet>
  `,
})
export class App {}

---