1
00:00:03,680 --> 00:00:11,610
Ora che hai avuto la tua prima introduzione alla Programmazione Reattiva, RxJs

2
00:00:11,610 --> 00:00:14,880
e l'uso del modello di osservatore e

3
00:00:14,880 --> 00:00:21,165
come Angular sfrutta il modello di osservatore e supporta la Programmazione Reattiva,

4
00:00:21,165 --> 00:00:24,600
passiamo al nostro primo esercizio per

5
00:00:24,600 --> 00:00:29,315
bagnarci i piedi usando gli osservabili in Angular.

6
00:00:29,315 --> 00:00:35,950
In questo esercizio, ci accingiamo ad aggiornare i nostri servizi per fare uso di osservabili,

7
00:00:35,950 --> 00:00:43,999
perché quando passiamo al modulo successivo dove vedremo il supporto HTTP in Angular,

8
00:00:43,999 --> 00:00:49,915
capiremo immediatamente che il supporto HTTP in Angular si basa su osservabili.

9
00:00:49,915 --> 00:00:54,485
Quindi, è una buona idea per noi

10
00:00:54,485 --> 00:00:59,870
familiarizzare con l'uso di osservabili in questa lezione stessa.

11
00:00:59,870 --> 00:01:04,770
Quindi, aggiorneremo i servizi per esportare osservabili.

12
00:01:04,770 --> 00:01:08,479
Successivamente, all'interno dei nostri componenti,

13
00:01:08,479 --> 00:01:11,270
ci sottoscriveremo a questi osservabili e

14
00:01:11,270 --> 00:01:15,190
otterremo i dati necessari per il rendering delle viste.

15
00:01:15,190 --> 00:01:19,340
Passiamo all'esercizio successivo.

16
00:01:19,340 --> 00:01:21,680
Ti starai chiedendo,

17
00:01:21,680 --> 00:01:25,390
come facciamo a utilizzare RxJs all'interno di Angular,

18
00:01:25,390 --> 00:01:28,510
ed è già disponibile per noi?

19
00:01:28,510 --> 00:01:31,730
Quindi quello che noterai è che con la CLI angolare,

20
00:01:31,730 --> 00:01:34,480
quando impalchi la tua applicazione Angular,

21
00:01:34,480 --> 00:01:37,040
RxJS viene automaticamente incluso in lì.

22
00:01:37,040 --> 00:01:39,560
Quindi, se vai al file package.json,

23
00:01:39,560 --> 00:01:42,795
noterai che all'interno delle dipendenze,

24
00:01:42,795 --> 00:01:48,900
la libreria RxJS è già inclusa all'interno dell'applicazione.

25
00:01:48,900 --> 00:01:53,155
Quindi, tutto ciò che devi usare da RxJS è già disponibile per te.

26
00:01:53,155 --> 00:02:00,215
Quindi possiamo andare avanti e usare la libreria RxJS subito all'interno della nostra applicazione Angular.

27
00:02:00,215 --> 00:02:03,735
Se stai costruendo la tua applicazione Angular da zero,

28
00:02:03,735 --> 00:02:08,450
devi eseguire esplicitamente un'installazione npm di RxJs.

29
00:02:08,450 --> 00:02:11,135
Andando al file dish.service.js,

30
00:02:11,135 --> 00:02:21,080
fammi prima importare il di

31
00:02:21,080 --> 00:02:27,750
dai nostri osservabili 'rxjs'.

32
00:02:28,960 --> 00:02:32,045
Importeremo anche - Ora,

33
00:02:32,045 --> 00:02:35,235
quando si utilizza RxJs all'interno dell'applicazione Angular,

34
00:02:35,235 --> 00:02:37,330
l'intera libreria non viene inclusa.

35
00:02:37,330 --> 00:02:41,445
Puoi importare solo qualsiasi parte di cui hai bisogno dalla libreria RxJS

36
00:02:41,445 --> 00:02:43,400
e quindi usarla all'interno dell'applicazione Angular.

37
00:02:43,400 --> 00:02:48,680
Quindi, quando l'applicazione Angular è finalmente preparata per la distribuzione,

38
00:02:48,680 --> 00:02:52,070
solo quelle parti da RxJs che sono richieste

39
00:02:52,070 --> 00:02:56,030
verranno incluse all'interno dell'applicazione Angular.

40
00:02:56,030 --> 00:02:58,055
L' operatore di ritardo.

41
00:02:58,055 --> 00:03:07,815
L' operatore di ritardo ci permette di ritardare l'emissione dell'articolo dal nostro osservabile.

42
00:03:07,815 --> 00:03:09,780
Entrando nei metodi,

43
00:03:09,780 --> 00:03:15,295
ci sarà ora aggiornare questi metodi per fare uso di osservabili,

44
00:03:15,295 --> 00:03:18,230
e restituiremo una promessa convertendo l'

45
00:03:18,230 --> 00:03:21,755
osservabile in vostra promessa utilizzando l'operatore toPromise.

46
00:03:21,755 --> 00:03:27,700
Quindi, se hai già componenti che stanno usando le promesse

47
00:03:27,700 --> 00:03:30,520
e vuoi non modificare i componenti,

48
00:03:30,520 --> 00:03:33,470
puoi semplicemente convertire un osservabile alla tua promessa e quindi

49
00:03:33,470 --> 00:03:37,890
inviare la promessa ai tuoi componenti.

50
00:03:37,890 --> 00:03:42,265
Come ci siamo resi conto, le promesse emetteranno solo un elemento,

51
00:03:42,265 --> 00:03:48,000
mentre puoi vedere che gli osservabili sono basati su flussi.

52
00:03:48,000 --> 00:03:51,350
Quindi, questa è la limitazione che otterrai se

53
00:03:51,350 --> 00:03:54,560
usi solo i due operatori promessa sugli osservabili

54
00:03:54,560 --> 00:03:58,520
e ne usi perché l'operatore ToPromise

55
00:03:58,520 --> 00:04:03,525
consentirà al tuo osservabile di emettere solo un valore.

56
00:04:03,525 --> 00:04:09,350
Ma per il momento facciamolo come primo passo prima di

57
00:04:09,350 --> 00:04:14,665
passare alla piena implementazione osservabile dei nostri servizi.

58
00:04:14,665 --> 00:04:17,820
Quindi, andando al metodo GetDiches,

59
00:04:17,820 --> 00:04:22,370
ho intenzione di restituire questi piatti.

60
00:04:22,370 --> 00:04:27,950
Quindi, ho intenzione di rimuovere quella parte e poi dire, ritorno di.

61
00:04:27,950 --> 00:04:31,625
Se vuoi emettere solo un valore dal tuo osservabile,

62
00:04:31,625 --> 00:04:33,260
userai il metodo of

63
00:04:33,260 --> 00:04:38,010
e che prenderà qualsiasi valore che vuoi emettere lì.

64
00:04:38,010 --> 00:04:43,300
Questo è sufficiente per la nostra applicazione attuale al momento.

65
00:04:43,300 --> 00:04:46,160
Quindi, faremo uso di questo,

66
00:04:46,160 --> 00:04:52,040
e vogliamo anche ritardare l'emissione del valore di due secondi.

67
00:04:52,040 --> 00:04:55,565
Quindi, cambierò questa parte del codice per utilizzare l'

68
00:04:55,565 --> 00:05:01,895
operatore delay per il mio osservabile, usando pipe.

69
00:05:01,895 --> 00:05:09,360
Ho bisogno di convertire questo toPromise ed emettere la promessa.

70
00:05:09,360 --> 00:05:14,775
Quindi ora, il mio metodo GetDiches viene aggiornato per fare uso di un osservabile,

71
00:05:14,775 --> 00:05:19,665
quindi convertirlo in una promessa e quindi inviare la promessa al mio componente.

72
00:05:19,665 --> 00:05:22,710
Quindi non ho bisogno di fare alcun aggiornamento del componente.

73
00:05:22,710 --> 00:05:31,200
Usiamo lo stesso approccio per aggiornare i restanti due metodi del mio servizio qui.

74
00:05:31,200 --> 00:05:34,455
Quindi ho intenzione di copiare questa parte,

75
00:05:34,455 --> 00:05:42,225
quindi aggiornare quella parte,

76
00:05:42,225 --> 00:05:46,140
quindi prendere la parte ritardata di esso,

77
00:05:46,140 --> 00:05:54,080
e quindi aggiornare questa parte per utilizzare il ritardo

78
00:05:54,080 --> 00:06:06,300
e convertire questo metodo toPromise.

79
00:06:06,300 --> 00:06:10,980
Quindi con questo, anche il mio metodo getDish viene aggiornato.

80
00:06:10,980 --> 00:06:17,370
Lasciami fare la stessa cosa al metodo getFeaturedDish.

81
00:06:17,370 --> 00:06:21,000
Di nuovo, se

82
00:06:21,000 --> 00:06:23,040
vuoi, puoi scrivere tutto.

83
00:06:23,040 --> 00:06:32,270
Sono solo pigro per tagliare e incollare e cambiare le parti che

84
00:06:32,270 --> 00:06:42,395
voglio cambiare e convertire questo metodo toPromise.

85
00:06:42,395 --> 00:06:52,800
Questo è tutto. Il mio servizio è ora aggiornato per restituire le promesse da un osservabile qui.

86
00:06:52,800 --> 00:06:54,405
Quindi, con questo aggiornamento,

87
00:06:54,405 --> 00:06:58,620
il mio servizio piatto viene aggiornato per fare uso di osservabili

88
00:06:58,620 --> 00:07:04,215
piuttosto che usare direttamente i valori.

89
00:07:04,215 --> 00:07:10,460
Allo stesso modo, vai avanti e aggiorna il servizio leader e il servizio di promozione.

90
00:07:10,460 --> 00:07:13,415
Ora noterete che ho già aggiornato

91
00:07:13,415 --> 00:07:17,985
il servizio leader per fare uso di osservabili.

92
00:07:17,985 --> 00:07:24,380
Allo stesso modo, ho anche aggiornato il servizio di promozione per fare uso di osservabili.

93
00:07:24,380 --> 00:07:28,200
Salva le modifiche e andiamo a dare un'occhiata alla nostra applicazione.

94
00:07:28,200 --> 00:07:29,890
Quando vai al browser,

95
00:07:29,890 --> 00:07:34,745
noterai che la tua applicazione funziona esattamente allo stesso modo di prima

96
00:07:34,745 --> 00:07:41,010
e recupera i dati dai servizi proprio come prima.

97
00:07:41,010 --> 00:07:45,160
Quindi non molto di un cambiamento all'interno della tua applicazione in quanto tale.

98
00:07:45,160 --> 00:07:46,850
Esegue esattamente lo stesso.

99
00:07:46,850 --> 00:07:51,035
Quindi, nota che sostituendo le tue promesse con osservabili,

100
00:07:51,035 --> 00:07:55,370
non ci sono stati molti cambiamenti all'interno della tua applicazione come te lo aspetti.

101
00:07:55,370 --> 00:07:58,460
Ora, facciamo un passo avanti.

102
00:07:58,460 --> 00:08:04,540
Ora lasceremo che i nostri servizi restituiscano osservabili

103
00:08:04,540 --> 00:08:08,240
e aggiorneremo i componenti per fare uso di osservabili.

104
00:08:08,240 --> 00:08:09,835
Il motivo, come ho detto,

105
00:08:09,835 --> 00:08:13,790
è perché quando aggiorniamo i nostri servizi per utilizzare

106
00:08:13,790 --> 00:08:18,420
il servizio HTTP per andare a un server per recuperare i dati,

107
00:08:18,420 --> 00:08:25,345
allora vorremmo notare che in Angular i metodi HTTP restituiranno osservabili.

108
00:08:25,345 --> 00:08:30,260
I servizi possono semplicemente trasmettere gli osservabili ai nostri componenti e lasciare che

109
00:08:30,260 --> 00:08:33,080
i componenti si iscrivano a questi osservabili e utilizzare

110
00:08:33,080 --> 00:08:36,215
i dati che ottengono in tal modo.

111
00:08:36,215 --> 00:08:41,020
Quindi, questo sarebbe un passo intermedio per arrivare a quella fase.

112
00:08:41,020 --> 00:08:45,275
Avremo a guardare HTTP nel prossimo modulo.

113
00:08:45,275 --> 00:08:48,234
Tornando ai nostri servizi,

114
00:08:48,234 --> 00:08:52,460
ora puoi rimuovere il toPromise prima rimuovendo

115
00:08:52,460 --> 00:08:55,400
l'operatore toPromise perché non ne abbiamo

116
00:08:55,400 --> 00:08:59,660
più bisogno e quindi rimuoveremo semplicemente il toPromise da questo,

117
00:08:59,660 --> 00:09:04,110
importare osservabile e quindi lasciare invece che il

118
00:09:04,110 --> 00:09:09,044
nostro metodo restituisca

119
00:09:09,044 --> 00:09:16,140
osservabili invece di promesse .

120
00:09:16,140 --> 00:09:17,615
Quindi, come ho detto,

121
00:09:17,615 --> 00:09:21,420
qualsiasi cosa una promessa possa fare un osservabile può anche fare.

122
00:09:22,810 --> 00:09:28,400
Quindi, aggiorniamo tutti questi per restituire osservabili.

123
00:09:28,400 --> 00:09:32,695
Fai lo stesso con i restanti due servizi.

124
00:09:32,695 --> 00:09:36,680
Ora noterete che ho anche aggiornato il servizio leader

125
00:09:36,680 --> 00:09:40,725
per restituire semplicemente osservabili invece di promesse,

126
00:09:40,725 --> 00:09:43,984
e anche il servizio di promozione è stato

127
00:09:43,984 --> 00:09:47,735
aggiornato di conseguenza per restituire osservabili invece che promesse.

128
00:09:47,735 --> 00:09:52,460
Ora ciò significa che dobbiamo andare ad aggiornare i nostri componenti

129
00:09:52,460 --> 00:09:57,590
per fare uso degli osservabili piuttosto che delle promesse come abbiamo fatto prima.

130
00:09:57,590 --> 00:10:01,885
Ora, per promessa, abbiamo visto che abbiamo bisogno di usare.then

131
00:10:01,885 --> 00:10:07,430
per entrare in possesso del risultato quando viene eseguita la risoluzione della promessa.

132
00:10:07,430 --> 00:10:12,495
Con un osservabile, il.then viene convertito in.subscribe.

133
00:10:12,495 --> 00:10:16,715
Il modo in cui si consumano i dati rimarrà esattamente lo stesso.

134
00:10:16,715 --> 00:10:19,890
Quindi, con quel piccolo cambiamento all'interno dei tuoi componenti,

135
00:10:19,890 --> 00:10:25,480
i componenti saranno ora in grado di gestire gli osservabili piuttosto che le promesse.

136
00:10:25,480 --> 00:10:31,085
Quindi, andando a tutti e quattro i componenti che fanno uso dei servizi, per

137
00:10:31,085 --> 00:10:37,185
prima cosa, andiamo al file menu.component.ts.

138
00:10:37,185 --> 00:10:39,280
Nel file menu.component.ts,

139
00:10:39,280 --> 00:10:42,080
noteresti immediatamente la linea rossa squiggly lì,

140
00:10:42,080 --> 00:10:48,100
sotto l'allora ovviamente perché non stiamo restituendo una promessa.

141
00:10:48,100 --> 00:10:50,090
Invece stiamo restituendo un osservabile.

142
00:10:50,090 --> 00:10:55,245
Quindi basta convertirlo poi per iscriversi e basta.

143
00:10:55,245 --> 00:10:59,225
Il componente del menu è ora in grado di

144
00:10:59,225 --> 00:11:04,910
consumare i valori osservabili che vengono emessi dall'osservabile.

145
00:11:04,910 --> 00:11:10,890
Effettuare la stessa modifica al file about.component.ts,

146
00:11:10,890 --> 00:11:16,760
al file dishdetail.component.ts e al file home.component.ts.

147
00:11:16,760 --> 00:11:22,520
Dopo aver aggiornato i restanti file Tapscott componente,

148
00:11:22,520 --> 00:11:27,245
andiamo a guardare il comportamento della nostra applicazione nel browser.

149
00:11:27,245 --> 00:11:32,920
Vai nel browser, non noterai alcuna differenza nel comportamento della nostra applicazione.

150
00:11:32,920 --> 00:11:36,170
Questa versione della nostra applicazione Angular viene aggiornata per utilizzare

151
00:11:36,170 --> 00:11:40,275
osservabili invece di promesse.

152
00:11:40,275 --> 00:11:42,620
Quindi, il componente home qui,

153
00:11:42,620 --> 00:11:46,085
sul componente esegue esattamente allo stesso modo di prima,

154
00:11:46,085 --> 00:11:49,800
e il componente menu fa esattamente la stessa cosa.

155
00:11:49,800 --> 00:11:54,785
Anche il componente dettaglio piatto si comporterà esattamente allo stesso modo di prima.

156
00:11:54,785 --> 00:11:57,960
Con questo, completiamo questo esercizio.

157
00:11:57,960 --> 00:12:01,430
In questo esercizio, abbiamo compiuto i nostri primi passi verso l'utilizzo di

158
00:12:01,430 --> 00:12:05,030
osservabili all'interno della nostra applicazione Angular aggiornando

159
00:12:05,030 --> 00:12:08,330
i servizi e corrispondentemente i componenti per

160
00:12:08,330 --> 00:12:12,185
fare uso degli osservabili al posto delle promesse.

161
00:12:12,185 --> 00:12:18,640
Questo è un buon momento per fare un commit git con il messaggio RxJS parte uno.