Polytech Sousse 2023
Ateliers Framework Côté Client : Angular
Institut Supérieur des Etudes Technologiques de Sousse
Département de Technologies de l’Informatique
Matière : Atelier FrameWork Côté Serveur Classe : DSI 2.1
Enseignante : Raja ABDELMOUMEN A. U. : 2021/2022 – Semestre 1
Atelier 4 : Classes pour les entités – Composant
Enfant/Composant Parent
Objectif de l’atelier
L’objectif de cet atelier est de programmer l’interface du home-visiteur pour afficher
la liste des films (voir figure 1).
Indication : Cet atelier est fait à la suite de l’atelier 3 (même projet)
Figure 1. Page « Home Visiteur »
1
Etape 1 : Définir le style des pages Web
Pour définir la mise en page de l’application Angular, plusieurs possibilités sont
disponibles :
• Utiliser son propre style : On peut définir le style global des pages Web en modifiant
le fichier src/[Link]. De plus, chaque composant peut avoir ses propres styles
locaux qui ne seront visibles et appliqués que dans la vue de ce composant. Il est à
noter que les styles locaux sont plus prioritaires que les styles globaux.
• Utiliser Bootstrap : Pour inclure ng-bootstrap à votre projet, il suffit de lancer la
commande suivante : ng add @ng-bootstrap/ng-bootstrap
• Utiliser Angular Material : La bibliothèque des composants de l’interface utilisateur
Material de Angular est aussi intéressante à utiliser. Pour en savoir plus sur Angular
Material, consultez le lien suivant : [Link]
Dans cet atelier, nous allons opter pour l’utilisation d’un style propre. La mise en page
des pages Web n’est pas l’objectif de notre atelier qui est concentré sur Angular.
Néanmoins, c’est toujours convivial d’avoir une bonne présentation des pages Web.
Etape 2 : Création de la classe Film
Pour modéliser l’entité film manipulée dans notre application, nous allons utiliser
des classes TypeScript.
1. Lancer la commande suivante qui permet de générer une nouvelle classe Film
sous le dossier src/app/shared/models :
ng generate class shared/models/film
Comme les dossiers shared et models n’existent pas encore, ils seront d’abord
créés sous : src/app puis la classe Film est créée dans le dossier
src/app/shared/models.
Le rôle du dossier shared est de contenir tout composant, classes, etc. qui sont
partagés par tous les autres composants de l’application Angular
2. Editer le fichier de définition de la classe Film pour compléter le code de la classe
avec les attributs et le constructeur :
src/app/shared/models/[Link]
export class Film {
id? : string;
nom? : string;
description? : string;
descVisible? : boolean;
2
constructor(args: Film = {}) {
[Link]=[Link];
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
}
}
La classe Film a comme attributs :
• id de type string
• nom de type string
• description de type string
• descVisible de type boolean (indique si la description du film est visible
ou non sur l’écran)
Le point d’interrogation signifie que l’attribut est optionnel. Lors de l’instanciation d’un
objet de type Film, il n’est pas nécessaire de fournir la valeur des attributs optionnels,
comme dans cet exemple :
Film film1= new Film();
Film film2= new Film({nom: 'Mission impossible 2'});
3. Créer un fichier [Link], qui permet de stocker les données des films, dans
le répertoire src/app/shared/models qui contient un tableau FILMS d’objets
Film initialisés.
src/app/shared/models/[Link]
import { Film } from './film';
export const FILMS : Film [] = [
{
id:'1',
nom: 'Mission impossible 2',
description: "Sorti en 2000. L'agent secret Ethan Hunt
recrute deux assistants, Luther Strickell et Billy Baird,
ainsi qu'une cambrioleuse de charme, Nyah Hall, en vue
d'une mission de la plus haute importance",
descVisible : false
},
{
id:'2',
nom: 'Mission impossible Ghost Protocol',
description: "Sorti en 2011. Quand l'agence du FMI est
impliquée dans un complot terroriste et est dissolue,
Ethan et son équipe doivent laver les soupçons qui pèsent
sur elle.",
descVisible : false
},
3
{
id:'3',
nom: 'Mission impossible Fallout',
description:" Sorti en 2018. Ethan Hunt, accompagné de
son équipe de l'IMF - Impossible Mission Force - et de
quelques fidèles alliées sont lancés dans une course
contre la montre, suite au terrible échec d'une
mission.",
descVisible : false
}]
Etape 4 : Composant home-visiteur
Dans cette partie, nous allons programmer le contenu du composant home-visiteur
qui permet d’afficher la liste des films (voir figure 1) :
Nous allons utiliser le code qui est déjà fait dans l’atelier 2 pour afficher la liste
des films (question 11).
A la différence du code réalisé dans l’atelier 2, l’initialisation du tableau par les
informations des films est faite dans la classe du composant. Dans notre cas,
l’initialisation de ce tableau sera faite par la constante FILMS qui se trouve dans
le fichier [Link].
4. Commencer par copier le code en gras dans le fichier home-
[Link] :
[Link]
import { Component, OnInit } from '@angular/core';
import { FILMS } from 'src/app/shared/models/des-films';
import { Film } from 'src/app/shared/models/film';
@Component({
selector: 'app-home-visiteur',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class HomeVisiteurComponent implements OnInit {
tabFilms: Film[] = FILMS;
constructor() { }
ngOnInit(): void {
}
}
4
Ce code tabFilms: Film[] = FILMS; permet de déclarer une propriété tabFilms de
la classe HomeVisiteurComponent qui est un tableau d’objets Film et ce tableau est
initialisé à la constante FILMS qui se trouve dans le fichier [Link]
Ne pas oublier d’ajouter en haut les import suivants :
import { FILMS } from 'src/app/shared/models/des-films';
import { Film } from 'src/app/shared/models/film';
5. Afficher les noms des films dans le Template. On aura dans le navigateur
l’affichage suivant :
6. Programmer les boutons Plus d’infos et Moins d’infos (voir figure suivante)
5
En cliquant sur le bouton Plus d’infos la description du film apparait, le bouton Plus
d’informations disparait et le bouton Moins d’informations apparait.
En cliquant sur le bouton Moins d’infos la description du film disparait, bouton
Moins d’informations disparait et le bouton Plus d’informations apparait.
Indications :
• Utiliser l’attribut descVisible de chaque film et la directive ngIf.
• Implémenter une méthode afficheDesc dans le component liste-films qui
permet de mettre l’attribut descVicible à true.
• Implémenter une méthode cacherDesc dans le component liste-films qui
permet de mettre l’attribut descVicible à false.
• Ne pas oublier de programmer l’apparition exclusive des deux boutons.
On donne le code CSS pour le style du bouton :
.btnInfo {
background-color: #008CBA;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 2px 1px;
cursor: pointer;
}
Etape 5 : Partage de données entre composant enfant et composant parent
Dans notre application, nous allons créer un composant detail-film dont le rôle
est d’afficher le détail d’un film. Ce composant sera un composant enfant de home-
visiteur. Nous allons avoir le même résultat que la question 6 mais avec un composant
Enfant responsable d’afficher les détails d’un film.
Qu’est ce qui changera avec ce composant ?
Comme auparavant, chaque fois qu'un utilisateur clique sur le bouton Plus
d’infos, le détail du film apparaît sous la liste des héros. Maintenant, le composant
detail-film présente ces détails au lieu du home-visiteur.
Diviser le HomeVisiteurComponent original en deux composants présente des
avantages, à la fois maintenant et dans le futur :
• Vous avez réduit les responsabilités de HomeVisiteurComponent.
• Vous pouvez faire évoluer le DetailFilmComponent en un éditeur de film riche sans
toucher au HomeVisiteurComponent parent.
• Vous pouvez faire évoluer le HomeVisiteurComponent sans toucher à la vue
détaillée du film.
6
• Vous pouvez réutiliser le DetailFilmComponent dans le modèle d'un futur
composant.
7. Créer un composant detail-film avec Angular CLI dans le module visisteur.
8. Ajouter le sélecteur du nouveau composant detail-film dans le template du
composant home-visiteur. De cette manière nous allons avoir une hiérarchie
de composants :
home-visiteur
detail-film
@Input() permet à un composant parent de communiquer des données à son
enfant. Dans notre cas, nous allons passer la description du film sélectionné par
l’utilisateur.
Au niveau du composant Enfant ajouter :
@Input() desc: string;
Il faut importer Input de '@angular/core'
Au niveau du composant Parent, nous suivons la syntaxe suivante :
<selecteur-Enfant [desc]="nomVariableParent"> </selecteur-Enfant>
9. Modifier la classe du composant detail-film et la classe du composant home-
visiteur pour assurer la communication de la description du film sélectionné.
10. Modifier le template du composant detail-film pour avoir le résultat souhaité.
