Angular : routage

Achref El Mouelhi

Docteur de l’université d’Aix-Marseille

Chercheur en programmation par contrainte (IA)
Ingénieur en génie logiciel

[email protected]

H & H: Research and Training 1 / 52

 Plan

1 Création de composant

2 Routage

3 Création d’un module de routage

4 Paramètres de requête

5 Création de liens avec paramètres

6 Navigation depuis .component.ts

7 Chemin vide et chemin inexistant

H & H: Research and Training 2 / 52

 Création de composant

Angular

Pour créer un nouveau composant

ng generate component component-name

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 3 / 52

 Création de composant

Angular

Pour créer un nouveau composant

ng generate component component-name

H I ©
UEL
O
LM
Ou utiliser le raccourci
ng g c component-name
r e f E
ch
©A

H & H: Research and Training 3 / 52

 Création de composant

Angular

Pour créer un nouveau composant

ng generate component component-name

H I ©
UEL
O
LM
Ou utiliser le raccourci
ng g c component-name
r e f E
ch
©A
Pour placer un composant dans un répertoire x
ng g c x/component-name

H & H: Research and Training 3 / 52

 Création de composant

Angular

Pour la suite, on va créer 3 composants

H I ©
adresse UEL
O
stagiaire
f E LM
menu ch r e
©A

H & H: Research and Training 4 / 52

 Création de composant

Angular

Commençons par créer le premier composant adresse dans un répertoire composants

ng g c composants/adresse
H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 5 / 52

 Création de composant

Angular

Commençons par créer le premier composant adresse dans un répertoire composants

ng g c composants/adresse
H I ©
UEL
O
f E LM
Résultat
CREATE
ch r e
src/app/composants/adresse/adresse.component.html (22 bytes)
CREATE
CREATE
CREATE
©A
src/app/composants/adresse/adresse.component.spec.ts (635 bytes)
src/app/composants/adresse/adresse.component.ts (273 bytes)
src/app/composants/adresse/adresse.component.css (0 bytes)
UPDATE src/app/app.module.ts (490 bytes)

H & H: Research and Training 5 / 52

 Création de composant

Angular

Ensuite stagiaire

ng g c composants/stagiaire
H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 6 / 52

 Création de composant

Angular

Ensuite stagiaire

ng g c composants/stagiaire
H I ©
UEL
O
f E LM
Résultat
CREATE
ch r e
src/app/composants/stagiaire/stagiaire.component.html (23 bytes)
CREATE
bytes)
bytes)
©A
src/app/composants/stagiaire/stagiaire.component.spec.ts (642
CREATE src/app/composants/stagiaire/stagiaire.component.ts (277
CREATE src/app/composants/stagiaire/stagiaire.component.css (0
bytes) UPDATE src/app/app.module.ts (591 bytes)

H & H: Research and Training 6 / 52

 Création de composant

Angular

Et enfin menu

ng g c composants/menu
H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 7 / 52

 Création de composant

Angular

Et enfin menu

ng g c composants/menu
H I ©
UEL
O
f E LM
Résultat

ch r e
CREATE src/app/composants/menu/menu.component.html (19 bytes) CREATE

©A
src/app/composants/menu/menu.component.spec.ts (614 bytes) CREATE
src/app/composants/menu/menu.component.ts (267 bytes) CREATE
src/app/composants/menu/menu.component.css (0 bytes) UPDATE
src/app/app.module.ts (1044 bytes)

H & H: Research and Training 7 / 52

 Création de composant

Angular

Constats

I
Quatre fichiers créés pour chaque composant
H ©
U
x.component.ts avec x = stagiaire,
L ou menu
Eadresse
x.component.html
x.component.css EL
MO
h r e
x.component.spec.ts f
c
© A effectuées dans la section declarations de
Trois déclarations
app.module.ts

H & H: Research and Training 8 / 52

 Création de composant

Angular
Nouveau contenu de app.module.ts
@NgModule({
declarations: [
AppComponent,
ObservableComponent,
H I ©
EL
AdresseComponent,
StagiaireComponent,
O U
LM
MenuComponent
],
r e f E
ch
imports: [

©A
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

H & H: Research and Training 9 / 52

 Création de composant

Angular
Pour afficher le contenu de ces trois composants dans
app.component.html
<app-stagiaire></app-stagiaire>
<app-adresse></app-adresse>
<app-menu></app-menu>
H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 10 / 52

 Création de composant

Angular
Pour afficher le contenu de ces trois composants dans
app.component.html
<app-stagiaire></app-stagiaire>
<app-adresse></app-adresse>
<app-menu></app-menu>
H I ©
UEL
O
Remarques
f E LM
r e
céfhère ne pas afficher tous les composants dans le
composant© A
En général, on pr
principal

On associe plutôt un chemin à chaque composant

Le composant sera affiché dans le composant principal si son chemin

apparaı̂t dans l’URL de la requête HTTP

H & H: Research and Training 10 / 52

 Routage

Module de routage

À la création du projet, on a demandé la génération d’un fichier de routage :

app-routing.module.ts

Ce fichier permet d’assurer le mapping chemin/composant

Il contient un tableau vide de type Routes

H I ©
Chaque route peut avoir comme attributs (path, component, redirectTo, children...)

U EL
O
Contenu de app-routing.module.ts
f E LM
ch r e
import { NgModule } from ’@angular/core’;

©A
import { Routes, RouterModule } from ’@angular/router’;

const routes: Routes = [];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

H & H: Research and Training 11 / 52

 Routage

Angular

H I ©
RouterModule a deux méthode statiques qui prennent en paramètre
un tableau de Routes
UEL
O
LM
.forRoot(tableau) : pour le module principal (racine)

r e f E
.forChild(tableau) : pour les sous-modules inclus dans le
ch
©A
module principal

H & H: Research and Training 12 / 52

 Routage

Définissons des routes dans ce tableau de routes de app-routing.module.ts

import { NgModule } from ’@angular/core’;

import { Routes, RouterModule } from ’@angular/router’;
import { StagiaireComponent } from ’./composants/stagiaire/stagiaire.
component’;
import { AdresseComponent } from ’./composants/adresse/adresse.
component’;

H I ©
EL
const routes: Routes = [

O U
{ path: ’stagiaire’, component: StagiaireComponent },
{ path: ’adresse’, component: AdresseComponent },
];

f E LM
@NgModule({
ch r e
©A
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

H & H: Research and Training 13 / 52

 Routage

Définissons des routes dans ce tableau de routes de app-routing.module.ts

import { NgModule } from ’@angular/core’;

import { Routes, RouterModule } from ’@angular/router’;
import { StagiaireComponent } from ’./composants/stagiaire/stagiaire.
component’;
import { AdresseComponent } from ’./composants/adresse/adresse.
component’;

H I ©
EL
const routes: Routes = [
{ path: ’stagiaire’, component: StagiaireComponent },
O
{ path: ’adresse’, component: AdresseComponent }, U
];

f E LM
@NgModule({
ch r e
©A
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

Pas de route pour le composant menu car on veut l’afficher quelle que soit le chemin demandé.

H & H: Research and Training 13 / 52

 Routage

Angular

Remarques
L’URL saisies auront la forme suivante
H I ©
U EL
localhost:4200/adresse ou localhost:4200/stagiaire
O
f E LM
r e
Faut-il ajouter / comme préfix aux valeurs de l’attribut path ?
ch
©A
Non, car / a été défini dans index.html dans la balise <base
href="/">

H & H: Research and Training 14 / 52

 Routage

Angular
{ enableTracing: true } permet de garder une trace de la recherche d’un chemin (pour
le débogage).

import { NgModule } from ’@angular/core’;

import { Routes, RouterModule } from ’@angular/router’;

component’;
H I ©
import { StagiaireComponent } from ’./composants/stagiaire/stagiaire.

EL
import { AdresseComponent } from ’./composants/adresse/adresse.
U
component’;
O
const routes: Routes = [
f E LM
r e
{ path: ’stagiaire’, component: StagiaireComponent },

ch
{ path: ’adresse’, component: AdresseComponent },
];

@NgModule({
©A
imports: [RouterModule.forRoot(routes, { enableTracing: true })],
exports: [RouterModule]
})
export class AppRoutingModule { }

H & H: Research and Training 15 / 52

 Routage

Angular

Comment faire pour tester ?

Il faut saisir
localhost:4200/adresse ou
H I ©
localhost:4200/stagiaire
UEL
L MO
dans la barre d’adresse du navigateur
r e f E
A ch
©

H & H: Research and Training 16 / 52

 Routage

Angular

Comment faire pour tester ?

Il faut saisir
localhost:4200/adresse ou
H I ©
localhost:4200/stagiaire
U EL
L MO
dans la barre d’adresse du navigateur
r e f E
A ch
©
Où le composant sera affiché dans app.component.html ?

Il faut lui indiquer l’emplacement mais pas en ajoutant le sélecteur du

composant

H & H: Research and Training 16 / 52

 Routage

Angular
Il faut indiquer l’emplacement du composant à charger dans
app.component.html en ajoutant la balise suivante
app-component

app-header

H I ©
UEL
O
f E LM
ch r e
©A
<router-outlet></router-outlet>

app-footer

H & H: Research and Training 17 / 52

 Routage

Angular

Remarques
H I ©
EL
Pour accéder à un composant, l’utilisateur doit connaı̂tre son
U
O
chemin défini dans le tableau de routes (or ceci n’est pas vraiment
très pratique)
f E LM
ch r e
On peut plutôt définir un menu contenant des liens vers nos
©A
différents composants

H & H: Research and Training 18 / 52

 Routage

Commençons par définir le menu suivant dans menu.component.html

<ul>
<li><a href=’’> Accueil </a></li>
<li><a href=’stagiaire’> Stagiaire </a></li>
<li><a href=’adresse’> Adresse </a></li>
</ul>

H I ©
U EL
O
f E LM
ch r e
©A

H & H: Research and Training 19 / 52

 Routage

Commençons par définir le menu suivant dans menu.component.html

<ul>
<li><a href=’’> Accueil </a></li>
<li><a href=’stagiaire’> Stagiaire </a></li>
<li><a href=’adresse’> Adresse </a></li>
</ul>

H I ©
U EL
Dans app.component.html, on ajoute le menu et on indique l’emplacement des
composants à afficher
O
<app-menu></app-menu>
f E LM
<router-outlet></router-outlet>
ch r e
©A

H & H: Research and Training 19 / 52

 Routage

Commençons par définir le menu suivant dans menu.component.html

<ul>
<li><a href=’’> Accueil </a></li>
<li><a href=’stagiaire’> Stagiaire </a></li>
<li><a href=’adresse’> Adresse </a></li>
</ul>

H I ©
U EL
Dans app.component.html, on ajoute le menu et on indique l’emplacement des
composants à afficher
O
<app-menu></app-menu>
f E LM
<router-outlet></router-outlet>
ch r e
©A
Remarque

Chaque fois qu’on clique sur un lien la page est rechargée : ce n’est pas le but d’une application
mono-page

H & H: Research and Training 19 / 52

 Routage

Angular

Solution : remplacer l’attribut href par routerLink

H I ©
<ul>
UEL
<li><a routerLink=’’> Accueil </a></li>
O
f E LM
<li><a routerLink=’stagiaire’> Stagiaire </a></li>
r e
<li><a routerLink=’adresse’> Adresse </a></li>
ch
©A
</ul>

H & H: Research and Training 20 / 52

 Routage

Angular
Pour afficher la route active en gras

<ul>
<li><a routerLink=’’> Accueil </a></li>
<li routerLinkActive=active>
<a routerLink=’stagiaire’> Stagiaire </a>
H I ©
EL
</li>
<li routerLinkActive=active>
O U
LM
<a routerLink=’adresse’> Adresse </a>
</li>
</ul>
r e f E
ch
©A
Dans menu.component.css, il faut définir la classe active

.active {
font-weight: bold;
}

H & H: Research and Training 21 / 52

 Routage

Angular

Si on ajoute routerLinkActive=active, il sera en gras quelle que soit la page

visitée, pour cela on ajoute [routerLinkActiveOptions]="{ exact: true
}" pour que la classe soit uniquement ajoutée lorsque la route correspond
exactement à la valeur de routerLink

<ul>
H I ©
<li>
U EL
O
<a routerLink=’’ routerLinkActive=active [

</li>
f E LM
routerLinkActiveOptions]="{ exact: true }"> Accueil </a>

<li routerLinkActive=active>
ch r e
©A
<a routerLink=’stagiaire’> Stagiaire </a>
</li>
<li routerLinkActive=active>
<a routerLink=’adresse’> Adresse </a>
</li>
</ul>

H & H: Research and Training 22 / 52

 Création d’un module de routage

Angular
Pour créer un module de routage (Si on n’a pas accepté qu’il soit
généré à la création du projet)
ng generate module app-routing --flat --module=app

H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 23 / 52

 Création d’un module de routage

Angular
Pour créer un module de routage (Si on n’a pas accepté qu’il soit
généré à la création du projet)
ng generate module app-routing --flat --module=app

H I ©
UEL
Comprenons la commande O
f E LM
ch r e
ng generate module app-routing : pour générer un
module de routage appelé app-routing.
©A
--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.

H & H: Research and Training 23 / 52

 Création d’un module de routage

Angular
La section imports du fichier app.module.ts
imports: [
BrowserModule,
RouterModule.forRoot([
{ path: ’stagiaire’, component: StagiaireComponent },
{ path: ’adresse’, component: AdresseComponent },
]),
H I ©
],
AppRoutingModule
UEL
O
f E LM
Le fichier app-routing.module.ts

ch r e
©A
import { NgModule } from ’@angular/core’;
import { CommonModule } from ’@angular/common’;

@NgModule({
imports: [
CommonModule
],
declarations: []
})
export class AppRoutingModule { }
H & H: Research and Training 24 / 52
 Création d’un module de routage

Angular
La section imports du fichier app.module.ts
imports: [
BrowserModule,
AppRoutingModule
],

H I ©
Modifions le contenu du fichier app-routing.module.ts
UEL
O
LM
import { NgModule } from ’@angular/core’;
import { RouterModule, Routes } from ’@angular/router’;
// + les autres imports de components
r e f E
ch
©A
const routes: Routes = [
{ path: ’stagiaire’, component: StagiaireComponent },
{ path: ’adresse’, component: AdresseComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

H & H: Research and Training 25 / 52

 Création d’un module de routage

Angular

Pour activer le traçage

import { NgModule } from ’@angular/core’;

import { RouterModule, Routes } from ’@angular/router’;
// + les autres imports de components
H I ©
const routes: Routes = [
UEL
O
LM
{ path: ’stagiaire’, component: StagiaireComponent },

];
r e E
{ path: ’adresse’, component: AdresseComponent }
f
@NgModule({
ch
©A
imports: [RouterModule.forRoot(routes, { enableTracing: true
})],
exports: [RouterModule]
})
export class AppRoutingModule { }

H & H: Research and Training 26 / 52

 Paramètres de requête

Angular

Deux formes de paramètres de requête

/chemin/param1/param2
/chemin?var1=value1&var2=value2
H I ©
UEL
O
f E LM
ch r e
©A

H & H: Research and Training 27 / 52

 Paramètres de requête

Angular

Deux formes de paramètres de requête

/chemin/param1/param2
/chemin?var1=value1&var2=value2
H I ©
EL
M OU
Pour ces deux formes de param
f E L
ètres
e
r de définir les routes
cdiffhérentes
A
Deux manières
©
Deux objets différents permettant de récupérer les valeurs
respectives
paramMap pour /chemin/param1/param2
queryParamMap pour /chemin?var1=value1&var2=value2

H & H: Research and Training 27 / 52

 Paramètres de requête

Angular
Définissons une route de la forme /chemin/param1/param2 dans
app-routing.module.ts

import { NgModule } from ’@angular/core’;

import { Routes, RouterModule } from ’@angular/router’;
import { StagiaireComponent } from ’./composants/stagiaire/stagiaire.
component’;
H I ©
EL
import { AdresseComponent } from ’./composants/adresse/adresse.
component’;
O U
const routes: Routes = [
f E LM
ch r e
{ path: ’stagiaire’, component: StagiaireComponent },
{ path: ’stagiaire/:nom/:prenom’, component: StagiaireComponent },

©A
{ path: ’adresse’, component: AdresseComponent },
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

H & H: Research and Training 28 / 52

 Paramètres de requête

Angular

Pour récupérer les paramètre d’une route de la forme

stagiaire/:nom/:prenom, il faut :
aller dans le composant concerné (ici,
H I ©
EL
stagiaire.component.ts)

O U
faire une injection de dépendance de la classe ActivatedRoute
E
(comme paramètre de constructeur)
f LM
r e
h classe dans la méthode ngOnInit()
utiliser un objetccette
soit©
A
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))

H & H: Research and Training 29 / 52

 Paramètres de requête

Pour récupérer les paramètres d’une route de la forme stagiaire/:nom/:prenom, dans

stagiaire.component.ts
import { ActivatedRoute } from ’@angular/router’;
// + les autres imports de components

@Component({
selector: ’app-stagiaire’,
templateUrl: ’./stagiaire.component.html’,
styleUrls: [’./stagiaire.component.css’]
H I ©
EL
})
export class StagiaireComponent implements OnInit {
O U
nom: any;
prenom: any;
f E LM
ch r e
©A
constructor(private route: ActivatedRoute) { }

ngOnInit() {
this.route.paramMap.subscribe(res => {
this.nom = res.get(’nom’);
this.prenom = res.get(’prenom’);
console.log(this.nom + ’ ’ + this.prenom);
});
}
}
H & H: Research and Training 30 / 52
 Paramètres de requête

Angular

H I ©
EL
Dans stagiaire.component.html
<h2>Stagiaire</h2> O U
<p> Bonjour {{ prenom }} {{ nom }} </p>
f E LM
ch r e
©A

H & H: Research and Training 31 / 52

 Paramètres de requête

Angular

constructor et ngOnInit

I ©
constructor : fonction JavaScript qui sert à initialiser les
H
attributs d’une classe
UEL
O
f E LM
constructor avec Angular sert seulement à faire les injections
de dépendances
ch r e
©A
ngOnInit : méthode exécutée quand Angular a fini d’initialiser le
composant (charger @Input()...)

H & H: Research and Training 32 / 52

 Paramètres de requête

Angular
La deuxième solution avec snapshot
import { ActivatedRoute } from ’@angular/router’;
// + les autres imports de components

@Component({
selector: ’app-stagiaire’,
templateUrl: ’./stagiaire.component.html’,
H I ©
})
styleUrls: [’./stagiaire.component.css’]
UEL
O
LM
export class StagiaireComponent implements OnInit {

nom: any;
r e f E
prenom: any;
ch
©A
constructor(private route: ActivatedRoute) { }

ngOnInit() {
this.nom = this.route.snapshot.params.nom;
this.prenom = this.route.snapshot.params.prenom;
console.log(this.nom + ’ ’ + this.prenom);
}
}

H & H: Research and Training 33 / 52

 Paramètres de requête

Angular

Pour récupérer les paramètres d’une route de la forme

adresse?ville=value1&rue=value2&codepostal=value3, il
faut :
aller dans le composant concerné (ici,
H I ©
adresse.component.ts)
UEL
O
f E LM
faire une injection de dépendance de la classe ActivatedRoute

ch r e
A
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)

H & H: Research and Training 34 / 52

 Paramètres de requête

Pas besoin de définir une route pour récupérer les paramètres rue, codepostal et ville

import { ActivatedRoute } from ’@angular/router’;

// + les autres imports de components

@Component({
selector: ’app-adresse’,
templateUrl: ’./adresse.component.html’,
styleUrls: [’./adresse.component.css’]
})
H I ©
EL
export class AdresseComponent implements OnInit {
rue = ’’;
O U
LM
codePostal = ’’;
ville = ’’;

e f E
constructor(private route: ActivatedRoute) { }
r
ch
ngOnInit(): void {

©A
this.route.queryParamMap.subscribe(
res => {
this.ville = res.get(’ville’) ?? ’’;
this.rue = res.get(’rue’) ?? ’’;
this.codePostal = res.get(’codepostal’) ?? ’’;
}
);
}
}

H & H: Research and Training 35 / 52

 Paramètres de requête

Angular

Dans adresse.component.html
<h2>Adresse</h2> H I ©
<ul>
UEL
O
<li>Rue : {{ rue }} </li>
f E
<li>Code Postal : {{ codePostal }} </li> LM
ch r
<li>Ville : {{ ville }} </li> e
</ul>
©A

H & H: Research and Training 36 / 52

 Paramètres de requête

La deuxième solution avec snapshot

import { ActivatedRoute } from ’@angular/router’;

// + les autres imports de components

@Component({
selector: ’app-adresse’,
templateUrl: ’./adresse.component.html’,
styleUrls: [’./adresse.component.css’]
H I ©
EL
})
export class AdresseComponent implements OnInit {
O U
rue = ’’;
f E LM
codePostal = ’’;
ville = ’’;
ch r e
©A
constructor(private route: ActivatedRoute) { }

ngOnInit(): void {
this.ville = this.route.snapshot.queryParams.ville;
this.rue = this.route.snapshot.queryParams.rue;
this.codePostal = this.route.snapshot.queryParams.codepostal;
}
}

H & H: Research and Training 37 / 52

 Création de liens avec paramètres

Angular

Une première méthode classique en HTML

<ul>
<li><a routerLink=’’> Accueil </a></li>
H I ©
EL
<li>
<a routerLink=’{{ lienStagiaire }}’> Stagiaire </a>
O U
LM
</li>

f E
<li><a routerLink=’/adresse’> Adresse </a></li>
r e
ch
</ul>

©A
On comprend de {{ lienStagiaire }} qu’il existe un attribut
lienStagiaire dans menu.component.ts

H & H: Research and Training 38 / 52

 Création de liens avec paramètres

Angular
Dans menu.component.ts
import { Component, OnInit } from ’@angular/core’;

@Component({
selector: ’app-menu’,
templateUrl: ’./menu.component.html’,
styleUrls: [’./menu.component.css’]
H I ©
EL
})
export class MenuComponent implements OnInit {
O U
lienStagiaire = ’’;
f E LM
param1 = ’john’;
param2 = ’wick’;
ch r e
constructor() {
©A
this.lienStagiaire = ’/stagiaire/’ + this.param1 + ’/’ + this.
param2;
}
ngOnInit(): void {

}
}

H & H: Research and Training 39 / 52

 Création de liens avec paramètres

Angular

Une deuxième écriture avec le one way binding (property binding)

<ul> H I ©
<li><a routerLink=’’> Accueil </a> </li>
UEL
O
<li><a [routerLink]=’lienStagiaire’> Stagiaire </a
></li>
f E LM
ch r e
<li><a routerLink=’/adresse’> Adresse </a></li>
</ul>
©A

H & H: Research and Training 40 / 52

 Création de liens avec paramètres

Angular

Une troisième écriture

<ul>
<li>
<a routerLink=’’> Accueil </a>
H I ©
</li>
UEL
<li> O
E
<a [routerLink]="[’/stagiaire’,param1,param2]">
f LM
Stagiaire </a>
ch r e
©A
</li>
<li>
<a routerLink=’/adresse’> Adresse </a>
</li>
</ul>

H & H: Research and Training 41 / 52

 Création de liens avec paramètres

Angular

Pour construire un chemin de la forme /chemin?param1=value1&param2=value2

<ul>
<li>
<a routerLink=’’> Accueil </a>
</li>
H I ©
<li>
UEL
O
LM
<a [routerLink]="[’/stagiaire’,param1,param2]"> Stagiaire </a>
</li>

r e f E
<li>
ch
©A
<a [routerLink]="[’/adresse’]" [queryParams]="{ ville: ’Marseille’,
codepostal: ’13000’, rue: ’paradis’}">
Adresse
</a>
</li>
</ul>

H & H: Research and Training 42 / 52

 Création de liens avec paramètres

Angular

Exercice
Dans stagiaire.component.html, construisez un lien vers la
H I ©
route /stagiaire avec deux paramètres
UEL
O
f E LM
Dans stagiaire.component.ts, utilisez la solution snapshot
puis observable pour récupérer les paramètres. Dans
ch r e
stagiaire.component.html, on affiche les paramètres.
©A
Vérifier, en cliquant sur le lien, que les nouveaux paramètres sont
affichés

H & H: Research and Training 43 / 52

 Création de liens avec paramètres

Angular

Conclusion
Si la valeur initiale de paramètre est utilisée seulement à
H I ©
EL
l’initialisation du composant et ne risque pas de changer, utilisez
U
les snapshot. O
f E LM
ch r e
Si la route risque de changer tout en restant dans le même
composant, utilisez les observables. L’initialisation du composant
©A
(ngOnInit()) ne serait donc pas appelée à nouveau,
l’observateur sera notifié lorsque l’URL a été modifiée.

H & H: Research and Training 44 / 52

 Création de liens avec paramètres

Angular

Exercice

H I ©
EL
Créez un composant calcul et définissez une route
calcul/:op dans app-routing.module.ts (op peut contenir
O U
f E LM
principalement les valeurs plus, moins, fois et div)

ch r e
Si l’adresse saisie dans la barre d’adresse est

©A
/calcul/plus?value1=2&value2=5, la réponse attendue est
donc 2 + 5 = 7

H & H: Research and Training 45 / 52

 Navigation depuis .component.ts

Angular

Étapes
H I ©
U EL de notre classe
Injecter la classe Router dans le constructeur
Mée
Utiliser l’objet de cette classeLinject
Odans n’importe quelle
r
méthode de notre classee f E
(.component.ts) pour réorienter vers
c h
©A
un autre chemin

H & H: Research and Training 46 / 52

 Navigation depuis .component.ts

Angular
Dans adresse.component.ts
import { Router } from ’@angular/router’;
// + les autres imports de components

@Component({
selector: ’app-adresse’,
templateUrl: ’./adresse.component.html’,
H I ©
})
styleUrls: [’./adresse.component.css’]
UEL
O
LM
export class AdresseComponent implements OnInit {

nom = ’wick’;
r e f E
prenom = ’john’;
ch
©A
constructor(private router: Router) { }

goToStagiaire(): void {
this.router.navigateByUrl(’/stagiaire/’ + this.nom + ’/’ + this.
prenom);
}
}

En appelant la méthode goToStagiaire(), on sera redirigé vers /stagiaire/john/wick.

H & H: Research and Training 47 / 52
 Navigation depuis .component.ts

Angular
On peut aussi utiliser la méthode navigate()

import { Router } from ’@angular/router’;

// + les autres imports de components

@Component({
selector: ’app-adresse’,
H I ©
EL
templateUrl: ’./adresse.component.html’,
styleUrls: [’./adresse.component.css’]
O U
LM
})
export class AdresseComponent implements OnInit {

r e f E
ch
nom = ’wick’;

©A
prenom = ’john’;

constructor(private router: Router) { }

goToStagiaire() {
this.router.navigate([’/stagiaire’, this.nom , this.prenom]);
}
}

H & H: Research and Training 48 / 52

 Chemin vide et chemin inexistant

Angular

On peut rediriger vers un chemin existant

const routes: Routes = [

H I ©
{ path: ’stagiaire’, component: StagiaireComponent },
UEL
{ path: ’stagiaire/:param1/:param2’, component:
O
StagiaireComponent },
f E
{ path: ’adresse’, component: AdresseComponent }, LM
ch r e
{ path: ’trainee’, redirectTo: ’/stagiaire’ }

©A
];

H & H: Research and Training 49 / 52

 Chemin vide et chemin inexistant

Angular
On peut créer un chemin vide pour que l’URL localhost:4200 soit accessible
const routes: Routes = [
{ path: ’stagiaire’, component: StagiaireComponent },
{ path: ’stagiaire/:param1/:param2’, component:
StagiaireComponent },
{ path: ’adresse’, component: AdresseComponent },
H I ©
EL
{ path: ’trainee’, redirectTo: ’/stagiaire’ },
{ path: ’’, redirectTo: ’/stagiaire’, pathMatch: ’full’ }
O U
LM
];

r e f E
Remarque
ch
©A
Sans la partie pathMatch: ’full’ (pour les chemins vides), toutes les routes
déclarées après cette dernière ne seront pas accessibles.

pathMatch: ’full’ ne laisse donc passer que les requêtes dont le chemin
correspond exactement au chemin vide

La deuxième valeur possible pour pathMatch est ’prefix’

H & H: Research and Training 50 / 52

 Chemin vide et chemin inexistant

Angular

On peut créer un composant error et l’afficher en cas de chemin inexistant

const routes: Routes = [

{ path: ’stagiaire’, component: StagiaireComponent },
{ path: ’stagiaire/:nom/:prenom’, component:
StagiaireComponent },
H I ©
{ path: ’adresse’, component: AdresseComponent },
UEL
{ path: ’trainee’, redirectTo: ’/stagiaire’ },
O
{ path: ’error’, component: ErrorComponent },
f E LM
ch r
{ path: ’**’, redirectTo: ’/error’ } e
{ path: ’’, redirectTo: ’/stagiaire’, pathMatch: ’full’},

];
©A

H & H: Research and Training 51 / 52

 Chemin vide et chemin inexistant

Angular

On peut créer un composant error et l’afficher en cas de chemin inexistant

const routes: Routes = [

{ path: ’stagiaire’, component: StagiaireComponent },
{ path: ’stagiaire/:nom/:prenom’, component:
StagiaireComponent },
H I ©
{ path: ’adresse’, component: AdresseComponent },
UEL
{ path: ’trainee’, redirectTo: ’/stagiaire’ },
O
{ path: ’error’, component: ErrorComponent },
f E LM
ch r
{ path: ’**’, redirectTo: ’/error’ } e
{ path: ’’, redirectTo: ’/stagiaire’, pathMatch: ’full’},

];
©A
Le chemin ** doit être le dernier. Autrement, toutes les requêtes seront redirigées
vers le composant error.

H & H: Research and Training 51 / 52

 Chemin vide et chemin inexistant

Angular

Exercice
Dans un nouveau composant tableau, déclarez un tableau
numbers = [2, 3, 8, 1].
H I ©
Définissez une route tableau/:id dans
UEL
O
app-routing.module.ts (id étant l’indice de l’élément à
afficher).
f E LM
ch r e
Ajoutez deux liens suivant et précédent qui permettent de
©A
naviguer respectivement sur l’élément suivant et précédent de
numbers.
Les deux liens suivant et précédent doivent permettre une
navigation circulaire.

H & H: Research and Training 52 / 52