Découvrir Angular 2

Afficher en live avec le data-binding

Testez gratuitement nos 1247 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Pour bien comprendre les échanges de données, abordez le data-binding. Il s'agit d'une donnée qui transite partout en même temps et qui reste accessible, aussi bien dans le template que dans le composant.
02:28

Transcription

On va parler de data binding, parce que là, vous venez de voir, très facilement, comment on utilise un ngModel pour synchroniser des infos. Mais quand on parle de synchronisation, ça veut dire que, concrètement, cet objet-là est mis à jour. On dit qu'il est hydraté, il est hydraté partout. Dès que vous commencez à remplir le champ, il est hydraté. Que se passe-t-il réellement ? Si vous voulez débugger, et je vous conseille de faire ainsi, il va falloir, de temps en temps, utiliser une syntaxe très simple, qui vous permet de voir un objet complet en json, vous allez utiliser ça : newItem | json. C'est génial, car ça vous permettra de vous rendre compte qu'effectivement, il y a du data binding. C'est-à-dire, qu'en fait, il y a une mise à jour de l'objet en live. On va essayer, regardez. Je tape une référence et un nom, et ça se met à jour directement, en live. Bien sûr, on l'a déjà vu, si je fais « Ajouter un objet », ça va vider l'objet directement. Vous pouvez avoir ça absolument partout, on peut tout à fait utiliser ça pour faire une preview, pour faire un aperçu de ce que la personne est en train de taper, ce n'est pas un problème, on pourrait avoir ici « Vous allez ajouter la commande etc. » avec un petit encart décoré, etc. Ça vous permet de bien vous rendre compte que quand je mets à jour une information, elle se met à jour quelque part. Mais mieux que ça. Si j'ai plusieurs champs qui référencent le newItem, newItem.reference, comme ça, imaginons que j'en aie trois dans la même page. Eh bien, quand je vais mettre à jour un champ, regardez, ça met à jour tous les champs en même temps. C'est normal, parce qu'effectivement c'est ce qu'on appelle du data binding, la donnée a un seul endroit qui est répercutée partout où on en a besoin. Non seulement dans le composant en lui-même et dans le corps du composant, mais, bien sûr, partout où on en a envie dans le template. Pensez à ça, c'est très important, ça peut vous aider à réaliser pas mal de logiques sympas. En tout cas, voilà ce qu'est le data binding, je référence à un endroit, et à partir de là, ça se met à jour partout. Pour le data binding, n'oubliez pas, c'est bien cette syntaxe-là qu'on doit utiliser, donc ouverture de crochet, ouverture de parenthèse, et ngModel, et vous activez directement le data binding sur n'importe quelle valeur, sur un objet complet ou, bien évidemment, juste sur une string, juste une propriété de votre classe qui serait mise à jour, vous pouvez faire ça sans problèmes.

Découvrir Angular 2

Prenez en main toute la puissance du framework AngularJS. Exploitez ses fonctionnalités, et développez rapidement des applications web robustes et performantes !

2h50 (40 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :6 sept. 2016
Durée :2h50 (40 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !