Routing et Navigation
SECTION 6: UN 1 ER EXEMPLE
Routage (Routing)
Un 1er exemple
Afin de permettre aux utilisateurs de garder leurs habitudes de navigation en
visitant une Single Page Application, il est nécessaire d'utiliser un système de
Routage.
Grâce à ce système, les utilisateurs peuvent :
utiliser l'historique de leur navigateur (par exemple les boutons back et
next),
partager des liens,
ajouter une vue à leurs favoris,
ouvrir une vue dans une nouvelle fenêtre via le menu contextuel,
...
Angular Routing (1/2)
Un 1er exemple
Principe
Angular fournit nativement un module de Routage"
Le routeur d’Angular permet la navigation d'une vue à l'autre lorsque les utilisateurs
exécutent des tâches d'application.
C’est un service facultatif qui présente une vue de composant pour une URL donnée
Il ne fait pas partie du noyau. Besoin de la bibliothèque, @angular/router.
Angular Routing (2/2)
Un 1er exemple
Et si on n’a pas accepté qu’il soit généré à la création du projet ?
• Pour créer un module de routage
$ ng generate module app-routing --flat --module=app
• --flat : pour placer le fichier dans src/app et éviter de créer un
répertoire propre à ce module.
• --module=app : pour enregistrer ce module dans le tableau imports
de AppModule.
Schéma de routage de notre application
Un 1er exemple
Un schéma pour récapituler ce que nous allons faire.
Etant donnée cette configuration, quand
l’utilisateur tape : http://localhost:4200/about :
◦ le routeur cherche et charge le composant
AboutComponent et l’affiche dans un élément
<router-outlet> … </router-outlet> .
◦ Cet élément est sensé se trouver dans la vue
du AppComponent.
Mise en place du Routing : 1/ Tag Base
Un 1er exemple
Avant toute chose, il est nécessaire d'ajoute le tag base au head du fichier
index.html de l'application :
Ce tag indique la base du path à partir de laquelle le Routage Angular rentre
en jeu.
M.A.DAHDEH (
[email protected]) 219
Mise en place du Routing : 2/ Configuration
Un 1er exemple
2.1 Configuration du Routage
La configuration du routage est déléguée au module RouterModule (app-
routing.module.ts) lors de son importation par le AppModule
RouterModule.forRoot() : crée un module qui contient toutes les directives,
les routes données et le service de routeur lui-même.
M.A.DAHDEH (
[email protected]) 220
Mise en place du Routing : 2/ Configuration
Un 1er exemple
2.2 Configuration d'une "Route" avec Paramètres
La configuration des routes est une liste d'objets avec les propriétés suivantes :
- Component : Le composant à charger (Obligatoire)
- path : URL (Obligatoire)
- redirectTo : Redirection vers une autre route.
- Nous découvrirons les autres propriétés plus tard
pathMatch:'full' : Indique que
lorsque l'application est lancée sur
localhost:4200(ou sur un serveur), la
page par défaut sera l'écran de about,
car l'url sera https://localhost:4200/
Mise en place du Routing : 2/ Configuration
Un 1er exemple
2.3 Création de liens
Indique où afficher les L'élément routerLink permettra de créer le
pages (vues des lien vers les pages souhaitées (les vue des
composants) composants) .
Mise en place du Routing : Navigation
Un 1er exemple
Il est également possible de naviguer entre les différentes routes en utilisant
la méthode navigate() du service Router.
Le service Router doit être injecté dans la classe composant.
Notre exemple : Plus de composants (1/2)
Un 1er exemple
Nous allons créer 3 autres composants qui seront utilisés dans le routing :
• Home, Signin et NotFound
Page par défaut ( http://localhost:4200 )
En cas d’erreur d’url : rediriger l’utilisateur vers une page d’erreur
Notre exemple : Plus de composants (2/2)
Un 1er exemple
Routing : paramètre de requête
Un 1er exemple
Deux formes de paramètres de requête
• /chemin/param1/param2 (map Request)
• /chemin?var1=value1&var2=value2 (query request)
Pour ces deux formes de paramètres
• Deux manières différentes de définir les routes
• Deux objets différents permettant de récupérer les valeurs respectives
◦ paramMap pour /chemin/param1/param2
◦ queryParamMap pour /chemin?var1=value1&var2=value2
Routing : paramètre de requête
Un 1er exemple
Définissons une route de la forme /chemin/param1/param2 dans app-routing.module.ts
Pour récupérer les paramètres d’une route de la forme contacts/:param1/:param2, il faut :
• aller dans le composant concerné (ici, contacts.component.ts)
• Injecter par constructeur la classe ActivatedRoute
• utiliser un objet de cette classe dans la méthode ngOnInit()
◦ soit par l’intermédiaire d’un objet paramMap pour récupérer les paramètres (solution avec les observables
(asynchrone))
◦ soit par l’intermédiaire d’un objet params pour récupérer les paramètres (solution avec les snapshot
(instantanée))
Routing : paramètre de requête
Un 1er exemple
par l’intermédiaire d’un objet paramMap pour récupérer les paramètres (solution
avec les observables (asynchrone))
Routing : paramètre de requête
Un 1er exemple
par l’intermédiaire d’un objet params pour récupérer les paramètres (solution avec
les snapshot (instantanée))
Routing : paramètre de requête
Un 1er exemple
Pour récupérer les paramètre d’une route de la forme
contacts?param1=value1¶m2=value2,
il faut :
• aller dans le composant concerné (ici, contacts.component.ts)
• Injecter par constructeur la classe ActivatedRoute
• utiliser un objet cette classe dans la méthode ngOnInit()
◦ soit par l’intermédiaire d’un objet queryParamMap pour récupérer les paramètres (solution avec les observables)
◦ soit par l’intermédiaire d’un objet queryParams pour récupérer les paramètres (solution avec les snapshot)
Routing : paramètre de requête
Un 1er exemple
soit par l’intermédiaire d’un objet queryParamMap pour récupérer les paramètres
(solution avec les observables)
Routing : paramètre de requête
Un 1er exemple
soit par l’intermédiaire d’un objet queryParams pour récupérer les paramètres (solution
avec les snapshot)
Routing : Création de lien avec paramètre
Un 1er exemple
Dans le TypeScript
this.lienContact = "/contact/" + this.param1 + "/" + this.param2;
Avec l’interpolation
• <a routerLink='{{ lienContact }}'> Contact </a>
Proprety Binding
• <a [routerLink]='lienContact'> Contact </a >
Ou
• <a [routerLink]="[’/contact’,param1,param2]"> Contact </a>
Pour construire des chemins de la forme
• /chemin?param1=value1¶m2=value2
<a [routerLink]="[’/adresse’]" [queryParams]="{param1:’wick ’,param2:’john’}">
Exercice : Contacts & ContactDetail Component
Un 1er exemple
#04 #05 #06
Entant que utilisateur je veux Entant que utilisateur je veux Entant que utilisateur je veux
afficher la liste des contacts afficher les détails d’un contact supprimer un contact
#04 #05 #06
Solution Entant que utilisateur je veux
afficher la liste des contacts
Entant que utilisateur je veux
afficher les détails d’un contact
Entant que utilisateur je veux
supprimer un contact
Un 1er exemple
Créer deux fichiers contact.ts
1 et contcats.ts sous le dossier /shared
$ ng generate s service/contact
2
#04
#05
#06
#04 #05 #06
Solution Entant que utilisateur je veux
afficher la liste des contacts
Entant que utilisateur je veux
afficher les détails d’un contact
Entant que utilisateur je veux
supprimer un contact
Un 1er exemple
3 Mettez à jour ContactsComponent
#05
#04
#06
#04 #05 #06
Solution Entant que utilisateur je veux
afficher la liste des contacts
Entant que utilisateur je veux
afficher les détails d’un contact
Entant que utilisateur je veux
supprimer un contact
Un 1er exemple
4 Créez ContactDetailComponent $ ng g c contactDetail
#05
#04 #05 #06
Solution Entant que utilisateur je veux
afficher la liste des contacts
Entant que utilisateur je veux
afficher les détails d’un contact
Entant que utilisateur je veux
supprimer un contact
Un 1er exemple
5 Mettez à jour app-routing.module.ts
Résultat : Contacts & ContactDetail Component
Un 1er exemple
#04 #05 #06
Entant que utilisateur je veux Entant que utilisateur je veux Entant que utilisateur je veux
afficher la liste des contacts afficher les détails d’un contact supprimer un contact
