1
00:00:03,680 --> 00:00:11,610
Maintenant que vous avez eu votre première introduction à la programmation réactive, RxJS,

2
00:00:11,610 --> 00:00:14,880
et l'utilisation du modèle d'observateur et

3
00:00:14,880 --> 00:00:21,165
comment Angular exploite le modèle d'observateur et prend en charge la programmation réactive,

4
00:00:21,165 --> 00:00:24,600
passons à notre tout premier exercice pour obtenir nos pieds

5
00:00:24,600 --> 00:00:29,315
humide en utilisant les observables dans Angular.

6
00:00:29,315 --> 00:00:35,950
Dans cet exercice, nous allons mettre à jour nos services pour utiliser les observables,

7
00:00:35,950 --> 00:00:43,999
parce que lorsque nous passerons au module suivant où nous allons regarder le support HTTP dans Angular,

8
00:00:43,999 --> 00:00:49,915
nous comprendrons immédiatement que le support HTTP dans Angular est basé autour des observables.

9
00:00:49,915 --> 00:00:59,870
Donc, c'est une bonne idée pour nous de nous familiariser avec l'utilisation d'observables dans cette leçon elle-même.

10
00:00:59,870 --> 00:01:04,770
Donc, nous allons mettre à jour les services pour exporter les observables.

11
00:01:04,770 --> 00:01:08,479
Par la suite, dans nos composants,

12
00:01:08,479 --> 00:01:11,270
nous nous abonnerons à ces observables et

13
00:01:11,270 --> 00:01:15,190
obtiendra les données nécessaires au rendu des vues.

14
00:01:15,190 --> 00:01:19,340
Passons à l'exercice suivant.

15
00:01:19,340 --> 00:01:21,680
Vous devez vous demander,

16
00:01:21,680 --> 00:01:25,390
comment utilisons-nous RxJS dans Angular,

17
00:01:25,390 --> 00:01:28,510
et est-il déjà disponible pour nous ?

18
00:01:28,510 --> 00:01:31,730
Donc, ce que vous remarquerez est qu'avec l'interface de ligne de commande Angular,

19
00:01:31,730 --> 00:01:34,480
lorsque vous échafaudez votre application Angular,

20
00:01:34,480 --> 00:01:37,040
RxJS y est automatiquement inclus.

21
00:01:37,040 --> 00:01:39,560
Donc, si vous allez dans le fichier package.json,

22
00:01:39,560 --> 00:01:42,795
vous remarquerez que dans les dépendances,

23
00:01:42,795 --> 00:01:48,900
la bibliothèque RxJS est déjà incluse dans votre application.

24
00:01:48,900 --> 00:01:53,155
Donc, tout ce que vous devez utiliser à partir de RxJS est déjà disponible pour vous.

25
00:01:53,155 --> 00:02:00,215
Donc, nous pouvons aller de l'avant et utiliser la bibliothèque RxJS tout de suite dans notre application Angular.

26
00:02:00,215 --> 00:02:03,735
Si vous construisez votre application Angular à partir de zéro,

27
00:02:03,735 --> 00:02:08,450
alors vous devez faire explicitement une installation npm de RxJS.

28
00:02:08,450 --> 00:02:11,135
En allant dans le fichier dish.service.js,

29
00:02:11,135 --> 00:02:21,080
permettez-moi d'abord d'importer le of

30
00:02:21,080 --> 00:02:27,750
de nos observables 'rxjs'.

31
00:02:28,960 --> 00:02:32,045
Nous allons également importer - Maintenant,

32
00:02:32,045 --> 00:02:35,235
lorsque vous utilisez RxJS dans votre application Angular,

33
00:02:35,235 --> 00:02:37,330
toute la bibliothèque n'est pas incluse.

34
00:02:37,330 --> 00:02:41,445
Vous ne pouvez importer que les pièces dont vous avez besoin à partir de la bibliothèque RxJS,

35
00:02:41,445 --> 00:02:43,400
, puis l'utiliser dans votre application Angular.

36
00:02:43,400 --> 00:02:48,680
Donc, lorsque votre application Angular est enfin préparée pour le déploiement,

37
00:02:48,680 --> 00:02:52,070
seules les parties de RxJS qui sont requises seront

38
00:02:52,070 --> 00:02:56,030
incluses dans votre application Angular.

39
00:02:56,030 --> 00:02:58,055
L'opérateur de retard.

40
00:02:58,055 --> 00:03:07,815
L'opérateur de retard nous permet de retarder l'émission de l'article de notre observable.

41
00:03:07,815 --> 00:03:09,780
En entrant dans les méthodes,

42
00:03:09,780 --> 00:03:15,295
nous allons maintenant mettre à jour ces méthodes pour utiliser des observables,

43
00:03:15,295 --> 00:03:18,230
et nous allons retourner une promesse en convertissant le

44
00:03:18,230 --> 00:03:21,755
observable en votre promesse en utilisant l'opérateur toPromise.

45
00:03:21,755 --> 00:03:27,700
Donc, si vous avez déjà des composants qui utilisent des promesses,

46
00:03:27,700 --> 00:03:30,520
et que vous voulez ne pas modifier les composants,

47
00:03:30,520 --> 00:03:33,470
vous pouvez simplement convertir un observable à votre promesse et ensuite

48
00:03:33,470 --> 00:03:37,890
envoyer la promesse à vos composants.

49
00:03:37,890 --> 00:03:42,265
Comme nous l'avons réalisé, les promesses n'émettent qu'un seul élément,

50
00:03:42,265 --> 00:03:48,000
alors que vous pouvez voir que les observables sont basés sur des flux.

51
00:03:48,000 --> 00:03:51,350
Donc, c'est la limite que vous obtiendrez si vous

52
00:03:51,350 --> 00:03:54,560
utilisez simplement l'opérateur deux promesses sur observables

53
00:03:54,560 --> 00:03:58,520
et en faites usage parce que l'opérateur toPromise

54
00:03:58,520 --> 00:04:03,525
permettra à votre observable d'émettre une seule valeur.

55
00:04:03,525 --> 00:04:09,350
Mais pour le moment, faisons-le comme la première étape avant que

56
00:04:09,350 --> 00:04:14,665
ne passe à la mise en œuvre complète observable de nos services.

57
00:04:14,665 --> 00:04:17,820
Donc, en allant à la méthode getDats,

58
00:04:17,820 --> 00:04:22,370
Je vais retourner ces plats.

59
00:04:22,370 --> 00:04:27,950
Donc, je vais enlever cette partie et ensuite dire, retour de.

60
00:04:27,950 --> 00:04:31,625
Si vous voulez émettre une seule valeur de votre observable,

61
00:04:31,625 --> 00:04:33,260
vous utiliserez la méthode of,

62
00:04:33,260 --> 00:04:38,010
et qui prendra la valeur que vous voulez émettre là-dedans.

63
00:04:38,010 --> 00:04:43,300
Cela suffit pour notre demande actuelle en ce moment.

64
00:04:43,300 --> 00:04:46,160
Donc, nous allons utiliser cela,

65
00:04:46,160 --> 00:04:52,040
et aussi nous voulons retarder l'émission de la valeur de deux secondes.

66
00:04:52,040 --> 00:04:55,565
Donc, je vais changer cette partie du code pour utiliser

67
00:04:55,565 --> 00:05:01,895
l'opérateur de retard pour mon observable, en utilisant pipe.

68
00:05:01,895 --> 00:05:09,360
J'ai besoin de convertir ceci àPromise et émettre la promesse.

69
00:05:09,360 --> 00:05:14,775
Donc maintenant, ma méthode getDats est mise à jour pour utiliser un observable,

70
00:05:14,775 --> 00:05:19,665
, puis le convertir en une promesse, puis envoyer la promesse à mon composant.

71
00:05:19,665 --> 00:05:22,710
Donc, je n'ai pas besoin de faire de mises à jour du composant.

72
00:05:22,710 --> 00:05:31,200
Utilisons la même approche pour mettre à jour les deux méthodes restantes de mon service ici.

73
00:05:31,200 --> 00:05:34,455
Donc, je vais juste copier cette partie,

74
00:05:34,455 --> 00:05:42,225
, puis mettre à jour cette partie,

75
00:05:42,225 --> 00:05:46,140
puis prendre la partie de retard,

76
00:05:46,140 --> 00:05:54,080
et ensuite mettre à jour cette partie pour utiliser le delay

77
00:05:54,080 --> 00:06:06,300
et convertir cette méthode toPromise.

78
00:06:06,300 --> 00:06:10,980
Donc, avec cela, ma méthode getDish est également mise à jour.

79
00:06:10,980 --> 00:06:17,370
Laissez-moi faire la même chose à la méthode getFeaturedDish.

80
00:06:17,370 --> 00:06:21,000
Encore une fois, si vous voulez,

81
00:06:21,000 --> 00:06:23,040
vous pouvez taper le tout.

82
00:06:23,040 --> 00:06:32,270
Je suis juste paresseux pour seulement couper et coller et changer les pièces qui

83
00:06:32,270 --> 00:06:42,395
Je veux changer et convertir cette méthode toPromise.

84
00:06:42,395 --> 00:06:52,800
C'est ça. Mon service est maintenant mis à jour pour retourner des promesses d'un observable ici.

85
00:06:52,800 --> 00:06:54,405
Donc, avec cette mise à jour,

86
00:06:54,405 --> 00:06:58,620
mon service de plat est mis à jour pour utiliser des observables plutôt que

87
00:06:58,620 --> 00:07:04,215
en utilisant directement les valeurs.

88
00:07:04,215 --> 00:07:10,460
De même, allez-y et mettez à jour le service leader et le service de promotion.

89
00:07:10,460 --> 00:07:13,415
Vous remarquerez maintenant que j'ai déjà mis à jour

90
00:07:13,415 --> 00:07:17,985
le service leader pour utiliser les observables.

91
00:07:17,985 --> 00:07:24,380
De même, j'ai également mis à jour le service de promotion pour utiliser les observables.

92
00:07:24,380 --> 00:07:28,200
Sauvegardez les changements et allons-y jeter un oeil à notre application.

93
00:07:28,200 --> 00:07:29,890
Lorsque vous allez sur le navigateur,

94
00:07:29,890 --> 00:07:34,745
vous remarquerez que votre application fonctionne exactement de la même manière qu'avant

95
00:07:34,745 --> 00:07:41,010
et récupère les données des services comme avant.

96
00:07:41,010 --> 00:07:45,160
Pas beaucoup de changement dans votre application en tant que telle.

97
00:07:45,160 --> 00:07:46,850
Il effectue exactement la même chose.

98
00:07:46,850 --> 00:07:51,035
Donc, remarquez qu'en substituant vos promesses par des observables,

99
00:07:51,035 --> 00:07:55,370
il n'y a pas eu beaucoup de changement dans votre application comme vous l'attendez.

100
00:07:55,370 --> 00:07:58,460
Maintenant, allons un peu plus loin.

101
00:07:58,460 --> 00:08:04,540
Nous allons maintenant laisser nos services retourner observables,

102
00:08:04,540 --> 00:08:08,240
et nous allons mettre à jour les composants pour utiliser les observables.

103
00:08:08,240 --> 00:08:09,835
La raison comme je l'ai mentionné,

104
00:08:09,835 --> 00:08:13,790
est parce que lorsque nous mettons à jour nos services pour utiliser

105
00:08:13,790 --> 00:08:18,420
le service HTTP pour aller sur un serveur pour récupérer les données,

106
00:08:18,420 --> 00:08:25,345
alors nous notons que dans Angular les méthodes HTTP retourneront observables.

107
00:08:25,345 --> 00:08:30,260
Les services peuvent simplement transmettre les observables à nos composants et laisser

108
00:08:30,260 --> 00:08:33,080
les composants s'abonner à ces observables et utiliser

109
00:08:33,080 --> 00:08:36,215
des données qu'ils obtiennent ainsi.

110
00:08:36,215 --> 00:08:41,020
Donc, ce serait une étape intermédiaire pour nous d'arriver à ce stade.

111
00:08:41,020 --> 00:08:45,275
Nous allons regarder HTTP dans le prochain module.

112
00:08:45,275 --> 00:08:48,234
En revenant à nos services,

113
00:08:48,234 --> 00:08:52,460
vous pouvez maintenant supprimer le toPromise d'abord en supprimant

114
00:08:52,460 --> 00:08:55,400
l'opérateur toPromise parce que nous n'en avons plus besoin

115
00:08:55,400 --> 00:08:59,660
et ensuite nous allons simplement supprimer le toPromise de ce,

116
00:08:59,660 --> 00:09:04,110
import observable et ensuite laisser

117
00:09:04,110 --> 00:09:09,044
notre méthode retourner

118
00:09:09,044 --> 00:09:16,140
observables au lieu de promesses.

119
00:09:16,140 --> 00:09:17,615
Donc, comme je l'ai mentionné,

120
00:09:17,615 --> 00:09:21,420
tout ce qu'une promesse peut faire un observable peut aussi faire.

121
00:09:22,810 --> 00:09:28,400
Donc, mettons à jour tous ces éléments pour retourner des observables.

122
00:09:28,400 --> 00:09:32,695
Faites de même pour les deux services restants.

123
00:09:32,695 --> 00:09:36,680
Vous remarquerez maintenant que j'ai également mis à jour le service leader

124
00:09:36,680 --> 00:09:40,725
pour simplement retourner observables au lieu de promesses,

125
00:09:40,725 --> 00:09:43,984
et aussi le service de promotion a été mis à jour en conséquence

126
00:09:43,984 --> 00:09:47,735
pour retourner observable au lieu de promesses.

127
00:09:47,735 --> 00:09:52,460
Maintenant, cela signifie que nous devons aller mettre à jour nos composants

128
00:09:52,460 --> 00:09:57,590
pour utiliser des observables plutôt que des promesses comme nous l'avons fait plus tôt.

129
00:09:57,590 --> 00:10:01,885
Maintenant pour la promesse, nous avons vu que nous devons utiliser le .then

130
00:10:01,885 --> 00:10:07,430
pour obtenir le résultat lorsque la résolution de la promesse est exécutée.

131
00:10:07,430 --> 00:10:12,495
Avec un observable, le .then est converti en .subscribe.

132
00:10:12,495 --> 00:10:16,715
La façon dont vous consommez les données restera exactement la même.

133
00:10:16,715 --> 00:10:19,890
Donc, avec ce changement mineur dans vos composants,

134
00:10:19,890 --> 00:10:25,480
les composants seront maintenant en mesure de gérer les observables plutôt que les promesses.

135
00:10:25,480 --> 00:10:31,085
Donc, en allant aux quatre composants qui utilisent les services,

136
00:10:31,085 --> 00:10:37,185
d'abord, passons au fichier menu.component.ts.

137
00:10:37,185 --> 00:10:39,280
Dans le fichier menu.component.ts,

138
00:10:39,280 --> 00:10:42,080
vous remarqueriez immédiatement la ligne rouge squiggly là,

139
00:10:42,080 --> 00:10:48,100
sous le alors évidemment parce que nous ne retournons pas une promesse.

140
00:10:48,100 --> 00:10:50,090
Au lieu de cela, nous retournons un observable.

141
00:10:50,090 --> 00:10:55,245
Alors convertissez-le ensuite pour vous abonner et c'est tout.

142
00:10:55,245 --> 00:10:59,225
Votre composant de menu est maintenant capable de

143
00:10:59,225 --> 00:11:04,910
consommer les valeurs observables qui sont émises par l'observable.

144
00:11:04,910 --> 00:11:10,890
Faites la même modification au fichier about.component.ts,

145
00:11:10,890 --> 00:11:16,760
au fichier dishdetail.component.ts et au fichier home.component.ts.

146
00:11:16,760 --> 00:11:22,520
Après avoir mis à jour les fichiers de composant restants Tapscott,

147
00:11:22,520 --> 00:11:27,245
allons voir le comportement de notre application dans le navigateur.

148
00:11:27,245 --> 00:11:32,920
Allez dans le navigateur, vous ne remarquerez aucune différence dans le comportement de notre application.

149
00:11:32,920 --> 00:11:36,170
Cette version de notre application Angular est mise à jour pour utiliser

150
00:11:36,170 --> 00:11:40,275
observables au lieu des promesses.

151
00:11:40,275 --> 00:11:42,620
Donc, le composant home ici,

152
00:11:42,620 --> 00:11:46,085
sur le composant fonctionne exactement de la même manière qu'avant,

153
00:11:46,085 --> 00:11:49,800
et le composant de menu fait exactement la même chose.

154
00:11:49,800 --> 00:11:54,785
Aussi le composant de détail du plat se comportera exactement de la même manière qu'avant.

155
00:11:54,785 --> 00:11:57,960
Avec cela, nous terminons cet exercice.

156
00:11:57,960 --> 00:12:01,430
Dans cet exercice, nous avons fait nos premiers pas vers l'utilisation des observables

157
00:12:01,430 --> 00:12:05,030
dans notre application Angular en mettant à jour

158
00:12:05,030 --> 00:12:08,330
les services et, en conséquence, les composants à

159
00:12:08,330 --> 00:12:12,185
utilisent des observables à la place des promesses.

160
00:12:12,185 --> 00:12:18,640
C'est le bon moment pour vous de faire un commit git avec le message RxJS première partie.