SlideShare une entreprise Scribd logo
Chapitre 2
Liaison de Données
Data Binding
Ahlem ELHAJ
Multimédia et Développement Web – 2ème année – Semestre 1
ISET de Sousse
Développement Framework Coté Client - Angular
Introduction
 Angular offre la fonctionnalité de liaison de données (data
binding)
 Le data binding
◼ permet de coordonner les vues utilisateur avec les valeurs des
données de l’application,
◼ autrement dit un moyen de communication entre l’application et le
HTML.
 Angular définit 4 mécanismes de liaison de données :
◼ Interpolation
◼ Liaison de propriété (Property Binding)
◼ Liaison d’événement (Event Binding)
◼ Liaison bidirectionnelle (Two-Way Binding)
 Ce chapitre s’intéresse aux 3 premiers mécanismes.
2
Interpolation
 Manière la plus basique d'émettre des données issues du
code TypeScript vers le template.
 Pour afficher la valeur d’une propriété du composant dans
son template html : {{nomPropriété}}
 Ex. Pour afficher la valeur de la propriété title de la classe
AppComponent dans le template HTML de ce composant :
 NB. Angular convertit toujours l’expression entre doubles
accolades vers une chaîne de caractères avant de
l’envoyer au template.
3
<h2>{{title}} app is running</h2>
Property Binding -Liaison de propriété
 Autre façon de transfert des données du ts vers le html.
 Modifier dynamiquement les propriétés d'un élément du
DOM en fonction de données dans le TypeScript.
 S’applique sur les différentes propriétés des éléments du
DOM : value, hidden, src, alt, …
 Syntaxe : <balise [attribut]='nomPropriété’ >
 La classe ts de ce composant doit avoir les attributs
imageUrl, imageTexteAlt et estActif
 Le ! signifie la négation 4
<img src="image.jpg" alt="image non disponible">
<button disabled>Votre panier</button>
<img [src]="imageUrl" [alt]="imageTexteAlt">
<button [disabled]="!estActif">Votre panier</button>
Property Binding -Liaison de propriété
 Que se passe-t-il si imageUrl, imageTexteAlt ou estActif
n’est pas un attribut de la classe de ce composant ?
◼ Réponse : Erreur de compilation
 Peut-on dans cet exemple utiliser l’interpolation à la
place du property binding ? Sachant que la classe du
composant possède
◼ imageUrl et imageTexteAlt comme attributs de type string
◼ estActif comme attribut de type boolean
◼ Réponse : oui pour imageUrl et imageTexteAlt mais non pour estActif
◼ à discuter en classe !
5
<img [src]="imageUrl" [alt]="imageTexteAlt">
<button [disabled]="!estActif">Votre panier</button>
Event Binding -Liaison d’évènement
 L'interpolation et le "property binding"
◼ permettent de contrôler le contenu affiché (transfert ts vers DOM).
◼ Mais ne permettent pas de gérer les interactions avec
l'utilisateur (transfert DOM vers ts).
 Il faut ajouter des "listeners" d'évènements déclenchés
sur les éléments du DOM afin de modifier l'état de
l’application et mettre à jour la "view".
 Ce type de binding permet
◼ d’écouter les évènements du DOM (click, mouseover, keydown,
submit, focus, drop …)
◼ et d’appeler une action (méthode) de la classe du composant pour
traiter cet évènement.
6
Event Binding -Liaison d’évènement (2)
 Le nom de l’évènement est entouré par des parenthèses :
 La méthode onSave() de la classe du composant est
exécutée à chaque fois que l’utilisateur clique sur le
bouton.
 Et si on a besoin de données supplémentaires d’un
événement ?
◼ quelle touche est enfoncée ?
◼ quelles sont les coordonnées de la souris à l’écran ?
7
<button (click)="onSave()">Save<button>
Event Binding -Liaison d’évènement (3)
 La valeur de l'événement peut être récupérée via la variable
$event et transmise à la méthode.
 Dans le template HTML :
 Dans le code du composant (ts) :
 Noter le $ devant event dans l’appel de la méthode, pas dans
sa définition.
 Le ? est utilisé pour que le paramètre soit optionnel.
8
<input type="text" (keydown)="montrerTouche($event)">
montrerTouche(event ? : KeyboardEvent) {
alert(event?.key); }
Conclusion
 L’utilisation d’un Framework qui assure le data binding
facilite considérablement le travail du développeur
◼ ce dernier n’a qu’à déclarer les données et les éléments HTML à
cibler, et le Framework s’occupera du reste.
 Sens de transfert différent entre les différents
mécanismes:
◼ Interpolation et liaison de propriété : du composant (ts) vers le
DOM (html)
◼ Liaison d’évènement : du DOM vers le composant
◼ Two-way binding : dans les deux sens
9

Contenu connexe

Tendances

Applications Android - cours 8 : Gestion des évènements
Applications Android - cours 8 : Gestion des évènementsApplications Android - cours 8 : Gestion des évènements
Applications Android - cours 8 : Gestion des évènements
Ahmed-Chawki Chaouche
 
POO Java Chapitre 4 Heritage et Polymorphisme
POO Java Chapitre 4 Heritage et PolymorphismePOO Java Chapitre 4 Heritage et Polymorphisme
POO Java Chapitre 4 Heritage et Polymorphisme
Mouna Torjmen
 
Projet de fin d'etude sur le parc informatique
Projet  de fin d'etude sur le parc informatiqueProjet  de fin d'etude sur le parc informatique
Projet de fin d'etude sur le parc informatique
Hicham Ben
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
ENSET, Université Hassan II Casablanca
 
A la découverte de vue.js
A la découverte de vue.jsA la découverte de vue.js
A la découverte de vue.js
Bruno Bonnin
 
Introduction à Node.js
Introduction à Node.js Introduction à Node.js
Introduction à Node.js
Sonam TCHEUTSEUN
 
Applications Android - cours 11 : Boites de dialogue
Applications Android - cours 11 : Boites de dialogueApplications Android - cours 11 : Boites de dialogue
Applications Android - cours 11 : Boites de dialogue
Ahmed-Chawki Chaouche
 
vuejs.ppt
vuejs.pptvuejs.ppt
vuejs.ppt
lordeco
 
Angular Avancé
Angular AvancéAngular Avancé
Conception et réalisation d'une plateforme éducative (LMS).
Conception et réalisation d'une plateforme éducative (LMS).Conception et réalisation d'une plateforme éducative (LMS).
Conception et réalisation d'une plateforme éducative (LMS).
Nidhal Harrathi
 
Les collections en Java
Les collections en JavaLes collections en Java
Les collections en Java
Papa Cheikh Cisse
 
Android-Tp2: liste et adaptateurs
Android-Tp2: liste et adaptateursAndroid-Tp2: liste et adaptateurs
Android-Tp2: liste et adaptateurs
Lilia Sfaxi
 
Android-Tp1: éléments graphiques de base et intents
Android-Tp1: éléments graphiques de base et intentsAndroid-Tp1: éléments graphiques de base et intents
Android-Tp1: éléments graphiques de base et intents
Lilia Sfaxi
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
ENSET, Université Hassan II Casablanca
 
Laravel 9 comprendre les fondamentaux.
Laravel 9 comprendre les fondamentaux.Laravel 9 comprendre les fondamentaux.
Laravel 9 comprendre les fondamentaux.
Valdy Ngouabira
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
ENSET, Université Hassan II Casablanca
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
Nizar MAATOUG -ISET Sidi Bouzid
 
softCours design pattern m youssfi partie 9 creation des objets abstract fact...
softCours design pattern m youssfi partie 9 creation des objets abstract fact...softCours design pattern m youssfi partie 9 creation des objets abstract fact...
softCours design pattern m youssfi partie 9 creation des objets abstract fact...
ENSET, Université Hassan II Casablanca
 
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Riadh K.
 
Rapport- Conception et réalisation d'une plateforme social learning
Rapport- Conception et réalisation d'une plateforme social learningRapport- Conception et réalisation d'une plateforme social learning
Rapport- Conception et réalisation d'une plateforme social learning
Rouâa Ben Hammouda
 

Tendances (20)

Applications Android - cours 8 : Gestion des évènements
Applications Android - cours 8 : Gestion des évènementsApplications Android - cours 8 : Gestion des évènements
Applications Android - cours 8 : Gestion des évènements
 
POO Java Chapitre 4 Heritage et Polymorphisme
POO Java Chapitre 4 Heritage et PolymorphismePOO Java Chapitre 4 Heritage et Polymorphisme
POO Java Chapitre 4 Heritage et Polymorphisme
 
Projet de fin d'etude sur le parc informatique
Projet  de fin d'etude sur le parc informatiqueProjet  de fin d'etude sur le parc informatique
Projet de fin d'etude sur le parc informatique
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
 
A la découverte de vue.js
A la découverte de vue.jsA la découverte de vue.js
A la découverte de vue.js
 
Introduction à Node.js
Introduction à Node.js Introduction à Node.js
Introduction à Node.js
 
Applications Android - cours 11 : Boites de dialogue
Applications Android - cours 11 : Boites de dialogueApplications Android - cours 11 : Boites de dialogue
Applications Android - cours 11 : Boites de dialogue
 
vuejs.ppt
vuejs.pptvuejs.ppt
vuejs.ppt
 
Angular Avancé
Angular AvancéAngular Avancé
Angular Avancé
 
Conception et réalisation d'une plateforme éducative (LMS).
Conception et réalisation d'une plateforme éducative (LMS).Conception et réalisation d'une plateforme éducative (LMS).
Conception et réalisation d'une plateforme éducative (LMS).
 
Les collections en Java
Les collections en JavaLes collections en Java
Les collections en Java
 
Android-Tp2: liste et adaptateurs
Android-Tp2: liste et adaptateursAndroid-Tp2: liste et adaptateurs
Android-Tp2: liste et adaptateurs
 
Android-Tp1: éléments graphiques de base et intents
Android-Tp1: éléments graphiques de base et intentsAndroid-Tp1: éléments graphiques de base et intents
Android-Tp1: éléments graphiques de base et intents
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
 
Laravel 9 comprendre les fondamentaux.
Laravel 9 comprendre les fondamentaux.Laravel 9 comprendre les fondamentaux.
Laravel 9 comprendre les fondamentaux.
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
softCours design pattern m youssfi partie 9 creation des objets abstract fact...
softCours design pattern m youssfi partie 9 creation des objets abstract fact...softCours design pattern m youssfi partie 9 creation des objets abstract fact...
softCours design pattern m youssfi partie 9 creation des objets abstract fact...
 
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
 
Rapport- Conception et réalisation d'une plateforme social learning
Rapport- Conception et réalisation d'une plateforme social learningRapport- Conception et réalisation d'une plateforme social learning
Rapport- Conception et réalisation d'une plateforme social learning
 

Similaire à Chapitre 2-Data binding.pdf

Cours wpf avancé
Cours wpf avancéCours wpf avancé
Cours wpf avancé
lucas zientek
 
Les Activités.pdf
Les Activités.pdfLes Activités.pdf
Les Activités.pdf
RihabBENLAMINE
 
MVVM de A à Z
MVVM de A à ZMVVM de A à Z
MVVM de A à Z
Microsoft
 
C5 Javascript French
C5 Javascript FrenchC5 Javascript French
C5 Javascript French
Vlad Posea
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
Abdoulaye Dieng
 
programmation orienté objet c++
programmation orienté objet c++programmation orienté objet c++
programmation orienté objet c++
coursuniv
 
Cours 2 les composants
Cours 2 les composantsCours 2 les composants
Cours 2 les composants
Aymen Sellaouti
 
Rapport tp3 j2ee
Rapport tp3 j2eeRapport tp3 j2ee
Rapport tp3 j2ee
Soukaina Boujadi
 
Support tutoriel : Créer votre jeu en HTML5
Support tutoriel : Créer votre jeu en HTML5Support tutoriel : Créer votre jeu en HTML5
Support tutoriel : Créer votre jeu en HTML5
SmartnSkilled
 
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Tarik Zakaria Benmerar
 
laravel.sillo.org-Cours Laravel 10 les bases la validation.pdf
laravel.sillo.org-Cours Laravel 10  les bases  la validation.pdflaravel.sillo.org-Cours Laravel 10  les bases  la validation.pdf
laravel.sillo.org-Cours Laravel 10 les bases la validation.pdf
HeartKing10
 
Poo en c++ les relations entre classes
Poo en c++ les relations entre classesPoo en c++ les relations entre classes
Poo en c++ les relations entre classes
Amina HAMEURLAINE
 
Formation C# - Cours 3 - Programmation objet
Formation C# - Cours 3 - Programmation objetFormation C# - Cours 3 - Programmation objet
Formation C# - Cours 3 - Programmation objet
kemenaran
 
5.ateliers avancés
5.ateliers avancés5.ateliers avancés
5.ateliers avancés
Chaikhani Ibtissam
 
Uml: Diagrammes de classes -- Concepts avances --- 27
Uml: Diagrammes de classes -- Concepts avances --- 27Uml: Diagrammes de classes -- Concepts avances --- 27
Uml: Diagrammes de classes -- Concepts avances --- 27
megaplanet20
 
La puissance des pseudo-éléments
La puissance des pseudo-élémentsLa puissance des pseudo-éléments
La puissance des pseudo-éléments
Geoffrey Croftє
 
Fondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application FlexFondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application Flex
david deraedt
 

Similaire à Chapitre 2-Data binding.pdf (20)

Cours wpf avancé
Cours wpf avancéCours wpf avancé
Cours wpf avancé
 
Manualjquery
ManualjqueryManualjquery
Manualjquery
 
Les Activités.pdf
Les Activités.pdfLes Activités.pdf
Les Activités.pdf
 
MVVM de A à Z
MVVM de A à ZMVVM de A à Z
MVVM de A à Z
 
C5 Javascript
C5 JavascriptC5 Javascript
C5 Javascript
 
C5 Javascript French
C5 Javascript FrenchC5 Javascript French
C5 Javascript French
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
programmation orienté objet c++
programmation orienté objet c++programmation orienté objet c++
programmation orienté objet c++
 
Cours 2 les composants
Cours 2 les composantsCours 2 les composants
Cours 2 les composants
 
Rapport tp3 j2ee
Rapport tp3 j2eeRapport tp3 j2ee
Rapport tp3 j2ee
 
Support tutoriel : Créer votre jeu en HTML5
Support tutoriel : Créer votre jeu en HTML5Support tutoriel : Créer votre jeu en HTML5
Support tutoriel : Créer votre jeu en HTML5
 
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
 
laravel.sillo.org-Cours Laravel 10 les bases la validation.pdf
laravel.sillo.org-Cours Laravel 10  les bases  la validation.pdflaravel.sillo.org-Cours Laravel 10  les bases  la validation.pdf
laravel.sillo.org-Cours Laravel 10 les bases la validation.pdf
 
Poo en c++ les relations entre classes
Poo en c++ les relations entre classesPoo en c++ les relations entre classes
Poo en c++ les relations entre classes
 
Backbonejs presentation
Backbonejs presentationBackbonejs presentation
Backbonejs presentation
 
Formation C# - Cours 3 - Programmation objet
Formation C# - Cours 3 - Programmation objetFormation C# - Cours 3 - Programmation objet
Formation C# - Cours 3 - Programmation objet
 
5.ateliers avancés
5.ateliers avancés5.ateliers avancés
5.ateliers avancés
 
Uml: Diagrammes de classes -- Concepts avances --- 27
Uml: Diagrammes de classes -- Concepts avances --- 27Uml: Diagrammes de classes -- Concepts avances --- 27
Uml: Diagrammes de classes -- Concepts avances --- 27
 
La puissance des pseudo-éléments
La puissance des pseudo-élémentsLa puissance des pseudo-éléments
La puissance des pseudo-éléments
 
Fondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application FlexFondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application Flex
 

Plus de BoubakerMedanas

POO-Cours.pdf
POO-Cours.pdfPOO-Cours.pdf
POO-Cours.pdf
BoubakerMedanas
 
Chap-SQL-LID-P1.pdf
Chap-SQL-LID-P1.pdfChap-SQL-LID-P1.pdf
Chap-SQL-LID-P1.pdf
BoubakerMedanas
 
Chap1Concepts-FondamentauxBD.pdf
Chap1Concepts-FondamentauxBD.pdfChap1Concepts-FondamentauxBD.pdf
Chap1Concepts-FondamentauxBD.pdf
BoubakerMedanas
 
course1-Intrduction-to-the-game-industry.pdf
course1-Intrduction-to-the-game-industry.pdfcourse1-Intrduction-to-the-game-industry.pdf
course1-Intrduction-to-the-game-industry.pdf
BoubakerMedanas
 
Chapitre-3-Routage.pdf
Chapitre-3-Routage.pdfChapitre-3-Routage.pdf
Chapitre-3-Routage.pdf
BoubakerMedanas
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
BoubakerMedanas
 
Chapitre-3-Routage.pdf
Chapitre-3-Routage.pdfChapitre-3-Routage.pdf
Chapitre-3-Routage.pdf
BoubakerMedanas
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
BoubakerMedanas
 
Chapitre 2-Data binding.pdf
Chapitre 2-Data binding.pdfChapitre 2-Data binding.pdf
Chapitre 2-Data binding.pdf
BoubakerMedanas
 

Plus de BoubakerMedanas (9)

POO-Cours.pdf
POO-Cours.pdfPOO-Cours.pdf
POO-Cours.pdf
 
Chap-SQL-LID-P1.pdf
Chap-SQL-LID-P1.pdfChap-SQL-LID-P1.pdf
Chap-SQL-LID-P1.pdf
 
Chap1Concepts-FondamentauxBD.pdf
Chap1Concepts-FondamentauxBD.pdfChap1Concepts-FondamentauxBD.pdf
Chap1Concepts-FondamentauxBD.pdf
 
course1-Intrduction-to-the-game-industry.pdf
course1-Intrduction-to-the-game-industry.pdfcourse1-Intrduction-to-the-game-industry.pdf
course1-Intrduction-to-the-game-industry.pdf
 
Chapitre-3-Routage.pdf
Chapitre-3-Routage.pdfChapitre-3-Routage.pdf
Chapitre-3-Routage.pdf
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
 
Chapitre-3-Routage.pdf
Chapitre-3-Routage.pdfChapitre-3-Routage.pdf
Chapitre-3-Routage.pdf
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
 
Chapitre 2-Data binding.pdf
Chapitre 2-Data binding.pdfChapitre 2-Data binding.pdf
Chapitre 2-Data binding.pdf
 

Dernier

Lae-ac1-5_english-fraançais_qins italy.pdf
Lae-ac1-5_english-fraançais_qins italy.pdfLae-ac1-5_english-fraançais_qins italy.pdf
Lae-ac1-5_english-fraançais_qins italy.pdf
djelloulbra
 
Meetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances LiferayMeetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances Liferay
Sébastien Le Marchand
 
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Maalik Jallo
 
Introduction à Crossplane (Talk Devoxx 2023)
Introduction à Crossplane (Talk Devoxx 2023)Introduction à Crossplane (Talk Devoxx 2023)
Introduction à Crossplane (Talk Devoxx 2023)
Adrien Blind
 
procede de fabrication mecanique et industriel
procede de fabrication mecanique et industrielprocede de fabrication mecanique et industriel
procede de fabrication mecanique et industriel
saadbellaari
 
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
InnovaSter-Trade Ltd.
 
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptxCours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Jacques KIZA DIMANDJA
 

Dernier (7)

Lae-ac1-5_english-fraançais_qins italy.pdf
Lae-ac1-5_english-fraançais_qins italy.pdfLae-ac1-5_english-fraançais_qins italy.pdf
Lae-ac1-5_english-fraançais_qins italy.pdf
 
Meetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances LiferayMeetup LFUG : Cahier de vacances Liferay
Meetup LFUG : Cahier de vacances Liferay
 
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
Transformation Digitale - Initiez-vous à l'informatique et à l'utilisation de...
 
Introduction à Crossplane (Talk Devoxx 2023)
Introduction à Crossplane (Talk Devoxx 2023)Introduction à Crossplane (Talk Devoxx 2023)
Introduction à Crossplane (Talk Devoxx 2023)
 
procede de fabrication mecanique et industriel
procede de fabrication mecanique et industrielprocede de fabrication mecanique et industriel
procede de fabrication mecanique et industriel
 
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
Technologie hydrostatique, innovation pour la stérilisation des aliments : HI...
 
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptxCours d'Intelligence Artificielle et Apprentissage Automatique.pptx
Cours d'Intelligence Artificielle et Apprentissage Automatique.pptx
 

Chapitre 2-Data binding.pdf

  • 1. Chapitre 2 Liaison de Données Data Binding Ahlem ELHAJ Multimédia et Développement Web – 2ème année – Semestre 1 ISET de Sousse Développement Framework Coté Client - Angular
  • 2. Introduction  Angular offre la fonctionnalité de liaison de données (data binding)  Le data binding ◼ permet de coordonner les vues utilisateur avec les valeurs des données de l’application, ◼ autrement dit un moyen de communication entre l’application et le HTML.  Angular définit 4 mécanismes de liaison de données : ◼ Interpolation ◼ Liaison de propriété (Property Binding) ◼ Liaison d’événement (Event Binding) ◼ Liaison bidirectionnelle (Two-Way Binding)  Ce chapitre s’intéresse aux 3 premiers mécanismes. 2
  • 3. Interpolation  Manière la plus basique d'émettre des données issues du code TypeScript vers le template.  Pour afficher la valeur d’une propriété du composant dans son template html : {{nomPropriété}}  Ex. Pour afficher la valeur de la propriété title de la classe AppComponent dans le template HTML de ce composant :  NB. Angular convertit toujours l’expression entre doubles accolades vers une chaîne de caractères avant de l’envoyer au template. 3 <h2>{{title}} app is running</h2>
  • 4. Property Binding -Liaison de propriété  Autre façon de transfert des données du ts vers le html.  Modifier dynamiquement les propriétés d'un élément du DOM en fonction de données dans le TypeScript.  S’applique sur les différentes propriétés des éléments du DOM : value, hidden, src, alt, …  Syntaxe : <balise [attribut]='nomPropriété’ >  La classe ts de ce composant doit avoir les attributs imageUrl, imageTexteAlt et estActif  Le ! signifie la négation 4 <img src="image.jpg" alt="image non disponible"> <button disabled>Votre panier</button> <img [src]="imageUrl" [alt]="imageTexteAlt"> <button [disabled]="!estActif">Votre panier</button>
  • 5. Property Binding -Liaison de propriété  Que se passe-t-il si imageUrl, imageTexteAlt ou estActif n’est pas un attribut de la classe de ce composant ? ◼ Réponse : Erreur de compilation  Peut-on dans cet exemple utiliser l’interpolation à la place du property binding ? Sachant que la classe du composant possède ◼ imageUrl et imageTexteAlt comme attributs de type string ◼ estActif comme attribut de type boolean ◼ Réponse : oui pour imageUrl et imageTexteAlt mais non pour estActif ◼ à discuter en classe ! 5 <img [src]="imageUrl" [alt]="imageTexteAlt"> <button [disabled]="!estActif">Votre panier</button>
  • 6. Event Binding -Liaison d’évènement  L'interpolation et le "property binding" ◼ permettent de contrôler le contenu affiché (transfert ts vers DOM). ◼ Mais ne permettent pas de gérer les interactions avec l'utilisateur (transfert DOM vers ts).  Il faut ajouter des "listeners" d'évènements déclenchés sur les éléments du DOM afin de modifier l'état de l’application et mettre à jour la "view".  Ce type de binding permet ◼ d’écouter les évènements du DOM (click, mouseover, keydown, submit, focus, drop …) ◼ et d’appeler une action (méthode) de la classe du composant pour traiter cet évènement. 6
  • 7. Event Binding -Liaison d’évènement (2)  Le nom de l’évènement est entouré par des parenthèses :  La méthode onSave() de la classe du composant est exécutée à chaque fois que l’utilisateur clique sur le bouton.  Et si on a besoin de données supplémentaires d’un événement ? ◼ quelle touche est enfoncée ? ◼ quelles sont les coordonnées de la souris à l’écran ? 7 <button (click)="onSave()">Save<button>
  • 8. Event Binding -Liaison d’évènement (3)  La valeur de l'événement peut être récupérée via la variable $event et transmise à la méthode.  Dans le template HTML :  Dans le code du composant (ts) :  Noter le $ devant event dans l’appel de la méthode, pas dans sa définition.  Le ? est utilisé pour que le paramètre soit optionnel. 8 <input type="text" (keydown)="montrerTouche($event)"> montrerTouche(event ? : KeyboardEvent) { alert(event?.key); }
  • 9. Conclusion  L’utilisation d’un Framework qui assure le data binding facilite considérablement le travail du développeur ◼ ce dernier n’a qu’à déclarer les données et les éléments HTML à cibler, et le Framework s’occupera du reste.  Sens de transfert différent entre les différents mécanismes: ◼ Interpolation et liaison de propriété : du composant (ts) vers le DOM (html) ◼ Liaison d’évènement : du DOM vers le composant ◼ Two-way binding : dans les deux sens 9