Institut Supérieur des Etudes Technologiques de Sousse

Département de Technologies de l’Informatique

Matière : Atelier FrameWork Côté Client Classe : DSI 2.1
A. U. : 2019/2020 – Semestre 1

Atelier 6 : Le routage avec paramètre de routes

L’objectif de cet atelier est de pouvoir cliquer sur un film dans la liste des films
afin d'afficher une page avec plus d'informations sur ce film. La figure 1 montre la liste
des films. Si on clique par exemple sur le lien Détails du premier film, on aura l’interface
de la figure 2.

Fig1. Interface de la liste des films Fig2. Interface Détail du premier film

1. Créer un composant detailFilm dans site\films.

Angular crée un dossier detail-film sous films avec les fichiers suivants :

1
2. Ecrire le code nécessaire pour que :
• Le fichier detail-film.component.ts permet de déclarer deux propriétés
nomFilm et descFilm initialisées respectivement à ‘Nom du film’ et
‘Description du film’.
• Le fichier detail-film.component.html contient un affichage par
interpolation des deux propriétés et un lien qui permet de retourner
avec la liste des films. (utiliser routerlink)
3. Ajouter une route vers ce nouveau composant dans film.module.ts
{ path: 'films/:id', component: DetailFilmComponent },
L'utilisation des deux points : avant un fragment de route déclare ce fragment
comme étant un paramètre : tous les chemins de type films/* seront renvoyés
vers DetailFilmComponent. Si on navigue vers /films/nom, peu importe le nom
choisi, on a accès à DetailFilmComponent .
4. Vérifier que la page suivante du composant detailFilm apparait quand on met
dans la barre de navigation par exemple /films/nom

5. Vérifier que le lien de retour fonctionne.

6. Modifier le fichier films.component.html de telle façon on aura l’affichage
suivant (Pour cet étape le lien Détail est simplement une balise a avec href) :

2
 On souhaite une fois qu’on clique sur Détails afficher la page avec plus
d'informations sur le film en question. Pour se faire suivre les étapes suivantes :
7. Au niveau du composant detailFilms, injecter ActivatedRoute , importé
depuis @angular/router , afin de récupérer le fragment id de l'URL :
constructor(private route: ActivatedRoute) { }

8. Dans ngOnInit() , nous allons utiliser l'objet snapshot qui contient les
paramètres de l'URL et, pour l'instant, on va attribuer le paramètre id à la
variable nomFilm :

ngOnInit() {
this.nomFilm = this.route.snapshot.params['id'];
}
Ainsi, le fragment qu’on tape dans la barre d'adresse après films/ s'affichera
dans le template. Par exemple, on tape 5, on aura l’affichage suivant :

9. Mais ce n'est pas le comportement recherché. Pour atteindre l'objectif

souhaité, on commence par ajouter, un identifiant unique pour chaque film
et une méthode qui rendra le film correspondant à un identifiant dans le
service film.
a. Il faut ajouter une propriété id représentant l’identifiant unique de
chaque film dans la classe Film
b. Dans le fichier liste-films, il faut initialisée la nouvelle propriété (on
commence par 1)
c. Dans le fichier films.service.ts, écrire une méthode getFilmParId (id :
number) : Film qui permet de retourner le film ayant l’id passé en
paramètre.

3
 10. Dans DetailFilmComponent, on va récupérer l'identifiant de l'URL et l'utiliser
pour récupérer le film correspondant (N’oublier pas d’injecter le service film
dans le composant DetailFilm) :
ngOnInit() {

const id = this.route.snapshot.params['id'];

this.nomFilm = this.filmsService.getFilmParId(+id).nomFilm;

this.descFilm =
this.filmsService.getFilmParId(+id).descriptionFilm;

Puisqu'un fragment d'URL est forcément de type string , et que la

méthode getFilmById() prend un nombre comme argument, il ne faut pas
oublier d'utiliser + avant id dans l'appel pour caster la variable comme
nombre.

Si on tape films/1 dans la barre d’adresse, on aura les détails du film d’identifiant
1 comme le montre la figure suivante :

11. Enfin, il faut intégrer l'identifiant unique dans FilmComponent : on utilise

routerLink dans le lien Détails avec l’identifiant du film.