Cours Angular Routing

Angular : routage
Achref El Mouelhi
Docteur de l’université d’Aix-Marseille

Chercheur en programmation par contrainte (IA)
Ingénieur en génie logiciel
elmouelhi.achref@gmail.com
H & H: Research and Training 1 / 52

Plan
1 Création de composant
2 Routage
3 Création d’un module de routage
4 Paramètres de requête
5 Création de liens avec paramètres
6 Navigation depuis .component.ts
7 Chemin vide et chemin inexistant

Création de composant
Angular
Pour créer un nouveau composant

ng generate component component-name
H I ©
UEL
O
f E LM
ch r e
©A

Angular

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

Angular

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 répertoire x
ng g c x/component-name

Angular
Pour la suite, on va créer 3 composants

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

Angular
Commençons par créer le premier composant adresse dans un répertoire composants
ng g c composants/adresse
H I ©
UEL
O
f E LM
ch r e
©A

Angular
Commençons par créer le premier composant adresse dans un répertoire composants
ng g c composants/adresse
H I ©
UEL
O
f E LM
Ré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)

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

Angular
Ensuite stagiaire
ng g c composants/stagiaire
H I ©
UEL
O
f E LM
Ré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)

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

Angular
Et enfin menu
ng g c composants/menu
H I ©
UEL
O
f E LM
Ré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)

Angular
Constats
I
Quatre fichiers créé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 effectuées dans la section declarations de
Trois déclarations
app.module.ts

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

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

Angular
Pour afficher le contenu de ces trois composants dans
app.component.html
<app-stagiaire></app-stagiaire>
<app-adresse></app-adresse>
H I ©
UEL
O
Remarques
f E LM
r e
céfhère ne pas afficher tous les composants dans le
composant© A
En général, on pr
principal
On associe plutôt un chemin à chaque composant
Le composant sera affiché dans le composant principal si son chemin

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

Routage
Module de routage
À la création du projet, on a demandé la géné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 { }

Routage
Angular
H I ©
RouterModule a deux méthode statiques qui prennent en paramè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

Routage
Définissons des routes dans ce tableau de routes de app-routing.module.ts

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

Routage
Définissons des routes dans ce tableau de routes de app-routing.module.ts

component’;
component’;
H I ©
EL
O
{ path: ’adresse’, component: AdresseComponent }, U
];
f E LM
@NgModule({
ch r e
©A
})
Pas de route pour le composant menu car on veut l’afficher quelle que soit le chemin demandé.

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 préfix aux valeurs de l’attribut path ?
ch
©A
Non, car / a été défini dans index.html dans la balise <base
href="/">

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

component’;
H I ©
EL
U
component’;
O
f E LM
r e
ch
];
@NgModule({
©A
imports: [RouterModule.forRoot(routes, { enableTracing: true })],
})

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
©

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
©
Où le composant sera affiché dans app.component.html ?
Il faut lui indiquer l’emplacement mais pas en ajoutant le sélecteur du

composant

Routage
Angular
Il faut indiquer l’emplacement du composant à 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

Routage
Angular
Remarques
H I ©
EL
Pour accéder à un composant, l’utilisateur doit connaı̂tre son
U
O
chemin défini dans le tableau de routes (or ceci n’est pas vraiment
très pratique)
f E LM
ch r e
On peut plutôt définir un menu contenant des liens vers nos
©A
différents composants

Routage
Commençons par dé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

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

Routage
<ul>
</ul>
H I ©
U EL
Dans app.component.html, on ajoute le menu et on indique l’emplacement des
composants à afficher
O
f E LM
ch r e
©A
Remarque
Chaque fois qu’on clique sur un lien la page est rechargée : ce n’est pas le but d’une application
mono-page

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>

Routage
Angular
Pour afficher la route active en gras
<ul>
<li routerLinkActive=active>
<a routerLink=’stagiaire’> Stagiaire </a>
H I ©
EL
</li>
O U
LM
<a routerLink=’adresse’> Adresse </a>
</li>
</ul>
r e f E
ch
©A
Dans menu.component.css, il faut définir la classe active
.active {
font-weight: bold;
}

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

visitée, pour cela on ajoute [routerLinkActiveOptions]="{ exact: true
}" pour que la classe soit uniquement ajoutée lorsque la route correspond
exactement à la valeur de routerLink
<ul>
H I ©
<li>
U EL
O
<a routerLink=’’ routerLinkActive=active [
</li>
f E LM
routerLinkActiveOptions]="{ exact: true }"> Accueil </a>
ch r e
©A
<a routerLink=’stagiaire’> Stagiaire </a>
</li>
<a routerLink=’adresse’> Adresse </a>
</li>
</ul>

Création d’un module de routage
Angular
Pour créer un module de routage (Si on n’a pas accepté qu’il soit
généré à la création du projet)
ng generate module app-routing --flat --module=app
H I ©
UEL
O
f E LM
ch r e
©A

Angular
Pour créer un module de routage (Si on n’a pas accepté qu’il soit
généré à la cré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 générer un
module de routage appelé app-routing.
©A
--flat : pour placer le fichier dans src/app et éviter de créer
un répertoire propre à ce module.
--module=app : pour enregistrer ce module dans le tableau
imports de AppModule.

Angular
La section imports du fichier app.module.ts
imports: [
BrowserModule,
RouterModule.forRoot([
]),
H I ©
],
AppRoutingModule
UEL
O
f E LM
Le fichier app-routing.module.ts
ch r e
©A
import { CommonModule } from ’@angular/common’;
@NgModule({
imports: [
CommonModule
],
declarations: []
})
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 { RouterModule, Routes } from ’@angular/router’;
// + les autres imports de components
r e f E
ch
©A
{ path: ’adresse’, component: AdresseComponent }
];
@NgModule({
})

Angular
Pour activer le traçage

import { RouterModule, Routes } from ’@angular/router’;
H I ©
UEL
O
LM
];
r e E
{ path: ’adresse’, component: AdresseComponent }
f
@NgModule({
ch
©A
imports: [RouterModule.forRoot(routes, { enableTracing: true
})],
})

Paramètres de requête
Angular
Deux formes de paramètres de requête

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

Angular
Deux formes de paramètres de requête

/chemin/param1/param2
/chemin?var1=value1&var2=value2
H I ©
EL
M OU
Pour ces deux formes de param
f E L
ètres
e
r de définir les routes
cdiffhérentes
A
Deux manières
©
Deux objets différents permettant de récupérer les valeurs
respectives
paramMap pour /chemin/param1/param2
queryParamMap pour /chemin?var1=value1&var2=value2

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

component’;
H I ©
EL
component’;
O U
f E LM
ch r e
{ path: ’stagiaire/:nom/:prenom’, component: StagiaireComponent },
©A
];
@NgModule({
})

Angular
Pour récupérer les paramètre d’une route de la forme

stagiaire/:nom/:prenom, il faut :
aller dans le composant concerné (ici,
H I ©
EL
stagiaire.component.ts)
O U
faire une injection de dépendance de la classe ActivatedRoute
E
(comme paramètre de constructeur)
f LM
r e
h classe dans la méthode ngOnInit()
utiliser un objetccette
soit©
A
par l’intermédiaire d’un objet paramMap pour récupérer les
paramètres (solution avec les observables (asynchrone))
soit par l’intermédiaire d’un objet params pour récupérer les
paramètres (solution avec les snapshot (instantanée))

Pour récupérer les paramètres d’une route de la forme stagiaire/:nom/:prenom, dans

stagiaire.component.ts
import { ActivatedRoute } from ’@angular/router’;
@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);
});
}
}
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

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

Angular
La deuxième solution avec snapshot
@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
ngOnInit() {
this.nom = this.route.snapshot.params.nom;
this.prenom = this.route.snapshot.params.prenom;
console.log(this.nom + ’ ’ + this.prenom);
}
}

Angular
Pour récupérer les paramètres d’une route de la forme

adresse?ville=value1&rue=value2&codepostal=value3, il
faut :
aller dans le composant concerné (ici,
H I ©
adresse.component.ts)
UEL
O
f E LM
faire une injection de dépendance de la classe ActivatedRoute
ch r e
A
utiliser un objet cette classe dans la méthode ngOnInit()
©
soit par l’intermédiaire d’un objet queryParamMap pour récupérer
les paramètres (solution avec les observables)
soit par l’intermédiaire d’un objet queryParams pour récupérer les
paramètres (solution avec les snapshot)

Pas besoin de définir une route pour récupérer les paramètres rue, codepostal et ville

@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
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’) ?? ’’;
}
);
}
}

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

La deuxième solution avec snapshot
@Component({
H I ©
EL
})
O U
rue = ’’;
f E LM
codePostal = ’’;
ville = ’’;
ch r e
©A
ngOnInit(): void {
this.ville = this.route.snapshot.queryParams.ville;
this.rue = this.route.snapshot.queryParams.rue;
this.codePostal = this.route.snapshot.queryParams.codepostal;
}
}

Création de liens avec paramètres
Angular
Une première méthode classique en HTML

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

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

Angular
Une deuxième é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

Angular
Une troisième é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>

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>

Angular
Exercice
Dans stagiaire.component.html, construisez un lien vers la
H I ©
route /stagiaire avec deux paramètres
UEL
O
f E LM
Dans stagiaire.component.ts, utilisez la solution snapshot
puis observable pour récupérer les paramètres. Dans
ch r e
stagiaire.component.html, on affiche les paramètres.
©A
Vérifier, en cliquant sur le lien, que les nouveaux paramètres sont
affichés

Angular
Conclusion
Si la valeur initiale de paramètre est utilisée seulement à
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 même
composant, utilisez les observables. L’initialisation du composant
©A
(ngOnInit()) ne serait donc pas appelée à nouveau,
l’observateur sera notifié lorsque l’URL a été modifiée.

Angular
Exercice
H I ©
EL
Créez un composant calcul et dé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 réponse attendue est
donc 2 + 5 = 7

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

Angular
Dans adresse.component.ts
import { Router } from ’@angular/router’;
@Component({
H I ©
})
UEL
O
LM
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 méthode goToStagiaire(), on sera redirigé vers /stagiaire/john/wick.

Angular
On peut aussi utiliser la méthode navigate()
import { Router } from ’@angular/router’;

@Component({
H I ©
EL
O U
LM
})
r e f E
ch
nom = ’wick’;
©A
prenom = ’john’;
constructor(private router: Router) { }
goToStagiaire() {
this.router.navigate([’/stagiaire’, this.nom , this.prenom]);
}
}

Chemin vide et chemin inexistant
Angular
On peut rediriger vers un chemin existant

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

Angular
On peut créer un chemin vide pour que l’URL localhost:4200 soit accessible
{ path: ’stagiaire/:param1/:param2’, component:
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
déclarées après cette dernière ne seront pas accessibles.
pathMatch: ’full’ ne laisse donc passer que les requêtes dont le chemin
correspond exactement au chemin vide
La deuxième valeur possible pour pathMatch est ’prefix’

Angular
On peut créer un composant error et l’afficher en cas de chemin inexistant

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

Angular
On peut créer un composant error et l’afficher en cas de chemin inexistant

{ path: ’stagiaire/:nom/:prenom’, component:
H I ©
UEL
O
{ path: ’error’, component: ErrorComponent },
f E LM
ch r
{ path: ’**’, redirectTo: ’/error’ } e
{ path: ’’, redirectTo: ’/stagiaire’, pathMatch: ’full’},
];
©A
Le chemin ** doit être le dernier. Autrement, toutes les requêtes seront redirigées
vers le composant error.

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

Cours Angular Routing

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours Angular Routing

Transféré par

Droits d'auteur :

Formats disponibles

Angular : routage

Docteur de l’université d’Aix-Marseille

H & H: Research and Training 1 / 52

3 Création d’un module de routage

5 Création de liens avec paramètres

6 Navigation depuis .component.ts

7 Chemin vide et chemin inexistant

H & H: Research and Training 2 / 52

Pour créer un nouveau composant

H & H: Research and Training 3 / 52

Pour créer un nouveau composant

H & H: Research and Training 3 / 52

Pour créer un nouveau composant

H & H: Research and Training 3 / 52

Pour la suite, on va créer 3 composants

H & H: Research and Training 4 / 52

Commençons par créer le premier composant adresse dans un répertoire composants

H & H: Research and Training 5 / 52

Commençons par créer le premier composant adresse dans un répertoire composants

H & H: Research and Training 5 / 52

H & H: Research and Training 6 / 52

H & H: Research and Training 6 / 52

H & H: Research and Training 7 / 52

H & H: Research and Training 7 / 52

H & H: Research and Training 8 / 52

H & H: Research and Training 9 / 52

H & H: Research and Training 10 / 52

On associe plutôt un chemin à chaque composant

Le composant sera affiché dans le composant principal si son chemin

H & H: Research and Training 10 / 52

À la création du projet, on a demandé la génération d’un fichier de routage :

Ce fichier permet d’assurer le mapping chemin/composant

Il contient un tableau vide de type Routes

const routes: Routes = [];

H & H: Research and Training 11 / 52

H & H: Research and Training 12 / 52

Définissons des routes dans ce tableau de routes de app-routing.module.ts

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

H & H: Research and Training 13 / 52

Définissons des routes dans ce tableau de routes de app-routing.module.ts

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

H & H: Research and Training 13 / 52

H & H: Research and Training 14 / 52

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

H & H: Research and Training 15 / 52

Comment faire pour tester ?

H & H: Research and Training 16 / 52

Comment faire pour tester ?

Il faut lui indiquer l’emplacement mais pas en ajoutant le sélecteur du

H & H: Research and Training 16 / 52

H & H: Research and Training 17 / 52

H & H: Research and Training 18 / 52

Commençons par définir le menu suivant dans menu.component.html

H & H: Research and Training 19 / 52

Commençons par définir le menu suivant dans menu.component.html

H & H: Research and Training 19 / 52

Commençons par définir le menu suivant dans menu.component.html

H & H: Research and Training 19 / 52

Solution : remplacer l’attribut href par routerLink

H & H: Research and Training 20 / 52

H & H: Research and Training 21 / 52

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

H & H: Research and Training 22 / 52

H & H: Research and Training 23 / 52