1. Chapitre 3
Routage
Angular Routing
Ahlem ELHAJ
Multimédia et Développement Web – 2ème année – Semestre 1
ISET de Sousse
Développement Framework Coté Client - Angular
2. Introduction
Application Web Monopage (Single Web Application)
◼ Accessible via une page web unique,
◼ Pas de chargement de nouvelle page lors de la navigation,
◼ Contenu affiché dynamiquement en fonction des actions de
l’utilisateur,
◼ Permet de fluidifier l’expérience de l’utilisateur.
Une SPA requiert un système de routage (routing),
Rôle du routing : permettre aux utilisateurs de garder
leurs habitudes de navigation :
◼ utiliser l'historique de leur navigateur (e.g. boutons back et next),
◼ copier les liens,
◼ ajouter une vue à leurs favoris,
◼ ouvrir une vue dans une nouvelle fenêtre via le menu contextuel
2
3. Fonctionnement du routeur
Pour gérer la navigation entre les vues, Angular utilise un
Routeur.
Pour assurer la navigation, le routeur interprète une
adresse URL comme étant un ordre de changement de
vue.
Pour charger une vue donnée, il faut charger le
composant responsable de l’affichage de cette vue dans la
page unique de l’application (index.html).
◼ La vue associée au composant racine est toujours chargée (pour
toutes les URL).
◼ Les autres vues de l’application sont chargées sur demande.
Pour inclure un lien, le développeur doit faire appel au
routeur (routerLink) à la place de <a href="adresse">
3
4. Module principal de routage
AppRoutingModule
Il est vivement recommandé d’utiliser des modules
(NgModule) dédiés au routage au lieu de définir les routes
dans les modules de fonctionnalités,
Pour générer le Module principal de routage
(AppRoutingModule) à la création de l’application :
ng new myApp --routing
Le développeur peut définir des routes dans ce module
Définition d’une route :
◼ {path : 'chemin', component : CompComponent}
◼ C’est une association entre un chemin (chaine de caractères
représentant une portion (segment) d’adresse URL) et un
composant Angular.
4
5. Exemple (1)
Définition des routes : app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Comp1Component } from './comp1/comp1.component';
import { Comp2Component } from './comp2/comp2.component';
const routes: Routes = [
{path : 'chemin1', component : Comp1Component},
{path :'chemin2', component : Comp2Component}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
5
6. Exemple (2)
Chargement des composants : <router-outlet>
<router-outlet> : balise html utilisée pour mettre à jour
la vue de l’application en chargeant le composant associé
à la route sélectionnée :
Le composant AppComponent est toujours chargé dans la
page de l’application : le sélecteur <app-root> de
AppComponent figure dans le <body> de index.html
<router-outlet> est placée dans l’endroit dans lequel le
routeur doit charger le reste des composants selon les
URLs visitées.
6
<!-- fichier : app.component.html -->
<h1> Ceci est le contenu de appComponent</h1>
<router-outlet></router-outlet>
11. Exemple (7)
Chemins inexistants (2)
Dans le fichier : app-routing.module.ts ajouter une route :
'**’ : correspond à la route joker (toute URL correspond à la
route joker).
Si une URL ne correspond à aucune des routes précédentes
(chemin1 et chemin2), alors le composant
PageNoteFoundComponent est chargé.
Problème : la page initiale correspond à la route joker :
PageNotFoundComponent se charge initialement ! 11
const routes: Routes = [
{path : 'chemin1', component : Comp1Component},
{path :'chemin2', component : Comp2Component},
{path : '**', component : PageNotFoundComponent}
];
12. Exemple (8)
Redirection page d’accueil
Dans le fichier : app-routing.module.ts ajouter une route :
Page d’accueil redirigée vers chemin1,
Les vues accessibles à travers chemin1 et chemin2 restent
inchangées,
Les autres chemins (chemins erronés) permettent de charger
PageNotFoundComponent,
Attention ! Très important : il faut que la route joker (**) soit
la dernière (toute route placée après la route joker n’est pas
accessible). 12
const routes: Routes = [
{path : 'chemin1', component : Comp1Component},
{path :'chemin2', component : Comp2Component},
{path :'', redirectTo : 'chemin1', pathMatch:'full'},
{path : '**', component : PageNotFoundComponent}
];
13. Exemple (9)
Liens
routerLink : attribut html utilisé pour créer des liens dans
les templates des composants vers des chemins définis par le
routage (remplace href)
13
<!-- fichier : app.component.html -->
<h1> Ceci est le contenu de appComponent</h1>
<nav>
<ul>
<li><a routerLink="chemin1">Lien vers cmp1</a></li>
<li><a routerLink="chemin2">Lien vers cmp2</a></li>
</ul>
</nav>
<router-outlet></router-outlet>
14. Routage modulaire
Il est conseillé de ne pas mettre toutes les routes dans le
module de routage principal, mais dans les modules de
routage additionnels associés aux modules de fonctionnalités.
Pour créer un module ‘mod1’ (Mod1Module) et un module de
routage qui lui est associé (Mod1RoutingModule) :
ng generate module mod1 --routing
14
//fichier : mod1-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = []; //Tableau à remplir par des routes
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class Mod1RoutingModule { }
15. Routage imbriqué (1)
Nested routing - présentation
Objectif : rendre les routes qui chargent certains composants
relatives à un composant autre que le composant racine
AppComponent,
Notion de route fille (child route),
Exemple. On se propose d’établir la hiérarchie des URLs
suivante: / (AppComponent)
site (ClientComponent)
home about
(HomeComponent) (AboutComponent)
Remarque. Sur le serveur de développement, ceci correspond aux adresses :
http://localhost:4200/
http://localhost:4200/site
http://localhost:4200/site/home
http://localhost:4200/site/home
15
17. Routage imbriqué (3)
Nested routing - template du parent
17
<h2>Composant client</h2>
<nav><ul>
<li><a routerLink="home">HOME</a></li>
<li><a routerLink="about">ABOUT</a></li>
</ul></nav>
<router-outlet></router-outlet>
Il faut utiliser la balise <router-outlet>:
◼ dans le template de AppComponent,
◼ mais aussi dans le template du composant ayant des composants
« fils » (relation père-fils établie à travers le routage).
Template client.component.html :
Par exemple, l’URL /site/about correspond au chargement
de AppComponent, ClientComponent et AboutComponent.
Dans home.component.ts, lien vers /site/about :
<a routerLink="../about">ABOUT</a>
18. Conclusion
Une application angular a un seul fichier index.html dans
lequel l'application entière est chargée.
Le point d'entrée de l'application est le composant
AppComponent.
Le template de AppComponent est utilisé pour afficher les
parties fixes de l'application (par exemple une barre d'en-
tête).
La balise <router-outlet> d’angular est utilisée pour
afficher les vues associées à l’URL actuelle.
Il est possible de définir des routes imbriquées
(hiérarchiques) grâce au nested routing.
18
