1
00:00:00,000 --> 00:00:04,711
[MUSIC]

2
00:00:04,711 --> 00:00:06,798
Si vous avez un site web statique,

3
00:00:06,798 --> 00:00:11,735
alors vous avez toutes les données dont vous avez besoin pour construire votre site web.

4
00:00:11,735 --> 00:00:17,790
Et il sera créé une fois et votre site Web est prêt à partir.

5
00:00:17,790 --> 00:00:23,208
Mais de nombreux sites web de nos jours sont pilotés par des données provenant du backend.

6
00:00:23,208 --> 00:00:27,721
Votre application web récupère les données d'un serveur backend et

7
00:00:27,721 --> 00:00:32,667
les utilise pour mettre en page dynamiquement le contenu de votre site Web, ou

8
00:00:32,667 --> 00:00:35,474
même mettre à jour le contenu de votre site Web.

9
00:00:35,474 --> 00:00:40,090
Donc, cela nécessite que les données circulent du backend à

10
00:00:40,090 --> 00:00:43,410
votre application web vers le DOM.

11
00:00:43,410 --> 00:00:49,161
Et toute interaction de l'utilisateur sur le DOM doit être transmise à votre application web.

12
00:00:49,161 --> 00:00:54,211
Cela nécessite donc la communication entre le DOM et

13
00:00:54,211 --> 00:00:59,920
votre composant dans le cadre angulaire par exemple.

14
00:00:59,920 --> 00:01:03,268
Regardons comment cela se passe dans le cadre angulaire et

15
00:01:03,268 --> 00:01:04,880
avec un peu plus de détails.

16
00:01:06,900 --> 00:01:11,420
Ce que nous avons appris jusqu'à présent, c'est comment un composant est préparé.

17
00:01:11,420 --> 00:01:17,129
Nous avons donc vu que le composant a deux parties principales, le fichier dactylographié

18
00:01:17,129 --> 00:01:24,380
où l'architecture du composant est définie, et les propriétés.

19
00:01:24,380 --> 00:01:29,480
Et les méthodes de et puis vous avez le modèle qui

20
00:01:29,480 --> 00:01:34,430
définit comment le contenu est disposé, et ajouté dans le DOM.

21
00:01:34,430 --> 00:01:38,410
Donc, le modèle est celui qui va être fourni par un composant à

22
00:01:38,410 --> 00:01:41,640
occuper une partie de votre page Web.

23
00:01:41,640 --> 00:01:45,870
Ainsi, le modèle forme le support de communication pour votre DOM.

24
00:01:45,870 --> 00:01:52,210
Et ce modèle nécessite que les données soient obtenues à partir de votre composant afin que

25
00:01:53,450 --> 00:02:00,040
puisse rendre des parties du contenu de votre modèle et

26
00:02:00,040 --> 00:02:04,105
en conséquence dans le DOM de votre page Web.

27
00:02:05,250 --> 00:02:11,662
Maintenant, si vous n'aviez pas le luxe d'un framework comme Angular,

28
00:02:11,662 --> 00:02:16,442
vous devez traiter tous les détails sur la façon dont

29
00:02:16,442 --> 00:02:21,586
les données circulent du site d'application vers le DOM.

30
00:02:21,586 --> 00:02:25,696
Et comment les événements d'interaction utilisateur qui ont provoqué dans

31
00:02:25,696 --> 00:02:29,980
le DOM seront renvoyés à votre application.

32
00:02:29,980 --> 00:02:33,851
Heureusement, avec le cadre fonctionne comme Angular,

33
00:02:33,851 --> 00:02:38,520
ils supportent tous ces comportements intrinsèquement.

34
00:02:38,520 --> 00:02:44,047
Maintenant, nous avons déjà vu une utilisation du flux de données d'une propriété de composants

35
00:02:44,047 --> 00:02:48,504
vers le modèle dans les exercices précédents.

36
00:02:48,504 --> 00:02:54,433
Où nous avons utilisé les accolades doubles pour fournir des informations que

37
00:02:54,433 --> 00:03:02,050
provient d'une variable dans le code TypeScript de votre composant, à votre modèle.

38
00:03:02,050 --> 00:03:03,830
Nous allons regarder d'autres façons, et

39
00:03:03,830 --> 00:03:08,670
puis aussi dans l'exercice qui suit, nous allons utiliser ce,

40
00:03:08,670 --> 00:03:14,370
pour modifier l'application angulaire que nous avons développé jusqu'à présent.

41
00:03:15,570 --> 00:03:18,975
Ce que nous avons parlé, jusqu'à présent, est la liaison de données,

42
00:03:18,975 --> 00:03:23,972
un mécanisme de coordination du flux d'informations entre le modèle et

43
00:03:23,972 --> 00:03:27,468
le composant, ou entre le DOM et le composant.

44
00:03:27,468 --> 00:03:30,627
Au niveau du composant, c'est une sorte de propriété ou

45
00:03:30,627 --> 00:03:35,215
une méthode qui doit être fournie au modèle ou invoquée à partir du DOM.

46
00:03:35,215 --> 00:03:38,269
Ou du côté du modèle, il peut s'agir de certaines informations

47
00:03:38,269 --> 00:03:41,890
qui sont requises par le modèle pour être rendu dans le DOM ou

48
00:03:41,890 --> 00:03:45,905
même à partir du DOM capturé et renvoyé à votre composant.

49
00:03:45,905 --> 00:03:50,886
Donc, tout cela nécessite que les données circulant du composant vers

50
00:03:50,886 --> 00:03:55,868
le ou les événements qui sont rassemblés à partir du DOM ou

51
00:03:55,868 --> 00:04:01,735
soient renvoyées à votre composant pour qu'il agisse sur ces événements.

52
00:04:01,735 --> 00:04:07,967
Maintenant, cela peut être facilement géré dans le cadre angulaire en utilisant quatre types différents de flux d'informations

53
00:04:07,967 --> 00:04:14,850
que nous allons résumer dans la diapositive suivante.

54
00:04:14,850 --> 00:04:19,150
En revenant à l'interaction entre le composant et le modèle,

55
00:04:19,150 --> 00:04:22,820
nous avons déjà vu le premier type d'interaction entre le composant et

56
00:04:22,820 --> 00:04:27,800
le modèle où la valeur d'une propriété coulait dans le modèle.

57
00:04:27,800 --> 00:04:31,130
Nous avons donc vu l'utilisation du nom du plat,

58
00:04:31,130 --> 00:04:35,720
la description du plat, les détails du commentaire du plat et ainsi

59
00:04:35,720 --> 00:04:40,910
sur être fourni afin de rendre des informations dans votre modèle.

60
00:04:40,910 --> 00:04:47,210
C'est donc là que nous utilisions les doubles accolades pour joindre le fait que

61
00:04:47,210 --> 00:04:53,030
une valeur de votre composant est utilisée dans votre modèle.

62
00:04:53,030 --> 00:04:58,160
Un autre type de flux d'informations que vous verrez est où

63
00:04:58,160 --> 00:05:04,930
vous spécifiez une sorte de propriété associée à une balise entre crochets.

64
00:05:04,930 --> 00:05:11,670
Et puis attribuez-le à la valeur de l'une des propriétés de votre composant.

65
00:05:12,790 --> 00:05:17,010
Ce genre d'approche que nous verrons dans l'exercice qui suit

66
00:05:17,010 --> 00:05:19,210
juste après cette conférence.

67
00:05:19,210 --> 00:05:22,160
Donc ici, nous spécifions quelque chose entre crochets.

68
00:05:22,160 --> 00:05:23,100
Alors attention à

69
00:05:23,100 --> 00:05:28,880
un exemple de cela dans l'exercice où je vais en discuter plus à ce sujet.

70
00:05:28,880 --> 00:05:32,640
De même, si vous avez un événement généré près de DOM,

71
00:05:32,640 --> 00:05:36,840
cet événement peut entraîner l'appel à un gestionnaire ou

72
00:05:36,840 --> 00:05:42,280
une méthode dans votre composant qui prendra soin de gérer cet événement.

73
00:05:42,280 --> 00:05:45,310
Donc, les méthodes qui vont être invoquées par

74
00:05:45,310 --> 00:05:50,220
les événements de votre DOM sont appelés gestionnaires.

75
00:05:50,220 --> 00:05:55,670
Donc, le handle n'est rien mais, comme je l'ai dit une méthode, qui pourrait aussi

76
00:05:55,670 --> 00:06:01,039
être passé dans un paramètre à l'intérieur des méthodes de gestionnaire là-bas.

77
00:06:02,790 --> 00:06:09,620
Plus tard, lorsque nous regardons les formulaires, nous verrons une liaison de données bidirectionnelle.

78
00:06:09,620 --> 00:06:16,190
Donc tous les trois que nous avons vus jusqu'à présent, le flux de la valeur de

79
00:06:16,190 --> 00:06:20,910
le composant au template ou la propriété étant affectée à une valeur ou

80
00:06:20,910 --> 00:06:26,380
l'événement étant affecté à un gestionnaire pour gérer l'événement.

81
00:06:26,380 --> 00:06:29,780
Tous ces éléments sont ce que nous appelons des liaisons de données à sens unique parce que

82
00:06:31,010 --> 00:06:33,240
ils ne circulent que dans une direction.

83
00:06:33,240 --> 00:06:37,810
Vous pouvez également avoir un flux bidirectionnel où vous pouvez également le voir

84
00:06:37,810 --> 00:06:41,200
dans la syntaxe que vous spécifiez avec des crochets.

85
00:06:41,200 --> 00:06:44,590
Et puis enfermé à l'intérieur avec des parenthèses standard.

86
00:06:44,590 --> 00:06:47,772
A l'intérieur, vous spécifierez quelque chose comme un ngModel.

87
00:06:47,772 --> 00:06:52,575
Vous verrez l'utilisation de ceci quand il se forme plus tard dans le module suivant.

88
00:06:52,575 --> 00:06:55,215
C'est donc là que vous allez assigner une propriété à cela.

89
00:06:55,215 --> 00:06:58,675
Donc, dans ce cas, le flux d'information est bidirectionnel.

90
00:06:58,675 --> 00:07:03,789
Donc, tout changement dans votre DOM sera reflété dans votre propriété et

91
00:07:03,789 --> 00:07:05,029
le composant.

92
00:07:05,029 --> 00:07:08,785
Toute modification de la propriété du composant sera reflétée dans le DOM.

93
00:07:08,785 --> 00:07:12,700
Notez la syntaxe spécifique que nous utilisons pour

94
00:07:12,700 --> 00:07:15,918
spécifiant le ngModel dans cet exemple ici.

95
00:07:15,918 --> 00:07:21,100
Nous utilisons un crochet carré et à l'intérieur que nous utilisons la parenthèse standard là-dedans.

96
00:07:22,390 --> 00:07:25,640
Permettez-moi maintenant de résumer ce que nous venons d'apprendre sur

97
00:07:25,640 --> 00:07:30,620
la liaison de données dans la diapositive précédente dans ce tableau.

98
00:07:30,620 --> 00:07:36,890
Donc, dans ce tableau, nous montrons les différentes façons d'utiliser la liaison de données.

99
00:07:36,890 --> 00:07:41,610
Liaison de données unidirectionnelle de la source de données à la cible de vue donc

100
00:07:41,610 --> 00:07:45,370
du composant au DOM,

101
00:07:45,370 --> 00:07:51,720
nous utilisons une expression double accolade à l'intérieur.

102
00:07:51,720 --> 00:07:55,970
C'est ce que nous appelons Interpolation comme exemple dont

103
00:07:55,970 --> 00:08:01,080
serait le nom du plat, enfermé à l'intérieur des doubles accolades comme nous l'avons vu,

104
00:08:01,080 --> 00:08:06,030
utilisé dans les exercices, dans le module précédent.

105
00:08:06,030 --> 00:08:11,345
Ensuite, nous avons, le deuxième type où vous enfermez la cible

106
00:08:11,345 --> 00:08:17,385
à l'intérieur d'un crochet carré, puis l'assignez à une expression sur le côté droit.

107
00:08:17,385 --> 00:08:22,450
Ces expressions peuvent être des expressions JavaScript avec certaines limitations.

108
00:08:22,450 --> 00:08:25,600
Les exemples que nous verrons normalement seraient

109
00:08:25,600 --> 00:08:30,960
utilisant une propriété de l'une des classes là-bas.

110
00:08:30,960 --> 00:08:34,390
Donc, c'est ce que nous avons appelé un attribut de propriété, et

111
00:08:34,390 --> 00:08:38,878
exemple dont vous verrez dans l'exercice qui suit cette conférence.

112
00:08:38,878 --> 00:08:44,333
Où vous verrez l'utilisation d'un plat, enfermé à l'intérieur d'un crochet carré,

113
00:08:44,333 --> 00:08:51,650
étant assimilé à un SelectedDish, qui est une variable déclarée à l'intérieur d'un composant.

114
00:08:51,650 --> 00:08:56,770
Cela peut également être exprimé en utilisant une bind-target,

115
00:08:56,770 --> 00:08:58,680
une façon d'exprimer la même chose.

116
00:08:58,680 --> 00:09:04,630
Donc les deux, si vous placez une cible entre crochets ou bind-target.

117
00:09:04,630 --> 00:09:07,550
Ainsi, par exemple, vous pouvez voir bind-dish.

118
00:09:07,550 --> 00:09:11,820
Donc, quelle que soit la façon dont vous exprimez cela, les deux se réfèrent à la même chose.

119
00:09:11,820 --> 00:09:17,528
Donc, l'attribut de propriété étant spécifié ou le style de classe spécifié.

120
00:09:17,528 --> 00:09:22,367
Maintenant, le flux unidirectionnel d'informations de la cible de vue à

121
00:09:22,367 --> 00:09:27,401
la source de données est généralement exprimé avec la cible enfermée

122
00:09:27,401 --> 00:09:32,780
entre parenthèses ici ou peut également être exprimé comme sur la cible.

123
00:09:32,780 --> 00:09:36,610
Et à droite serait une déclaration.

124
00:09:36,610 --> 00:09:41,523
Une instruction pourrait être une sorte d'expression JavaScript typiquement

125
00:09:41,523 --> 00:09:46,532
serait dans l'invocation d'une méthode à l'intérieur d'un composant.

126
00:09:46,532 --> 00:09:51,668
Eh bien, vous verrez un exemple dans l'exercice qui suit où

127
00:09:51,668 --> 00:09:57,611
vous auriez cliqué à l'intérieur des parenthèses et affecté à onSelect.

128
00:09:57,611 --> 00:10:02,700
Quelle est une méthode décrite à l'intérieur d'une classe

129
00:10:02,700 --> 00:10:10,540
de composant là avec un paramètre plat étant fourni à cette méthode là-bas.

130
00:10:10,540 --> 00:10:15,920
La liaison de données bidirectionnelle comme nous l'avons vu serait avec squire et parenthèses,

131
00:10:15,920 --> 00:10:21,320
squire parenthèses et parenthèses qui est assimilée à une expression.

132
00:10:21,320 --> 00:10:26,380
Nous verrons la liaison de données bidirectionnelles comme un ensemble avec des formes un peu plus tard où

133
00:10:26,380 --> 00:10:31,843
vous utiliserez quelque chose comme un ngModel, enfermé à l'intérieur des crochets et

134
00:10:31,843 --> 00:10:35,647
parenthèses, assimilé à quelque chose comme dish.name.

135
00:10:35,647 --> 00:10:40,438
qui relie l'élément de formulaire à une propriété de

136
00:10:40,438 --> 00:10:44,640
un objet JavaScript, dans notre composant.

137
00:10:46,260 --> 00:10:50,240
Vous pouvez également l'exprimer en tant que bindon-target.

138
00:10:50,240 --> 00:10:52,401
Ce qui est une autre façon de dire la même chose.

139
00:10:52,401 --> 00:10:56,866
Maintenant, cette liaison de données bidirectionnelle que nous faisons est parfois

140
00:10:56,866 --> 00:11:00,630
joculairement appelée une banane dans une boîte.

141
00:11:00,630 --> 00:11:04,630
Donc, si vous regardez les crochets avec la parenthèse à l'intérieur,

142
00:11:04,630 --> 00:11:06,110
ça ressemble à une banane dans une boîte.

143
00:11:06,110 --> 00:11:11,550
Donc, vous pouvez voir cela être utilisé dans une partie de la documentation ou

144
00:11:11,550 --> 00:11:14,580
dans certains des blogs que vous pourriez lire sur Internet.

145
00:11:15,970 --> 00:11:19,920
Élargissant davantage sur les cibles contraignantes que nous avons vues,

146
00:11:19,920 --> 00:11:23,720
les cibles contraignantes sont les propriétés qui sont déclarées sur le côté gauche

147
00:11:23,720 --> 00:11:27,310
de la déclaration contraignante de cette déclaration contraignante de données.

148
00:11:27,310 --> 00:11:33,280
Typiquement, entre crochets ou entre parenthèses ou les deux.

149
00:11:33,280 --> 00:11:40,850
Donc, le côté droit de l'expression de liaison est leurs sources de liaison,

150
00:11:40,850 --> 00:11:45,670
donc qui sont généralement comme les propriétés d'un objet JavaScript, ou

151
00:11:45,670 --> 00:11:51,930
une variable, ou une expression que nous définissons sur le côté droit.

152
00:11:51,930 --> 00:11:58,970
Si vous définissez des propriétés cibles associées à la sélection d'un composant.

153
00:11:58,970 --> 00:12:03,140
C'est une façon de transmettre des informations dans un composant,

154
00:12:03,140 --> 00:12:07,320
ou de renvoyer des informations d'un composant à un autre.

155
00:12:07,320 --> 00:12:12,490
Ainsi, cela facilite la communication entre les composants.

156
00:12:12,490 --> 00:12:18,258
Donc, vous verrez l'utilisation d'un décorateur comme @Input associé à

157
00:12:18,258 --> 00:12:24,442
un moyen d'envoyer des informations d'un composant à un autre composant.

158
00:12:24,442 --> 00:12:29,194
Nous verrons un exemple de cette utilisation dans l'exercice

159
00:12:29,194 --> 00:12:32,690
qui suit cette conférence ici.

160
00:12:32,690 --> 00:12:37,600
De même, vous pouvez utiliser le décorateur Output pour spécifier un événement

161
00:12:37,600 --> 00:12:42,070
d'un composant qui est transmis à un autre composant.

162
00:12:42,070 --> 00:12:49,472
Ces deux usages sont donc utilisés efficacement pour communiquer entre les composants.

163
00:12:49,472 --> 00:12:52,759
[MUSIQUE]