Le Routage dans Angular
Système de Navigation en Angular 20
© 2025 – Mourad Hassini – Formation Angular – Composants 1
Plan
– Routage
– Configuration des routes
– Routes paramétrées
– Le service Router
– Configuration de Child Root
© 2025 – Mourad Hassini – Formation Angular – Composants 2
Routage (Routing)
• Le routage est le fait de naviguer d’une vue à une autre selon la
demande de l’utilisateur.
• Un utilisateur peut:
- Taper l’url d’une vue dans le navigateur
- Cliquer sur un lien
- Cliquer sur un bouton
- Cliquer sur les boutons de retour du navigateur
- etc…
© 2025 – Mourad Hassini – Formation Angular – Composants 3
Routage (@angular/router)
• Angular offre le package @angular/router qui permet de gérer la
navigation (routage / routing).
• Avant la version 17 de Angular, le routing était géré dans un module dédié
au routing : [Link].
• Depuis la version 17, le routage est implicite (plus besoin de créer un
module à cet effet). Il est géré dans 3 fichiers :
- [Link]
- [Link]
- [Link]
© 2025 – Mourad Hassini – Formation Angular – Composants 4
Routage (<base href>)
• Les applications routées mentionnent au routeur comment composer l’url
de navigation.
• Ceci est fait en utilisant la balise <base href> à placer comme premier
nœud de la balise <head> dans le fichier [Link].
• <base href="/"> : cela indique que tous les chemins relatifs doivent être
résolus à partir de la racine du serveur. Exemple :
© 2025 – Mourad Hassini – Formation Angular – Composants 5
Routage (Components)
• Nous allons d'abord créer six composants qui seront utilisés dans le
routage.
• Un composant correspondra à une page web.
• Il s'agit de six pages web classiques que l'on trouve sur n'importe quel site
web.
• Accueil
• Contact
• À propos
• Connexion
• Inscription
• NotFound
© 2025 – Mourad Hassini – Formation Angular – Composants 6
Routage (Components)
© 2025 – Mourad Hassini – Formation Angular – Composants 7
Routage (Components)
• Créons les 6 components (lancer les commandes suivantes à la racine de notre
projet) :
ng g c features/contact
ng g c features/login
ng g c features/signup
ng g c features/home
ng g c features/about
ng g c features/not-found
• Vous pouvez supprimer les fichiers de tests *.[Link] Ou Ajouter l’option --skip-tests
lors de la création des composants. Exemple : ng g c feature/home --skip-tests
© 2025 – Mourad Hassini – Formation Angular – Composants 8
Routage (Components)
• Tous les fichiers liés à un component donné sont créés : Exemple :
[Link] (code CSS pour le design graphique)
[Link] (code HTML)
[Link] (code pour les tests unitaires)
[Link] (code typescript qui implémente la logique e notre component)
© 2025 – Mourad Hassini – Formation Angular – Composants 9
Routage (Fichiers de Routing)
• Nous devons maintenant modifier les fichiers de routing :
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
© 2025 – Mourad Hassini – Formation Angular – Composants 10
Routage (Fichiers de Routing)
• [Link]
import { Routes } from '@angular/router';
import { Home } from './features/home/home';
import { Login } from './features/login/login';
import { Signup } from './features/signup/signup';
import { NotFound } from './features/not-found/not-found';
import { About } from './features/about/about';
import { Contact } from './features/contact/contact';
export const routes: Routes = [
{ path: '', component: Home, }, // => Page d’accueil localhost:4200
{ path: 'login', component: Login },
{ path: 'signup', component: Signup },
{ path: 'about', component: About },
{ path: 'contact', component: Contact },
{ path: '**', component: NotFound } // => N'importe quelle URL autre que les URL ci-dessus.
];
© 2025 – Mourad Hassini – Formation Angular – Composants 11
Routage (Fichiers de Routing)
• [Link]
body {
color : black;
font-weight : 200
}
© 2025 – Mourad Hassini – Formation Angular – Composants 12
Routage (Fichiers de Routing)
• [Link]
<div class="app">
<header>
<h5>{{ title() }}</h5>
<nav>
<h6>3 Links with Routes</h6>
<ul>
<li><a routerLink="/">Home</a></li>
<li><a routerLink="/login">Login</a></li>
<li><a routerLink="/signup">Signup</a></li>
</ul>
<h6>2 Links with Child Routes</h6>
<ul>
<li><a routerLink="/about">About</a></li>
<li><a routerLink="/contact">Contact</a></li>
</ul>
</nav>
</header>
<main><h6>Routes Result : </h6><router-outlet></router-outlet></main>
<footer>
<a href="{{ footerUrl }}">{{ footerLink }}</a>
</footer>
</div>
© 2025 – Mourad Hassini – Formation Angular – Composants 13
Routage (Fichiers de Routing)
• [Link] : <router-outlet></router-outlet> :
• Cette directive permet de désigner l’emplacement de la vue associée à l’url
demandée.
• Par exemple, si on clique sur « About », le contenu de [Link] sera affiché à
l’emplacement : <router-outlet></router-outlet> .
• [Link] : routerLink :
• Pour naviguer d’une vue à une autre on peut utiliser des liens. <a></a>
• La directive routerLink est à utiliser dans la balise <a> et indique le path (défini
dans [Link]) à appeler en cliquant dessus.
© 2025 – Mourad Hassini – Formation Angular – Composants 14
Routage (Fichiers de Routing)
• [Link] : route paramétrée :
• Une route paramétrée est définie comme suit :
{ path: ‘login/:username’, component: Login},
• Le paramètre peut être envoyé dans un lien :
<a routerLink="'/login’, username">Login</a>
• Exemple : localhost:4200/login/mha (Nous verrons cela lors de la consommation
des Web services.
© 2025 – Mourad Hassini – Formation Angular – Composants 15
Routage (Fichiers de Routing)
• [Link]
h1 {
color : blue;
}
.app {
font-family: Arial, Helvetica, sans-serif;
max-width : 500px;
margin: auto;
color: black;
}
© 2025 – Mourad Hassini – Formation Angular – Composants 16
Routage (Fichiers de Routing)
• [Link]
import { Component, signal } from '@angular/core';
import { RouterOutlet, RouterLink } from '@angular/router';
import { Header } from "./core/header/header";
import { CommonModule } from "@angular/common";
import { Chambre } from "./features/chambre/chambre";
@Component({
selector: 'app-root',
imports: [RouterOutlet, Header, CommonModule, Chambre, RouterLink],
templateUrl: './[Link]',
styleUrl: './[Link]'
})
export class App {
protected readonly title = signal('foyer-universitaire-front');
footerUrl = '[Link]
footerLink = 'CNI';
}
© 2025 – Mourad Hassini – Formation Angular – Composants 17
Routage (Test du Routing)
• Démarrer votre application Angular avec la commande ng serve (les routages
fonctionnent) :
© 2025 – Mourad Hassini – Formation Angular – Composants 18