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

2
00:00:04,586 --> 00:00:08,713
Permettez-moi maintenant de vous donner un aperçu rapide de Angular et

3
00:00:08,713 --> 00:00:12,340
sa relation avec le programme réactif,

4
00:00:12,340 --> 00:00:16,780
comment Angular utilise-t-il la programmation réactive.

5
00:00:16,780 --> 00:00:21,988
En particulier, la bibliothèque RxJS et comment elle est exploitée par

6
00:00:21,988 --> 00:00:28,174
Angular pour fournir un moyen réactif d'écrire des applications Angular.

7
00:00:28,174 --> 00:00:33,199
Maintenant, ce que nous présentons dans cette conférence est un aperçu très rapide de

8
00:00:33,199 --> 00:00:38,426
le concept général de programmation réactive, observables,

9
00:00:38,426 --> 00:00:43,930
le modèle observé et comment il est appliqué dans Angular.

10
00:00:43,930 --> 00:00:47,280
La programmation réactive en soi est un très vaste sujet

11
00:00:48,460 --> 00:00:52,100
qui ne peut être traité en dix minutes.

12
00:00:53,240 --> 00:00:54,410
La programmation réactive,

13
00:00:54,410 --> 00:00:59,800
si j'ai besoin de le couvrir en détail deviendra un cours entier à part entière.

14
00:00:59,800 --> 00:01:01,421
Et malheureusement,

15
00:01:01,421 --> 00:01:07,372
, nous n'avons pas le temps d'intégrer un cours entier dans ce cours particulier.

16
00:01:07,372 --> 00:01:12,718
Donc, étant donné que nous sommes principalement intéressés par la façon dont Angular exploite la programmation réactive

17
00:01:12,718 --> 00:01:18,066
pour nous permettre de doubler les applications Angular,

18
00:01:18,066 --> 00:01:21,590
donc nous allons nous concentrer sur cet aspect.

19
00:01:21,590 --> 00:01:22,455
Mais en chemin,

20
00:01:22,455 --> 00:01:28,340
, je vais vous présenter rapidement les différents concepts dans ce domaine général.

21
00:01:28,340 --> 00:01:30,720
Si vous vous intéressez à la programmation réactive,

22
00:01:30,720 --> 00:01:36,100
Je vous conseille fortement de poursuivre certains des liens que j'ai fournis et

23
00:01:36,100 --> 00:01:40,240
ressources supplémentaires pour cette leçon particulière.

24
00:01:40,240 --> 00:01:44,090
Vous avez accès à beaucoup de matériel là-bas, mais

25
00:01:44,090 --> 00:01:48,220
nous vous donnerons une solide base dans la programmation réactive.

26
00:01:48,220 --> 00:01:51,713
Mais dans ce cours, à partir de ce stade,

27
00:01:51,713 --> 00:01:57,448
, nous allons voir comment Angular exploite le paradigme de programmation réactive pour

28
00:01:57,448 --> 00:02:00,150
concevoir des applications Angular.

29
00:02:00,150 --> 00:02:04,818
Nous ne allons pas seulement nous limiter à cette leçon, mais

30
00:02:04,818 --> 00:02:10,266
toutes les leçons suivantes verront également Utilisé de l'observable et

31
00:02:10,266 --> 00:02:16,220
le modèle d'observation et comment nous écrivons des applications réactives en angulaire.

32
00:02:18,080 --> 00:02:22,800
Toute la discussion sur la programmation réactive tourne autour

33
00:02:22,800 --> 00:02:27,770
ce modèle particulier d'ingénierie logicielle appelé comme modèle observable.

34
00:02:27,770 --> 00:02:31,970
Vous vous souvenez du gang de quatre que je vous ai mentionné dans l'une des précédentes conférences

35
00:02:31,970 --> 00:02:35,690
où nous avons discuté du framework de contrôleur de vue modèle et

36
00:02:35,690 --> 00:02:38,140
le framework de modèle de vue modèle.

37
00:02:38,140 --> 00:02:43,246
Le même gang de quatre livres contient une partie du modèle que

38
00:02:43,246 --> 00:02:49,616
a été utilisé avec succès dans le modèle de programmation réactive.

39
00:02:49,616 --> 00:02:53,570
Le modèle d'observateur tourne autour des observables.

40
00:02:53,570 --> 00:02:58,948
Donc vous avez des observables, dont le comportement peut être observé par des observateurs.

41
00:02:58,948 --> 00:03:02,200
C'est pourquoi cela s'appelle le modèle d'observateur.

42
00:03:02,200 --> 00:03:07,180
Vous déclarez certains objets comme observables ou sujets et

43
00:03:07,180 --> 00:03:12,060
ces observables seront observés par des observateurs.

44
00:03:12,060 --> 00:03:15,190
Maintenant, les observateurs eux-mêmes s'inscriront à

45
00:03:16,280 --> 00:03:19,400
regarder les changements dans l'observable et

46
00:03:19,400 --> 00:03:24,010
l'observable avertira les observateurs chaque fois que des changements se produisent.

47
00:03:24,010 --> 00:03:29,781
Donc, dans ce modèle d'observateur, la façon dont ces observateurs vont souscrire

48
00:03:29,781 --> 00:03:35,165
à l'observable ou s'inscrire auprès de l'observable.

49
00:03:35,165 --> 00:03:40,013
Donc, c'est ainsi que l'observable sait quels observateurs sont intéressés par

50
00:03:40,013 --> 00:03:42,430
tout changement dans son état.

51
00:03:42,430 --> 00:03:46,250
Ainsi, chaque fois qu'un observable observable disent,

52
00:03:46,250 --> 00:03:51,830
changement dans son état, il informera immédiatement tous les observateurs

53
00:03:51,830 --> 00:04:02,170
du changement d'état et les observateurs pourront ensuite prendre des mesures basées sur cette notification du changement dans l'observable.

54
00:04:02,170 --> 00:04:06,185
Le modèle d'observateur a été utilisé de manière très efficace dans de nombreuses circonstances

55
00:04:06,185 --> 00:04:07,212
différentes.

56
00:04:07,212 --> 00:04:12,600
Et en effet, le paradigme de programmation réactive est basé autour de lui.

57
00:04:12,600 --> 00:04:15,990
Donc, la question qui vous vient immédiatement à l'esprit est

58
00:04:15,990 --> 00:04:18,280
pourquoi parlons-nous des observables ?

59
00:04:18,280 --> 00:04:21,730
Quel est l'intérêt particulier pour les observables ?

60
00:04:21,730 --> 00:04:26,161
Observer pattern est une façon d'écrire des applications logicielles.

61
00:04:26,161 --> 00:04:29,760
Donc, cela est basé autour de Streams.

62
00:04:29,760 --> 00:04:33,290
Donc, vous avez des données qui écoulent votre application.

63
00:04:33,290 --> 00:04:37,826
Ces données peuvent être visualisées comme un flux de valeurs qui circule dans votre application

64
00:04:37,826 --> 00:04:38,879
.

65
00:04:38,879 --> 00:04:44,158
Ainsi, le flux est le canal principal autour duquel les observables et

66
00:04:44,158 --> 00:04:47,380
observables sont conçus.

67
00:04:47,380 --> 00:04:51,007
Donc, quels flux vous pouvez vous abonner à ces flux.

68
00:04:51,007 --> 00:04:55,762
Et chaque fois qu'une valeur arrive sur le flux, vous prenez cette valeur et

69
00:04:55,762 --> 00:04:58,400
, alors vous pouvez réagir à cette valeur.

70
00:04:58,400 --> 00:05:02,430
Donc, pour pouvoir réagir à cette valeur, vous devez vous abonner à ce flux ou

71
00:05:02,430 --> 00:05:04,710
vous devez vous abonner à l'observable.

72
00:05:04,710 --> 00:05:08,860
L'observable continuera fréquemment à émettre des valeurs.

73
00:05:08,860 --> 00:05:13,059
Et quand vous voyez ces valeurs, l'observateur peut réagir à celles-ci.

74
00:05:13,059 --> 00:05:16,413
Maintenant, cela signifie aussi que lorsque vous n'êtes plus intéressé,

75
00:05:16,413 --> 00:05:19,660
vous pouvez vous désabonner d'un observable.

76
00:05:19,660 --> 00:05:23,653
Tu peux dire, je ne suis plus intéressé à te regarder et ensuite disparaître.

77
00:05:23,653 --> 00:05:28,794
Ainsi, le modèle observable vous permet d'observer périodiquement les changements,

78
00:05:28,794 --> 00:05:34,170
si vous voulez, puis arrêtez d'observer quand vous n'êtes plus intéressé.

79
00:05:34,170 --> 00:05:38,855
Donc ce genre de paradigme vous permet de concevoir vos applications logicielles

80
00:05:38,855 --> 00:05:43,135
d'une manière très intéressante, d'une manière très intuitive.

81
00:05:43,135 --> 00:05:45,435
Mais pour pouvoir utiliser cette approche,

82
00:05:45,435 --> 00:05:48,513
vous devez contourner cette approche.

83
00:05:48,513 --> 00:05:55,455
Tout comme nous l'avons vu avec le modèle de rappel ou nous avons vu avec l'utilisation de promesses.

84
00:05:55,455 --> 00:06:01,740
Observables est une autre façon de concevoir des applications.

85
00:06:01,740 --> 00:06:06,605
Donc, un observable par lui-même sera très paresseux et il va juste traîner là.

86
00:06:06,605 --> 00:06:10,360
Donc, vous pouvez créer un observable et ensuite laisser là.

87
00:06:10,360 --> 00:06:12,496
L'observable devient actif ou

88
00:06:12,496 --> 00:06:16,777
il devient chaud quand quelqu'un commence à s'abonner à l'observateur.

89
00:06:16,777 --> 00:06:21,380
Donc, à ce moment-là, l'observateur se lance dans l'action et commence à modifier les valeurs.

90
00:06:21,380 --> 00:06:25,515
Donc, si au moins un observateur est confié dans l'observable,

91
00:06:25,515 --> 00:06:29,000
alors l'observable commencera à émettre des valeurs.

92
00:06:29,000 --> 00:06:36,010
Si personne n'est confié, observable retournera dans sa coquille et y restera.

93
00:06:36,010 --> 00:06:38,058
Donc, vous pouvez y penser de cette façon.

94
00:06:38,058 --> 00:06:42,231
Donc, si cette image mentale vous aide à comprendre

95
00:06:42,231 --> 00:06:46,760
comment fonctionne le brevet d'observateur, alors qu'il en soit ainsi.

96
00:06:46,760 --> 00:06:51,939
Donc, cela vous aidera à regarder la façon dont nous concevons nos applications

97
00:06:51,939 --> 00:06:56,657
dans les exercices qui suivent, puis les leçons suivantes

98
00:06:56,657 --> 00:07:01,116
où nous examinons HTTP pris en charge Angular plus en détail.

99
00:07:04,490 --> 00:07:11,222
Un autre aspect des observables est le fait que l'annulation d'une demande précédente et

100
00:07:11,222 --> 00:07:16,172
puis réessayer est très simple avec les observables.

101
00:07:16,172 --> 00:07:20,660
La promesse que vous avez vue plus tôt, une fois que vous commencez à attendre une promesse,

102
00:07:20,660 --> 00:07:23,690
vous ne pouvez pas annuler, vous attendez.

103
00:07:23,690 --> 00:07:26,878
La promesse finira par résoudre ou échouer et

104
00:07:26,878 --> 00:07:31,907
alors vous devrez réagir peu importe ce que même si vous n'êtes plus intéressé.

105
00:07:31,907 --> 00:07:36,075
Mais avec un observable, si vous pouvez vendre votre abonnement,

106
00:07:36,075 --> 00:07:41,540
alors que ce qui se passe avec l'observable ne vous concerne pas du tout.

107
00:07:41,540 --> 00:07:45,019
Et donc vous n'avez rien à faire, si vous annulez votre abonnement.

108
00:07:45,019 --> 00:07:50,732
Donc, annuler et réessayer au cas où le procès précédent ne réussit pas

109
00:07:50,732 --> 00:07:55,599
est très simple avec les observables.

110
00:07:55,599 --> 00:08:01,710
Nous verrons certains de ces comportements plus en détail dans les exercices qui suivent.

111
00:08:03,050 --> 00:08:06,771
Cela nous amène à ce concept de programmation réactive.

112
00:08:06,771 --> 00:08:11,071
La programmation réactive est basée sur le modèle d'observateur et

113
00:08:11,071 --> 00:08:13,550
aussi un modèle itéré.

114
00:08:13,550 --> 00:08:14,243
Mais de toute façon,

115
00:08:14,243 --> 00:08:18,610
le modèle d'observateur est la caractéristique dominante d'une programmation réactive.

116
00:08:18,610 --> 00:08:22,670
Donc, dans la programmation réactive, nous sommes intéressés par les flux de données.

117
00:08:22,670 --> 00:08:25,780
Comment les données circulent dans votre application.

118
00:08:25,780 --> 00:08:29,450
Tout flux de données peut être traité comme un flux.

119
00:08:29,450 --> 00:08:34,510
Ainsi, ce flux de données peut propager des modifications dans votre application.

120
00:08:34,510 --> 00:08:37,940
Et pendant que les changements sont propagés à travers l'application,

121
00:08:39,140 --> 00:08:43,440
aux étapes intermédiaires, vous pouvez même prendre un flux particulier,

122
00:08:43,440 --> 00:08:46,860
le modifier et créer un autre flux sortant de là.

123
00:08:46,860 --> 00:08:51,980
C'est donc ce qu'un modèle observable nous permet de dessiner.

124
00:08:51,980 --> 00:08:58,000
Ainsi, tout le paradigme de programmation est construit autour de flux ou de flux de données.

125
00:08:58,000 --> 00:09:04,540
C'est donc une autre façon de chercher à résoudre votre problème.

126
00:09:04,540 --> 00:09:10,180
Et c'est pourquoi je souligne le fait que vous devez faire votre tête autour de

127
00:09:10,180 --> 00:09:17,120
comprendre comment le modèle réactif ou comment la programmation réactive est faite dans la pratique.

128
00:09:17,120 --> 00:09:20,810
Maintenant, vous entendez souvent des gens parler de quelque chose qu'on appelle la programmation réactive

129
00:09:20,810 --> 00:09:22,290
fonctionnelle.

130
00:09:22,290 --> 00:09:25,640
Si vous êtes familier avec le paradigme de programmation fonctionnelle.

131
00:09:25,640 --> 00:09:28,430
Mais plus la programmation réactive

132
00:09:28,430 --> 00:09:32,400
est ce que les gens font souvent référence à la programmation réactive fonctionnelle.

133
00:09:32,400 --> 00:09:35,670
Donc, l'intermariage de ces deux approches.

134
00:09:35,670 --> 00:09:40,340
Maintenant, vous verrez l'utilisation de certains d'entre eux avec Angular

135
00:09:40,340 --> 00:09:43,720
pendant que vous passez par ce cours particulier.

136
00:09:43,720 --> 00:09:46,010
Enfin, qu'en est-il de RxJS ?

137
00:09:46,010 --> 00:09:49,890
Quel rôle joue-t-il dans tout cet écosystème ?

138
00:09:49,890 --> 00:09:55,280
RxJS est une implémentation JavaScript du modèle observable et

139
00:09:55,280 --> 00:09:58,750
prend également en charge la programmation réactive.

140
00:09:58,750 --> 00:10:03,820
Donc, si vous deviez faire de la programmation réactive en JavaScript,

141
00:10:03,820 --> 00:10:07,820
alors vous tirez parti de la bibliothèque RxJS pour le faire.

142
00:10:07,820 --> 00:10:10,790
RxJS juste une telle implémentation.

143
00:10:10,790 --> 00:10:15,990
Il y en a quelques autres mais la raison pour laquelle nous sommes intéressés par RxJS en particulier

144
00:10:15,990 --> 00:10:20,860
dans ce cours est parce que Angular tire parti de RxJS pour

145
00:10:20,860 --> 00:10:23,880
son support pour la programmation réactive.

146
00:10:23,880 --> 00:10:26,190
Donc le RxJS est une bibliothèque.

147
00:10:26,190 --> 00:10:28,480
C'est une bibliothèque séparée qui est là.

148
00:10:28,480 --> 00:10:35,010
Vous pouvez utiliser RxJS à d'autres fins aussi, pas nécessairement liées à Angular.

149
00:10:35,010 --> 00:10:39,960
Il y a eu des applications qui ont été développées en utilisant RxJS en soi

150
00:10:39,960 --> 00:10:42,400
non liées à Angular.

151
00:10:42,400 --> 00:10:46,955
Mais dans ce cours, nous sommes intéressés par la façon dont RxJS se réunit avec

152
00:10:46,955 --> 00:10:52,480
l'Angular pour soutenir la programmation réactive dans Angular.

153
00:10:52,480 --> 00:10:57,790
Donc, il y a RxJS est une bibliothèque qui vous permet de faire de la programmation asynchrone.

154
00:10:57,790 --> 00:11:01,800
Nous avons parlé de programmation asynchrone qui promet plus tôt.

155
00:11:01,800 --> 00:11:06,300
Nous verrons une programmation asynchrone avec des rappels dans le cours de noeud.

156
00:11:06,300 --> 00:11:11,380
Et observables est une autre façon de regarder la programmation asynchrone

157
00:11:11,380 --> 00:11:16,530
, avec un programmeur piloté par événement.

158
00:11:16,530 --> 00:11:20,320
Donc, si vous êtes familier avec le paradigme de programmation axé sur les événements,

159
00:11:20,320 --> 00:11:24,230
RxJS s'intègre bien dans cet environnement.

160
00:11:25,970 --> 00:11:30,290
Le tout est construit autour de séquences observables.

161
00:11:30,290 --> 00:11:37,160
Et la bibliothèque RxJS vous fournit un type de noyau appelé Observable.

162
00:11:37,160 --> 00:11:39,810
Et autour de ce type de noyau, vous avez des types de satellites

163
00:11:39,810 --> 00:11:44,390
qui sont construits appelés observateurs, planificateurs et sujets.

164
00:11:44,390 --> 00:11:47,520
Tous ces éléments vous permettent de faire de la programmation réactive.

165
00:11:48,620 --> 00:11:54,445
De plus, RxJS supporte également tout un tas d'opérateurs.

166
00:11:55,745 --> 00:11:59,345
Supporte les opérateurs, les séparateurs, désolé.

167
00:11:59,345 --> 00:12:02,545
C'était un glissement de ma langue.

168
00:12:03,872 --> 00:12:06,642
RxJS prend en charge les opérateurs, les opérateurs

169
00:12:06,642 --> 00:12:11,292
qui sont inspirés par les opérateurs de tableau JavaScript.

170
00:12:11,292 --> 00:12:15,892
Si vous êtes familier avec les opérateurs de tableau JavaScript comme map alors

171
00:12:18,202 --> 00:12:22,232
les opérateurs RxJS vous sembleront très familiers.

172
00:12:22,232 --> 00:12:25,372
Vous pouvez traiter un observable et

173
00:12:25,372 --> 00:12:30,340
les valeurs qu'une image observable comme un tableau, c'est pourquoi beaucoup de

174
00:12:30,340 --> 00:12:36,170
les opérateurs de tableau trouvent leur chemin dans RxJS et la programmation réactive aussi.

175
00:12:36,170 --> 00:12:40,250
Ainsi, les utilisateurs cartographient, filtrent, réduisent et

176
00:12:40,250 --> 00:12:46,440
d'autres opérateurs de tableau trouveront également une place dans RxJS et la programmation réactive.

177
00:12:46,440 --> 00:12:51,890
Et c'est ce qui vous permet de gérer les événements asynchrones en tant que collections.

178
00:12:51,890 --> 00:12:55,092
Donc, quand vous voulez attendre

179
00:12:55,092 --> 00:12:59,770
un événement asynchrone, il sera similaire à s'abonner à un observable.

180
00:12:59,770 --> 00:13:03,684
Donc, quand cet observable émet la valeur, vous êtes prêt à attraper la valeur et

181
00:13:03,684 --> 00:13:05,550
ensuite agir en conséquence.

182
00:13:05,550 --> 00:13:07,960
Vous savez quand cette émission va avoir lieu.

183
00:13:07,960 --> 00:13:13,220
C'est donc la partie asynchrone qui entre en jeu avec l'utilisation de RxJS.

184
00:13:14,550 --> 00:13:19,480
Et comme je l'ai déjà mentionné, la raison pour laquelle nous sommes intéressés par RxJS est parce que

185
00:13:19,480 --> 00:13:22,750
Angular exploite la bibliothèque RxJS pour

186
00:13:23,900 --> 00:13:27,840
faisant son support pour la programmation réactive.

187
00:13:27,840 --> 00:13:31,080
Angular lui-même a un certain nombre d'observables construits,

188
00:13:31,080 --> 00:13:32,369
comme nous le verrons dans un court laps de temps.

189
00:13:33,430 --> 00:13:38,430
Lorsque vous entrez dans le monde de la programmation réactive, vous entendrez souvent des gens parler

190
00:13:38,430 --> 00:13:42,230
d'observables, puis vous entendrez des gens parler d'opérateurs et

191
00:13:42,230 --> 00:13:45,830
puis vous entendrez aussi des gens parler de diagrammes de marbre.

192
00:13:45,830 --> 00:13:49,290
Maintenant, les diagrammes en marbre sont un moyen de représenter

193
00:13:50,390 --> 00:13:53,730
la programmation réactive en utilisant des observables.

194
00:13:53,730 --> 00:13:55,710
Donc, si vous avez un observable,

195
00:13:56,830 --> 00:14:02,070
alors si vous voyez cela observable en fonction du temps,

196
00:14:02,070 --> 00:14:06,710
donc si cet axe représente une fonction du temps, l'observable

197
00:14:06,710 --> 00:14:12,090
émettra périodiquement des valeurs comme celle-ci, l'une après l'autre.

198
00:14:12,090 --> 00:14:16,896
Donc, si vous organisez ces valeurs le long d'une séquence,

199
00:14:16,896 --> 00:14:21,540
en fonction du temps, vous verrez des valeurs émises comme ceci.

200
00:14:22,680 --> 00:14:26,350
Il y a aussi une possibilité que vous puissiez rencontrer une erreur.

201
00:14:27,750 --> 00:14:30,990
Dans ce cas, vous devez gérer l'erreur de manière appropriée.

202
00:14:30,990 --> 00:14:32,510
Si vous gérez l'erreur de manière appropriée,

203
00:14:32,510 --> 00:14:37,830
vous pouvez continuer ou vous pouvez arrêter à ce moment-là.

204
00:14:37,830 --> 00:14:41,520
De même, quand un observable complète toutes ses itérations,

205
00:14:41,520 --> 00:14:44,730
alors Il sera marqué comme l'achèvement de l'observable.

206
00:14:44,730 --> 00:14:49,570
Donc, vous devez être capable de gérer même l'événement d'achèvement dans un observable.

207
00:14:49,570 --> 00:14:54,500
Compte tenu de ce comportement annoté de temps de l'observable, vous pouvez alors prendre

208
00:14:54,500 --> 00:15:00,240
les valeurs que l'image observable et appliquer des opérateurs sur ces observables.

209
00:15:00,240 --> 00:15:04,680
Maintenant, ces valeurs peuvent être vues comme un tableau.

210
00:15:04,680 --> 00:15:10,120
Si cela vous aide à mieux comprendre, vous pouvez le voir comme un tableau de valeurs.

211
00:15:10,120 --> 00:15:15,140
Maintenant, ces valeurs peuvent être exploitées en utilisant différents opérateurs.

212
00:15:15,140 --> 00:15:21,630
C'est donc là que votre carte, votre filtre, votre réduction et plusieurs opérateurs que

213
00:15:21,630 --> 00:15:26,560
toutes les bibliothèques de programmes réactifs typiques comme RxJS supportent.

214
00:15:26,560 --> 00:15:29,010
Permet de transformer

215
00:15:29,010 --> 00:15:33,590
un ensemble de valeurs que vous obtenez d'un observable en un autre ensemble de valeurs.

216
00:15:33,590 --> 00:15:36,640
Ainsi, vous finissez par créer un nouvel observable.

217
00:15:36,640 --> 00:15:39,170
Et ce nouvel observable sera composé de

218
00:15:39,170 --> 00:15:42,830
valeurs transformées de l'observable original.

219
00:15:42,830 --> 00:15:48,294
C'est donc la raison pour laquelle je montre ces valeurs transformées en rectangles ici.

220
00:15:48,294 --> 00:15:52,861
Juste pour vous donner une impression visuelle de ce que nous essayons de faire avec

221
00:15:52,861 --> 00:15:54,170
un opérateur.

222
00:15:54,170 --> 00:15:58,620
Donc, vous prenez une valeur puis la transformez en une valeur différente.

223
00:15:58,620 --> 00:16:01,640
Et cette séquence de ces différentes valeurs que

224
00:16:01,640 --> 00:16:06,400
Vous obtenez en transformant les valeurs émises par un observable.

225
00:16:06,400 --> 00:16:11,390
deviendra elle-même une autre chaîne de valeurs, et par conséquent,

226
00:16:11,390 --> 00:16:12,880
deviendra une autre observable.

227
00:16:12,880 --> 00:16:16,820
Ainsi, vous pouvez dériver un observable d'un autre observable.

228
00:16:16,820 --> 00:16:19,335
Mais ce second observable dépend du premier donc cela dépend.

229
00:16:19,335 --> 00:16:26,600
Son comportement est tapé, le premier par l'utilisation de cet opérateur.

230
00:16:26,600 --> 00:16:31,730
Nous en verrons des exemples au cours de certains exercices

231
00:16:31,730 --> 00:16:37,210
de cette leçon et des leçons suivantes.

232
00:16:37,210 --> 00:16:41,450
Qu'en est-il d'Angular et de RxJS, comment se réunissent ?

233
00:16:41,450 --> 00:16:48,540
Angular, comme nous l'avons mentionné précédemment, supporte un certain nombre d'observables à lui seul.

234
00:16:48,540 --> 00:16:53,375
Et ce support d'observables dans Angular vous permet de faire de la programmation réactive

235
00:16:53,375 --> 00:16:59,070
dans votre application Angular.

236
00:16:59,070 --> 00:17:02,210
Ainsi, par exemple, les formes dans Angular,

237
00:17:02,210 --> 00:17:06,340
nous avons vu des formes réactives déjà dans l'une des leçons précédentes.

238
00:17:06,340 --> 00:17:11,040
À ce moment-là, je n'ai jamais mentionné explicitement le mot observable.

239
00:17:11,040 --> 00:17:15,725
Mais maintenant que nous savons observables, nous allons revenir à la forme réactive, et

240
00:17:15,725 --> 00:17:18,440
ensuite faire une transformation en forme réactive.

241
00:17:18,440 --> 00:17:21,460
Les formes elles-mêmes deviennent observables dans Angular.

242
00:17:21,460 --> 00:17:26,337
Et tout changement dans les valeurs de l'un des éléments de forme,

243
00:17:26,337 --> 00:17:30,605
peut être produit, et observé en souscrivant à

244
00:17:30,605 --> 00:17:36,280
l'observable que le framework Angular nous fournit.

245
00:17:36,280 --> 00:17:41,934
De même, HTTP, que nous rencontrerons dans le prochain module de ce cours,

246
00:17:41,934 --> 00:17:46,500
sera également basé sur des observables.

247
00:17:46,500 --> 00:17:52,720
Ainsi, lorsque votre service va chercher des données à partir d'un serveur, la bibliothèque HTTP,

248
00:17:52,720 --> 00:17:56,750
ou le module HTTP dans Angular, prend en charge les observables.

249
00:17:56,750 --> 00:17:59,780
Donc, chaque fois que vous effectuez l'une des méthodes, get, put, post ou

250
00:17:59,780 --> 00:18:04,160
delete, en utilisant HTTP, elles vous donneront une

251
00:18:04,160 --> 00:18:07,730
observable que vous pourrez alors vous abonner dans votre service.

252
00:18:07,730 --> 00:18:11,495
Et puis transformez-le ensuite, puis donnez-le à vos composants, et

253
00:18:11,495 --> 00:18:13,958
les composants peuvent s'abonner aux observables.

254
00:18:13,958 --> 00:18:18,410
Le service est fourni en transformant les flux HTTP.

255
00:18:18,410 --> 00:18:21,780
Et c'est là que la programmation réactive et le flux

256
00:18:21,780 --> 00:18:27,800
de données à travers votre application Angular deviennent très simples.

257
00:18:27,800 --> 00:18:32,840
De même, il existe un AsyncPipe, que vous rencontrerez plus tard dans ce cours.

258
00:18:32,840 --> 00:18:38,631
Et aussi changer la détection construite autour des observables dans Angular.

259
00:18:38,631 --> 00:18:44,310
Vous en verrez quelques exemples dans le reste de ce cours.

260
00:18:44,310 --> 00:18:49,110
Maintenant, revenons à la question que nous avons vue dans la diapositive précédente.

261
00:18:49,110 --> 00:18:53,615
Comment prendre un observable et le transformer en un autre observable ?

262
00:18:53,615 --> 00:19:01,465
Voici un exemple que vous rencontrerez dans l'exercice qui suit cette conférence.

263
00:19:01,465 --> 00:19:07,415
Donc ici, nous avons le paramètre de route

264
00:19:07,415 --> 00:19:12,410
dans notre composant de menu, qui utilise le paramètre de route pour

265
00:19:12,410 --> 00:19:17,710
fournir la valeur du plat sélectionné au composant de détail de plat.

266
00:19:17,710 --> 00:19:20,250
Ainsi, le paramètre de route devient observable.Le module routeur de

267
00:19:20,250 --> 00:19:24,905
Angular a un service activatedRoute d'activité qui

268
00:19:24,905 --> 00:19:30,435
prend en charge un tas d'observables et l'un d'eux étant les paramètres observables.

269
00:19:30,435 --> 00:19:33,996
Les paramètres observables sont liés aux paramètres d'itinéraire.

270
00:19:33,996 --> 00:19:37,615
Et donc tout changement dans les paramètres,

271
00:19:37,615 --> 00:19:43,620
dans l'URL que vous rencontrez sera émis comme observable.

272
00:19:43,620 --> 00:19:47,521
Maintenant, donc quand vous obtenez l'observable, de sorte que comme vous pouvez le voir,

273
00:19:47,521 --> 00:19:53,010
vous pouvez avoir accès à cet observable en disant cette route params dans votre code.

274
00:19:53,010 --> 00:19:55,415
Donc, le params lui-même est observable ici.

275
00:19:55,415 --> 00:19:57,666
Maintenant, à ce params observable,

276
00:19:57,666 --> 00:20:02,970
vous pouvez appliquer un opérateur comme un opérateur ici appelé switchmap.

277
00:20:02,970 --> 00:20:05,830
Nous verrons l'utilisation de ceci dans l'extrait.

278
00:20:05,830 --> 00:20:09,840
L'opérateur switchmap prend les paramètres observables.

279
00:20:09,840 --> 00:20:17,190
Et puis transforme les paramètres observables en un autre observable qui est un plat.

280
00:20:17,190 --> 00:20:21,861
Il prend la valeur params, puis extrait la valeur ID des params,

281
00:20:21,861 --> 00:20:25,493
qui vous donne accès au paramètre route, l'id, ou

282
00:20:25,493 --> 00:20:30,708
le paramètre que vous avez spécifié, puis l'utilise pour aller chercher le plat.

283
00:20:30,708 --> 00:20:38,265
Donc, chaque fois que le paramètre change, il se traduira par une récupération d'un nouveau plat.

284
00:20:38,265 --> 00:20:42,045
Et donc chaque fois que le paramètre change,

285
00:20:42,045 --> 00:20:47,290
qui équivaut à émettre une nouvelle valeur par leurs paramètres observables.

286
00:20:47,290 --> 00:20:50,850
Cela se transforme en récupération du nouveau plat pour

287
00:20:50,850 --> 00:20:53,190
qui est l'ID correspondant.

288
00:20:53,190 --> 00:20:56,240
Ainsi, le plat deviendra alors un autre observable.

289
00:20:56,240 --> 00:21:01,100
Maintenant, quand ce plat observable devient disponible, vous pouvez vous abonner à ce plat

290
00:21:01,100 --> 00:21:05,850
observable ici, et obtenir la valeur du plat.

291
00:21:05,850 --> 00:21:10,490
Et quand vous obtenez la valeur de plat, alors vous pouvez prendre la valeur de plat, puis il

292
00:21:10,490 --> 00:21:17,742
créer votre variable de plat dans votre composant de détail de plat à cette valeur de plat.

293
00:21:17,742 --> 00:21:22,468
Ainsi, toute modification du paramètre de route se propage à travers cet opérateur

294
00:21:22,468 --> 00:21:25,224
switchmap en un observable,

295
00:21:25,224 --> 00:21:28,296
qui, lorsqu'il est observé à travers l'abonné,

296
00:21:28,296 --> 00:21:32,569
vous permettra de transformer cela et de l'assigner à un autre plat.

297
00:21:32,569 --> 00:21:37,236
Et quand cela se produit, votre vue peut être mise à jour avec

298
00:21:37,236 --> 00:21:41,915
le nouveau plat qui a été obtenu à partir du service.

299
00:21:41,915 --> 00:21:47,106
Alors maintenant, vous voyez comment les données circulent à travers le paramètre de route,

300
00:21:47,106 --> 00:21:50,184
via l'opérateur switchmap, et

301
00:21:50,184 --> 00:21:55,985
en résultant dans le changement de la vue de votre composant de détail de plat.

302
00:21:55,985 --> 00:22:01,000
C'est la raison pour laquelle la programmation basée sur l'observation ou la programmation réactive

303
00:22:01,000 --> 00:22:05,060
dans Angular devient très utile pour

304
00:22:05,060 --> 00:22:09,070
implémenter certaines fonctionnalités dans votre application Angular.

305
00:22:09,070 --> 00:22:11,034
C'est un exemple de ce genre.

306
00:22:11,034 --> 00:22:15,984
Nous verrons l'utilisation de cet exemple particulier dans

307
00:22:15,984 --> 00:22:20,332
l'exercice qui suit cette conférence.

308
00:22:20,332 --> 00:22:22,658
J'ai pensé qu'il serait facile pour

309
00:22:22,658 --> 00:22:27,970
de te souvenir de tout cela en chantant simplement cette Ode aux Observables.

310
00:22:27,970 --> 00:22:34,948
[MUSIQUE]

311
00:22:34,948 --> 00:22:37,469
Vous devriez chanter ceci à l'air de,

312
00:22:37,469 --> 00:22:42,310
You Can Call Me Al de Paul Simon de la renommée Simon et Garfunkel.

313
00:22:42,310 --> 00:22:46,000
Si vous vous retournez et dites, qui est Paul Simon ?

314
00:22:46,000 --> 00:22:47,385
Désolé, génération différente.

315
00:22:47,385 --> 00:22:53,670
[MUSIQUE]