Angular 5 / 6 : routage

Achref El Mouelhi

Docteur de l’université d’Aix-Marseille

Chercheur en Programmation par contrainte (IA)
Ingénieur en Génie logiciel

elmouelhi.achref@gmail.com

12-13 Avril 2018, POE m2i 1 / 34

 Plan

1 Création de component

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

12-13 Avril 2018, POE m2i 2 / 34

 Création de component

Angular

Pour créer un nouveau composant

ng generate component ComponentName

Ou utiliser le raccourci
ng g c ComponentName

12-13 Avril 2018, POE m2i 3 / 34

 Création de component

Angular

Pour créer un nouveau composant

ng generate component ComponentName

Ou utiliser le raccourci
ng g c ComponentName

Exemple : créons deux composants : adresse et personne

ng g c adresse

ng g c personne

12-13 Avril 2018, POE m2i 3 / 34

 Création de component

Angular

Constats
Quatre fichiers créés pour chaque composant
x.component.ts avec x = personne ou adresse
x.component.html
x.component.css
x.component.spec.ts

Déclarer les deux composants dans la section declarations de

app.module.ts

12-13 Avril 2018, POE m2i 4 / 34

 Création de component

Angular

Nouveau contenu d’app.module.ts

@NgModule({
declarations: [
AppComponent,
AdresseComponent,
PersonneComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

12-13 Avril 2018, POE m2i 5 / 34

 Création de component

Angular
Pour afficher le contenu de ces deux composants dans
app.component.html
<app-personne></app-personne>
<app-adresse></app-adresse>

12-13 Avril 2018, POE m2i 6 / 34

 Création de component

Angular
Pour afficher le contenu de ces deux composants dans
app.component.html
<app-personne></app-personne>
<app-adresse></app-adresse>

Remarques

En général, on ne cherche pas à afficher tous les composant au

même temps dans le bloc principal
On définit plutôt un chemin pour chaque composant
Le composant sera affiché dans le composant principal si son
chemin apparaı̂t dans l’URL de la requête HTTP

12-13 Avril 2018, POE m2i 6 / 34

 Routage

Angular

Routage
un tableau d’objet
chaque objet contient des attributs (path, component,
redirectTo...) assurant le mapping chemin/composant

12-13 Avril 2018, POE m2i 7 / 34

 Routage

Angular
Dans app.module.ts, on commence par importer le module de routage
import { RouterModule } from ’@angular/router’;

12-13 Avril 2018, POE m2i 8 / 34

 Routage

Angular
Dans app.module.ts, on commence par importer le module de routage
import { RouterModule } from ’@angular/router’;
Ce module doit être ajouté dans la section imports
@NgModule({
declarations: [
AppComponent,
AdresseComponent,
PersonneComponent
],
imports: [
BrowserModule,
RouterModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
12-13 Avril 2018, POE m2i 8 / 34
 Routage

Angular

RouterModule a deux méthode statiques qui prennent en paramètre

un tableau de Routes
.forRoot(tableau) : pour le module principal
.forChild(tableau) : pour les sous-modules inclus dans le
module principal

12-13 Avril 2018, POE m2i 9 / 34

 Routage

Angular
Définissons ce tableau de routes
imports: [
BrowserModule,
RouterModule.forRoot([
{ path: ’personne’, component: PersonneComponent },
{ path: ’adresse’, component: AdresseComponent },
])
],

12-13 Avril 2018, POE m2i 10 / 34

 Routage

Angular
Définissons ce tableau de routes
imports: [
BrowserModule,
RouterModule.forRoot([
{ path: ’personne’, component: PersonneComponent },
{ path: ’adresse’, component: AdresseComponent },
])
],

Remarques

L’URL saisies auront la forme suivante localhost:4200/adresse ou

localhost:4200/personne

Faut-il ajouter / comme préfix aux valeurs de l’attribut path ?

Non, car / a été défini dans index.html dans la balise <base

href="/">
12-13 Avril 2018, POE m2i 10 / 34
 Routage

Angular

Définissons ce tableau de routes

imports: [
BrowserModule,
RouterModule.forRoot([
{ path: ’personne’, component: PersonneComponent },
{ path: ’adresse’, component: AdresseComponent },
], { enableTracing: true })
],

12-13 Avril 2018, POE m2i 11 / 34

 Routage

Angular

Définissons ce tableau de routes

imports: [
BrowserModule,
RouterModule.forRoot([
{ path: ’personne’, component: PersonneComponent },
{ path: ’adresse’, component: AdresseComponent },
], { enableTracing: true })
],

{ enableTracing: true } : pour le débogage, elle permet de garder

une trace de la recherche d’un chemin.

12-13 Avril 2018, POE m2i 11 / 34

 Routage

Angular

Pour tester
il faut activer le routage dans le composant principal
saisir localhost:4200/adresse ou
localhost:4200/personne dans la barre d’adresse

12-13 Avril 2018, POE m2i 12 / 34

 Routage

Angular

Pour tester
il faut activer le routage dans le composant principal
saisir localhost:4200/adresse ou
localhost:4200/personne dans la barre d’adresse

Dans app.component.html, ajouter cette balise pour activer le

routage
<router-outlet></router-outlet>

12-13 Avril 2018, POE m2i 12 / 34

 Routage

Angular

Remarques

Pour accéder à un composant, l’utilisateur doit connaı̂tre son

chemin défini dans le tableau de routes (or ceci n’est pas vraiment
très pratique)
On peut plutôt définir un menu contenant des liens vers nos
différents composants

12-13 Avril 2018, POE m2i 13 / 34

 Routage

Angular

Dans app.component.html, ajouter cette balise pour activer le

routage
<ul>
<li><a routerLink=’’>Accueil</a></li>
<li><a routerLink=’/personne’> Personne</a></li>
<li><a routerLink=’/adresse’>Adresse</a></li>
</ul>
<router-outlet></router-outlet>

Explication

Ici, on utilise l’attribut routerLink à la place de href pour faire

référence à un path défini dans notre tableau de routes

12-13 Avril 2018, POE m2i 14 / 34

 Routage

Angular

Remarques

Pour une meilleur lisibilité et restructuration du code, il vaut mieux

déplacer le tableau de routes vers un autre fichier
Ensuite, il faut juste importer ce fichier et l’intégrer dans
app.module.ts

12-13 Avril 2018, POE m2i 15 / 34

 Création d’un module de routage

Angular

Pour créer un module de routage

ng generate module app-routing --flat --module=app

12-13 Avril 2018, POE m2i 16 / 34

 Création d’un module de routage

Angular

Pour créer un module de routage

ng generate module app-routing --flat --module=app

Comprenons la commande

ng generate module app-routing : pour générer un

module de routage appelé app-routing.
--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.

12-13 Avril 2018, POE m2i 16 / 34

 Création d’un module de routage

Angular
La section imports du fichier app.module.ts
imports: [
BrowserModule,
RouterModule.forRoot([
{ path: ’personne’, component: PersonneComponent },
{ path: ’adresse’, component: AdresseComponent },
]),
AppRoutingModule
],

Le fichier app-routing.module.ts
import { NgModule } from ’@angular/core’;
import { CommonModule } from ’@angular/common’;

@NgModule({
imports: [
CommonModule
],
declarations: []
})
export class AppRoutingModule { }
12-13 Avril 2018, POE m2i 17 / 34
 Création d’un module de routage

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

Modifions le contenu du fichier app-routing.module.ts

import { NgModule } from ’@angular/core’;
import { RouterModule, Routes } from ’@angular/router’;
// + les autres imports de components

export const routes: Routes = [

{ path: ’personne’, component: PersonneComponent },
{ path: ’adresse’, component: AdresseComponent }
]
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

12-13 Avril 2018, POE m2i 18 / 34

 Paramètres de requête

Angular

Deux formes de paramètres de requête

/chemin/param1/param2
/chemin?var1=value1&var2=value2

12-13 Avril 2018, POE m2i 19 / 34

 Paramètres de requête

Angular

Deux formes de paramètres de requête

/chemin/param1/param2
/chemin?var1=value1&var2=value2

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

12-13 Avril 2018, POE m2i 19 / 34

 Paramètres de requête

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

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

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

// + les autres imports de components

export const routes: Routes = [

{ path: ’personne/:param1/:param2’, component: PersonneComponent },
{ path: ’personne’, component: PersonneComponent },
{ path: ’adresse’, component: AdresseComponent }
]

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

12-13 Avril 2018, POE m2i 20 / 34

 Paramètres de requête

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

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

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

// + les autres imports de components

export const routes: Routes = [

{ path: ’personne/:param1/:param2’, component: PersonneComponent },
{ path: ’personne’, component: PersonneComponent },
{ path: ’adresse’, component: AdresseComponent }
]

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

Pour la deuxième forme de route, on n’a pas besoin de définir une nouvelle route si une route
avec un path: ’chemin’ existe

12-13 Avril 2018, POE m2i 20 / 34

 Paramètres de requête

Angular

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

personne/:param1/:param2, il faut :
aller dans le composant concerné (ici,
personne.component.ts)
faire une injection de dépendance de la classe ActivatedRoute

utiliser cette classe dans la méthode ngOnInit() pour récupérer

l’objet paramMap puis récupérer les paramètres

12-13 Avril 2018, POE m2i 21 / 34

 Paramètres de requête

Pour récupérer les paramètres d’une route de la forme personne/:param1/:param2,

dans app.personne.ts
import { ActivatedRoute } from ’@angular/router’;
// + les autres imports de components

@Component({
selector: ’app-personne’,
templateUrl: ’./personne.component.html’,
styleUrls: [’./personne.component.css’]
})
export class PersonneComponent implements OnInit {

param1: any;
param2: any;

constructor(private router: ActivatedRoute) { }

ngOnInit() {
this.router.paramMap.subscribe(res => {
this.para12 = res.get(’param1’);
this.param1 = res.get(’param2’);
console.log(param1 + param2);
});
}
}
12-13 Avril 2018, POE m2i 22 / 34
 Paramètres de requête

Angular

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

personne?param1=value1&param2=value2, il faut :
aller dans le composant concerné (ici,
personne.component.ts)
faire une injection de dépendance de la classe ActivatedRoute

utiliser cette classe dans la méthode ngOnInit() pour récupérer

l’objet queryParamMap puis récupérer les paramètres

12-13 Avril 2018, POE m2i 23 / 34

 Paramètres de requête

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

personne?param1=value1&param2=value2, dans app.personne.ts
import { ActivatedRoute } from ’@angular/router’;
// + les autres imports de components

@Component({
selector: ’app-personne’,
templateUrl: ’./personne.component.html’,
styleUrls: [’./personne.component.css’]
})
export class PersonneComponent implements OnInit {

param1: any;
param2: any;

constructor(private router: ActivatedRoute) { }

ngOnInit() {
this.router.queryParamMap.subscribe(res => {
this.param1 = res.get(’param1’);
this.param2 = res.get(’param2’);
console.log(param1 + param2);
});
}
}
12-13 Avril 2018, POE m2i 24 / 34
 Création de liens avec paramètres

Angular

Une première méthode classique en HTML

<ul>
<li><a routerLink=’’>Accueil</a></li>
<li><a routerLink=’{{ lienPersonne }}’> Personne</
a></li>
<li><a routerLink=’/adresse’>Adresse</a></li>
</ul>
<router-outlet></router-outlet>

On comprend de {{ lienPersonne }} qu’il existe un attribut

lienPersonne dans personne.component.ts

12-13 Avril 2018, POE m2i 25 / 34

 Création de liens avec paramètres

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

@Component({
selector: ’app-personne’,
templateUrl: ’./personne.component.html’,
styleUrls: [’./personne.component.css’]
})
export class PersonneComponent implements OnInit {

lienPersonne: string = "";

param1: string = ’john’;
param2: string = ’wick’;

constructor(private router: ActivatedRoute) {

this.lienPersonne = "/personne/" + this.param1 + "/" + this.
param2;
}
ngOnInit() {
}
}

12-13 Avril 2018, POE m2i 26 / 34

 Création de liens avec paramètres

Angular
Une deuxième écriture
<ul>
<li><a routerLink=’’>Accueil</a></li>
<li><a [routerLink]=’lienPersonne’> Personne</a></
li>
<li><a routerLink=’/adresse’>Adresse</a></li>
</ul>

<router-outlet></router-outlet>

12-13 Avril 2018, POE m2i 27 / 34

 Création de liens avec paramètres

Angular
Une deuxième écriture
<ul>
<li><a routerLink=’’>Accueil</a></li>
<li><a [routerLink]=’lienPersonne’> Personne</a></
li>
<li><a routerLink=’/adresse’>Adresse</a></li>
</ul>

<router-outlet></router-outlet>

[ one way binding ] ou [ property binding ]

[property] = ’value’ : permet de remplacer value par sa
valeur dans la classe app.component.ts

12-13 Avril 2018, POE m2i 27 / 34

 Création de liens avec paramètres

Angular

Une troisième écriture

<ul>
<li><a routerLink=’’>Accueil</a></li>
<li><a [routerLink]=[’/personne’,param1,param2]>
Personne</a></li>
<li><a routerLink=’/adresse’>Adresse</a></li>
</ul>

<router-outlet></router-outlet>

12-13 Avril 2018, POE m2i 28 / 34

 Création de liens avec paramètres

Angular

Et pour construire des chemins de la forme

/chemin?param1=value1&param2=value2
<ul>
<li><a routerLink=’’>Accueil</a></li>
<li><a [routerLink]=[’/personne’] [queryParams]="{
param1:value1,param2:value2}">Personne</a></li>
<li><a routerLink=’/adresse’>Adresse</a></li>
</ul>

<router-outlet></router-outlet>

12-13 Avril 2018, POE m2i 29 / 34

 Navigation depuis .component.ts

Angular

Étapes
Injecter la classe Router dans le constructeur de notre classe
Utiliser l’objet de cette classe injectée dans n’importe quelle
méthode de notre classe (.component.ts) pour réorienter vers
un autre chemin

12-13 Avril 2018, POE m2i 30 / 34

 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’,
styleUrls: [’./adresse.component.css’]
})
export class AdresseComponent implements OnInit {

param1: string = ’john’;

param2: string = ’wick’;

constructor(private route: ActivatedRoute) { }

goToPersonne() {
this.router.navigateByUrl("/personne/" + this.param1 + "/" + this.
param2);
}
}

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

12-13 Avril 2018, POE m2i 31 / 34
 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’,
templateUrl: ’./adresse.component.html’,
styleUrls: [’./adresse.component.css’]
})
export class AdresseComponent implements OnInit {

param1: string = ’john’;

param2: string = ’wick’;

constructor(private router: Router) { }

goToPersonne() {
this.router.navigate([’/personne’, this.param1 , this.param2]);
}
}

12-13 Avril 2018, POE m2i 32 / 34

 Chemin vide et chemin inexistant

Angular

On peut rediriger vers un chemin existant

export const routes: Routes = [
{ path: ’personne’, component: PersonneComponent
},
{ path: ’adresse’, component: AdresseComponent }
{ path: ’person’, redirectTo: "/personne",
pathMatch: ’full’ },
]

12-13 Avril 2018, POE m2i 33 / 34

 Chemin vide et chemin inexistant

Angular

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

inexistant
export const routes: Routes = [
{ path: ’personne’, component: PersonneComponent
},
{ path: ’adresse’, component: AdresseComponent }
{ path: ’person’, redirectTo: "/personne",
pathMatch: ’full’ },
{ path: ’**’, component: ErrorComponent }
]

12-13 Avril 2018, POE m2i 34 / 34