[MUSIC]
Si vous avez un site web statique,
alors vous avez toutes les données dont vous avez besoin pour construire votre site web.
Et il sera créé une fois et votre site Web est prêt à partir.
Mais de nombreux sites web de nos jours sont pilotés par des données provenant du backend.
Votre application web récupère les données d'un serveur backend et
les utilise pour mettre en page dynamiquement le contenu de votre site Web, ou
même mettre à jour le contenu de votre site Web.
Donc, cela nécessite que les données circulent du backend à
votre application web vers le DOM.
Et toute interaction de l'utilisateur sur le DOM doit être transmise à votre application web.
Cela nécessite donc la communication entre le DOM et
votre composant dans le cadre angulaire par exemple.
Regardons comment cela se passe dans le cadre angulaire et
avec un peu plus de détails.
Ce que nous avons appris jusqu'à présent, c'est comment un composant est préparé.
Nous avons donc vu que le composant a deux parties principales, le fichier dactylographié
où l'architecture du composant est définie, et les propriétés.
Et les méthodes de et puis vous avez le modèle qui
définit comment le contenu est disposé, et ajouté dans le DOM.
Donc, le modèle est celui qui va être fourni par un composant à
occuper une partie de votre page Web.
Ainsi, le modèle forme le support de communication pour votre DOM.
Et ce modèle nécessite que les données soient obtenues à partir de votre composant afin que
puisse rendre des parties du contenu de votre modèle et
en conséquence dans le DOM de votre page Web.
Maintenant, si vous n'aviez pas le luxe d'un framework comme Angular,
vous devez traiter tous les détails sur la façon dont
les données circulent du site d'application vers le DOM.
Et comment les événements d'interaction utilisateur qui ont provoqué dans
le DOM seront renvoyés à votre application.
Heureusement, avec le cadre fonctionne comme Angular,
ils supportent tous ces comportements intrinsèquement.
Maintenant, nous avons déjà vu une utilisation du flux de données d'une propriété de composants
vers le modèle dans les exercices précédents.
Où nous avons utilisé les accolades doubles pour fournir des informations que
provient d'une variable dans le code TypeScript de votre composant, à votre modèle.
Nous allons regarder d'autres façons, et
puis aussi dans l'exercice qui suit, nous allons utiliser ce,
pour modifier l'application angulaire que nous avons développé jusqu'à présent.
Ce que nous avons parlé, jusqu'à présent, est la liaison de données,
un mécanisme de coordination du flux d'informations entre le modèle et
le composant, ou entre le DOM et le composant.
Au niveau du composant, c'est une sorte de propriété ou
une méthode qui doit être fournie au modèle ou invoquée à partir du DOM.
Ou du côté du modèle, il peut s'agir de certaines informations
qui sont requises par le modèle pour être rendu dans le DOM ou
même à partir du DOM capturé et renvoyé à votre composant.
Donc, tout cela nécessite que les données circulant du composant vers
le ou les événements qui sont rassemblés à partir du DOM ou
soient renvoyées à votre composant pour qu'il agisse sur ces événements.
Maintenant, cela peut être facilement géré dans le cadre angulaire en utilisant quatre types différents de flux d'informations
que nous allons résumer dans la diapositive suivante.
En revenant à l'interaction entre le composant et le modèle,
nous avons déjà vu le premier type d'interaction entre le composant et
le modèle où la valeur d'une propriété coulait dans le modèle.
Nous avons donc vu l'utilisation du nom du plat,
la description du plat, les détails du commentaire du plat et ainsi
sur être fourni afin de rendre des informations dans votre modèle.
C'est donc là que nous utilisions les doubles accolades pour joindre le fait que
une valeur de votre composant est utilisée dans votre modèle.
Un autre type de flux d'informations que vous verrez est où
vous spécifiez une sorte de propriété associée à une balise entre crochets.
Et puis attribuez-le à la valeur de l'une des propriétés de votre composant.
Ce genre d'approche que nous verrons dans l'exercice qui suit
juste après cette conférence.
Donc ici, nous spécifions quelque chose entre crochets.
Alors attention à
un exemple de cela dans l'exercice où je vais en discuter plus à ce sujet.
De même, si vous avez un événement généré près de DOM,
cet événement peut entraîner l'appel à un gestionnaire ou
une méthode dans votre composant qui prendra soin de gérer cet événement.
Donc, les méthodes qui vont être invoquées par
les événements de votre DOM sont appelés gestionnaires.
Donc, le handle n'est rien mais, comme je l'ai dit une méthode, qui pourrait aussi
être passé dans un paramètre à l'intérieur des méthodes de gestionnaire là-bas.
Plus tard, lorsque nous regardons les formulaires, nous verrons une liaison de données bidirectionnelle.
Donc tous les trois que nous avons vus jusqu'à présent, le flux de la valeur de
le composant au template ou la propriété étant affectée à une valeur ou
l'événement étant affecté à un gestionnaire pour gérer l'événement.
Tous ces éléments sont ce que nous appelons des liaisons de données à sens unique parce que
ils ne circulent que dans une direction.
Vous pouvez également avoir un flux bidirectionnel où vous pouvez également le voir
dans la syntaxe que vous spécifiez avec des crochets.
Et puis enfermé à l'intérieur avec des parenthèses standard.
A l'intérieur, vous spécifierez quelque chose comme un ngModel.
Vous verrez l'utilisation de ceci quand il se forme plus tard dans le module suivant.
C'est donc là que vous allez assigner une propriété à cela.
Donc, dans ce cas, le flux d'information est bidirectionnel.
Donc, tout changement dans votre DOM sera reflété dans votre propriété et
le composant.
Toute modification de la propriété du composant sera reflétée dans le DOM.
Notez la syntaxe spécifique que nous utilisons pour
spécifiant le ngModel dans cet exemple ici.
Nous utilisons un crochet carré et à l'intérieur que nous utilisons la parenthèse standard là-dedans.
Permettez-moi maintenant de résumer ce que nous venons d'apprendre sur
la liaison de données dans la diapositive précédente dans ce tableau.
Donc, dans ce tableau, nous montrons les différentes façons d'utiliser la liaison de données.
Liaison de données unidirectionnelle de la source de données à la cible de vue donc
du composant au DOM,
nous utilisons une expression double accolade à l'intérieur.
C'est ce que nous appelons Interpolation comme exemple dont
serait le nom du plat, enfermé à l'intérieur des doubles accolades comme nous l'avons vu,
utilisé dans les exercices, dans le module précédent.
Ensuite, nous avons, le deuxième type où vous enfermez la cible
à l'intérieur d'un crochet carré, puis l'assignez à une expression sur le côté droit.
Ces expressions peuvent être des expressions JavaScript avec certaines limitations.
Les exemples que nous verrons normalement seraient
utilisant une propriété de l'une des classes là-bas.
Donc, c'est ce que nous avons appelé un attribut de propriété, et
exemple dont vous verrez dans l'exercice qui suit cette conférence.
Où vous verrez l'utilisation d'un plat, enfermé à l'intérieur d'un crochet carré,
étant assimilé à un SelectedDish, qui est une variable déclarée à l'intérieur d'un composant.
Cela peut également être exprimé en utilisant une bind-target,
une façon d'exprimer la même chose.
Donc les deux, si vous placez une cible entre crochets ou bind-target.
Ainsi, par exemple, vous pouvez voir bind-dish.
Donc, quelle que soit la façon dont vous exprimez cela, les deux se réfèrent à la même chose.
Donc, l'attribut de propriété étant spécifié ou le style de classe spécifié.
Maintenant, le flux unidirectionnel d'informations de la cible de vue à
la source de données est généralement exprimé avec la cible enfermée
entre parenthèses ici ou peut également être exprimé comme sur la cible.
Et à droite serait une déclaration.
Une instruction pourrait être une sorte d'expression JavaScript typiquement
serait dans l'invocation d'une méthode à l'intérieur d'un composant.
Eh bien, vous verrez un exemple dans l'exercice qui suit où
vous auriez cliqué à l'intérieur des parenthèses et affecté à onSelect.
Quelle est une méthode décrite à l'intérieur d'une classe
de composant là avec un paramètre plat étant fourni à cette méthode là-bas.
La liaison de données bidirectionnelle comme nous l'avons vu serait avec squire et parenthèses,
squire parenthèses et parenthèses qui est assimilée à une expression.
Nous verrons la liaison de données bidirectionnelles comme un ensemble avec des formes un peu plus tard où
vous utiliserez quelque chose comme un ngModel, enfermé à l'intérieur des crochets et
parenthèses, assimilé à quelque chose comme dish.name.
qui relie l'élément de formulaire à une propriété de
un objet JavaScript, dans notre composant.
Vous pouvez également l'exprimer en tant que bindon-target.
Ce qui est une autre façon de dire la même chose.
Maintenant, cette liaison de données bidirectionnelle que nous faisons est parfois
joculairement appelée une banane dans une boîte.
Donc, si vous regardez les crochets avec la parenthèse à l'intérieur,
ça ressemble à une banane dans une boîte.
Donc, vous pouvez voir cela être utilisé dans une partie de la documentation ou
dans certains des blogs que vous pourriez lire sur Internet.
Élargissant davantage sur les cibles contraignantes que nous avons vues,
les cibles contraignantes sont les propriétés qui sont déclarées sur le côté gauche
de la déclaration contraignante de cette déclaration contraignante de données.
Typiquement, entre crochets ou entre parenthèses ou les deux.
Donc, le côté droit de l'expression de liaison est leurs sources de liaison,
donc qui sont généralement comme les propriétés d'un objet JavaScript, ou
une variable, ou une expression que nous définissons sur le côté droit.
Si vous définissez des propriétés cibles associées à la sélection d'un composant.
C'est une façon de transmettre des informations dans un composant,
ou de renvoyer des informations d'un composant à un autre.
Ainsi, cela facilite la communication entre les composants.
Donc, vous verrez l'utilisation d'un décorateur comme @Input associé à
un moyen d'envoyer des informations d'un composant à un autre composant.
Nous verrons un exemple de cette utilisation dans l'exercice
qui suit cette conférence ici.
De même, vous pouvez utiliser le décorateur Output pour spécifier un événement
d'un composant qui est transmis à un autre composant.
Ces deux usages sont donc utilisés efficacement pour communiquer entre les composants.
[MUSIQUE]