Chapitre-3-Routage.pdf

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

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

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

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

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

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

<h1> Ceci est le contenu de appComponent</h1>
<router-outlet></router-outlet>

Exemple (6)
Chemins inexistants
10
URL inexistante (erronée) ➔ redirection vers la page initiale

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
{path :'chemin2', component : Comp2Component},
{path : '**', component : PageNotFoundComponent}
];

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
{path :'chemin2', component : Comp2Component},
{path :'', redirectTo : 'chemin1', pathMatch:'full'},
{path : '**', component : PageNotFoundComponent}
];

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

<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>

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 { }

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

Nested routing - définition de route imbriquée
16
{
path: 'site',
component: ClientComponent,
children: [
{
path: 'home',
component: HomeComponent,
},
{
path: 'about',
component: AboutComponent,
},
],
},
];

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>
 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>

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

Chapitre-3-Routage.pdf

Contenu connexe

En vedette

Chapitre-3-Routage.pdf