Vous êtes sur la page 1sur 2

Institut Supérieur des Etudes Technologiques de Sousse }

Département de Technologies de l’Informatique nomMethode1 (): string {


Matière : Atelier FrameWork Côté Client Classe : DSI 2.1 return "...";
A. U. : 2019/2020 – Semestre 1 }
}
// Instanciation de la classe
Atelier 4 : Interaction Component et Template var objet = new NomClasse("Hello");
Tous les membres d’une classe sont publiques par défaut, comme si le mot-clé public
L’objectif de cet atelier est de réaliser l’interface suivante :
avait été utilisé explicitement.
2. Créer un fichier liste-films.ts dans le répertoire src/site/app/films qui permet
d'exporter la constante FILMS qui est un tableau d’objets film initialisés.
N’oublier pas d’importer la classe film.
3. Dans le fichier film.component.ts faire les modifications suivantes :
• importer la classe film et la constante FILMS.
• modifier l’initialisation du tableau films par films: Film[] = null;
• faire l’initialisation du tableau films dans la méthode ngOnInit avec la
constante FILMS.

Interaction entre Component et Template :


L'interpolation permet d'afficher des propriétés de nos composants dans les
templates, via la syntaxe {{ }}.
On peut lier une propriété d'élément, d'attribut, de classe ou de style d'un
composant vers le template.
On peut gérer les interactions d'un utilisateur avec un élément de la page grâce à la
syntaxe : ‘(‘ + ‘nom de l'événement’ + ’)’.
Exemple :
<button (click)="Cliquer()">Cliquer sur moi!</button>
La méthode Cliquer est implémentée dans le fichier .ts.
D’autres événements sont considérés : blur, mouseenter, keyup, key.enter, etc.Une
Cet atelier repose sur l’atelier 3. liste complète des événements du DOM est accessible via le lien :
https://developer.mozilla.org/en-US/docs/Web/Events
1. Créer la classe film dans un fichier film.ts dans le répertoire src/site/app/films.
La classe film a comme attributs : On peut référencer des variables directement dans le template :
• nomFilm : string; Il existe un moyen pour obtenir les données utilisateur grâce aux variables de
• descriptionFilm : string; référence du template Angular. Ces variables fournissent un accès direct à un élément
• descriptionCachee : boolean; à partir du template. Pour déclarer une variable de référence de modèle, précéder un
identifiant par un caractère dièse (ou dièse) (#).
La syntaxe générale de création d’une classe en Typescript est : Exemple :
export class NomClasse {
attribut1: typeAttribut1; <input #nom keyup="0">
constructor(varLocale : typeAttribut1) { <p>{{nom.value}}</p>
this.attribut1 = varLocale;
1 2
La variable de référence du modèle nommée nom, déclarée sur l'élément <input>,
fait référence à l'élément <input> lui-même. Le code utilise la variable nom pour
obtenir la valeur de l'élément d'entrée et l'afficher avec une interpolation entre les
balises <p>. Il est possible de référencer nom à partir de n’importe quel frère ou enfant
de l’élément <input>. Angular prend en compte la liaison de données entre le
composant et le template seulement si on effectue une action en réponse à des
événements asynchrones, comme des frappes sur le clavier.
Le zéro est la plus courte déclaration pour signifier que nous ne voulons rien
exécuter, mais simplement activer la liaison de données entre la variable locale et la
valeur interpolée.
4. Ecrire le code nécessaire pour ajouter un film en fin de la liste

5. En cliquant sur le bouton Moins d’informations la description du film disparait


et aussi le bouton Moins d’informations disparait et le bouton Plus
d’informations apparait.

En cliquant sur le bouton Plus d’informations la description du film apparait et


aussi le bouton Plus d’informations disparait et le bouton Moins d’informations
apparait.

6. En cliquant sur le bouton Delete, le film est supprimé de la liste.