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

2
00:00:04,586 --> 00:00:08,713
Adesso lasciatemi dare
una breve introduzione di angular e

3
00:00:08,713 --> 00:00:12,340
della sua relazione con
la programmazione reattiva

4
00:00:12,340 --> 00:00:16,780
come Angular utilizza
la programmazione reattiva.

5
00:00:16,780 --> 00:00:21,988
In particolare, la libreria RxJS e
come essa è adottata in

6
00:00:21,988 --> 00:00:28,174
Angular per fonire un modo
di scrivere le applicazioni Angular.

7
00:00:28,174 --> 00:00:33,199
Dunque, ciò che presentiamo in questa lezione
è una brevissima introduzione

8
00:00:33,199 --> 00:00:38,426
generale del concetto di
programmazione reattiva, degli observables,

9
00:00:38,426 --> 00:00:43,930
e del pattern Observed
e come esso viene applicato in Angular

10
00:00:43,930 --> 00:00:47,280
La programmazione reattiva è di per sé
un argomento molto vasto

11
00:00:48,460 --> 00:00:52,100
che non può essere affrontato in 10 minuti

12
00:00:53,240 --> 00:00:54,410
La programmazione reattiva,

13
00:00:54,410 --> 00:00:59,800
se avessi la necessità di affrontarla in tutti i dettagli,
diventerebbe un intero corso a sé stante.

14
00:00:59,800 --> 00:01:01,421
And unfortunately,

15
00:01:01,421 --> 00:01:07,372
non abbiamo il tempo di includere
un intero altro corso in questo corso

16
00:01:07,372 --> 00:01:12,718
Quindi dato che siamo interessati
principalmente a come Angular adotta

17
00:01:12,718 --> 00:01:18,066
la programmazione reattiva per consentirci di
raddoppiare le applicazioni Angular,

18
00:01:18,066 --> 00:01:21,590
allora ci concentreremo su questo aspetto.

19
00:01:21,590 --> 00:01:22,455
Ma durante il percorso,

20
00:01:22,455 --> 00:01:28,340
vi darò una breve introduzione sui vari
concetti in questa area generale.

21
00:01:28,340 --> 00:01:30,720
Se avrete curiosità riguardo alla
programmazione reattiva,

22
00:01:30,720 --> 00:01:36,100
vi raccomando fortemente di seguire
alcuni dei link che ho fornito e

23
00:01:36,100 --> 00:01:40,240
le risorse aggiuntive
per questa particolare lezione.

24
00:01:40,240 --> 00:01:44,090
Non vi sarà fornito molto
materiale qui, ma

25
00:01:44,090 --> 00:01:48,220
vi fornirò soltanto le solide basi
della programmazione reattiva.

26
00:01:48,220 --> 00:01:51,713
In questo corso,
da questo punto in poi

27
00:01:51,713 --> 00:01:57,448
vedremo come Angular adotta il paradigma
della programmazione reattiva per

28
00:01:57,448 --> 00:02:00,150
progettare le applicazioni Angular

29
00:02:00,150 --> 00:02:04,818
Non ci restringeremo solo
in questa lezione, ma

30
00:02:04,818 --> 00:02:10,266
tutte le successive lezioni
vedranno l'utilizzo degli observables e del

31
00:02:10,266 --> 00:02:16,220
pattern observer e come
si scrivono applicazioni reattive in Angular.

32
00:02:18,080 --> 00:02:22,800
L'intera discussione riguardo la
programmazione reattiva, si evolve attorno

33
00:02:22,800 --> 00:02:27,770
a questo particolare pattern di ingegneria
del software chiamato Observable.

34
00:02:27,770 --> 00:02:31,970
Ricordate la gang of four che
ho menzionato in una delle prime lezioni

35
00:02:31,970 --> 00:02:35,690
do discutevamo dei framework
model view controller

36
00:02:35,690 --> 00:02:38,140
e di quelli model view?

37
00:02:38,140 --> 00:02:43,246
Lo stesso libro della gang of four ,
contiene alcuni dei pattern che

38
00:02:43,246 --> 00:02:49,616
sono stati utilizzati con successo
nella programmazione reattiva.

39
00:02:49,616 --> 00:02:53,570
Il pattern Observable
gira attorno agli observables.

40
00:02:53,570 --> 00:02:58,948
Dunque avete degli observables, il cui comportamento
può essere osservato dagli observers.

41
00:02:58,948 --> 00:03:02,200
Questo è il motivo per cui viene
definito pattern observer.

42
00:03:02,200 --> 00:03:07,180
Vengono dichiarati alcuni oggetti
come osbervables o subjects e

43
00:03:07,180 --> 00:03:12,060
gli observables vengono osservati
dagli observers.

44
00:03:12,060 --> 00:03:15,190
Ora, gli stessi observers
si registreranno

45
00:03:16,280 --> 00:03:19,400
per scrutare cambiamenti
negli observables

46
00:03:19,400 --> 00:03:24,010
e gli observables avviseranno
gli observers quando avverranno cambiamenti.

47
00:03:24,010 --> 00:03:29,781
Nel design pattern observer, questo è il modo
in cui gli observers si iscrivono

48
00:03:29,781 --> 00:03:35,165
agli observables o
registrano essi stessi in un observable.

49
00:03:35,165 --> 00:03:40,013
Questo è il modo in cui l'observable conosce
quale observers è interessato

50
00:03:40,013 --> 00:03:42,430
a qualsiasi cambiamento nel suo stato.

51
00:03:42,430 --> 00:03:46,250
Quando l'observable collegato agli observers

52
00:03:46,250 --> 00:03:51,830
cambia il suo stato, esso
avvisa immediatamente tutti gli observables

53
00:03:51,830 --> 00:03:56,660
del cambiamento di stato e
gli observers di conseguenza possono

54
00:03:56,660 --> 00:04:02,170
effettuare delle azioni basate su questa notifica
di cambiamento avvenuto nell'observable.

55
00:04:02,170 --> 00:04:06,185
Il pattern observer è stato
utilizzato effettivamente in molte

56
00:04:06,185 --> 00:04:07,212
diverse circostanze.

57
00:04:07,212 --> 00:04:12,600
E per questo, il paradigma di
programmazione reattiva è basato su di esso

58
00:04:12,600 --> 00:04:15,990
A questo punto, la domanda che viene spontanea è

59
00:04:15,990 --> 00:04:18,280
Perché parliamo di observables?

60
00:04:18,280 --> 00:04:21,730
Cosa di speciale ci interessa degli observables?

61
00:04:21,730 --> 00:04:26,161
Il pattern observer è un modo di
scrivere le applicazioni software

62
00:04:26,161 --> 00:04:29,760
Questo metodo è basato sugli streams.

63
00:04:29,760 --> 00:04:33,290
Cioè si hanno dei dati che scorrono nell'applicazione.

64
00:04:33,290 --> 00:04:37,826
Questi dati posso essere visti come
stream di valori che scorrono attraverso la vostra

65
00:04:37,826 --> 00:04:38,879
applicazione.

66
00:04:38,879 --> 00:04:44,158
Dunque, lo stream è il canale primario attorno
al quale gli observables e

67
00:04:44,158 --> 00:04:47,380
il pattern observable sono definiti.

68
00:04:47,380 --> 00:04:51,007
Quindi, altri streams possono essere collegati a questi streams.

69
00:04:51,007 --> 00:04:55,762
E quando un valore si aggira sullo stream,
questo valore viene prelevato e

70
00:04:55,762 --> 00:04:58,400
si può reagire a questo valore.

71
00:04:58,400 --> 00:05:02,430
Per poter reagire a quel valore, è necessario registrarsi su quello stream o

72
00:05:02,430 --> 00:05:04,710
è necessario registrare l'observable.

73
00:05:04,710 --> 00:05:08,860
L'observable riceve frequentemente i valori emessi.

74
00:05:08,860 --> 00:05:13,059
E quando è possibile vedere questi valori, l'observer può reagire ad essi.

75
00:05:13,059 --> 00:05:16,413
Questo significa anche, che quando non si è più interessati,

76
00:05:16,413 --> 00:05:19,660
si ci può scollegare da un observable.

77
00:05:19,660 --> 00:05:23,653
Come a dire, non sono più interessato
ad osservarti e quindi sparisci!

78
00:05:23,653 --> 00:05:28,794
Il pattern observer vi consente di osservare periodicamente i cambiamenti

79
00:05:28,794 --> 00:05:34,170
quando siete interessati e di smettere di osservare quando non siete più interessati.

80
00:05:34,170 --> 00:05:38,855
Quindi questo tipo di paradigma vi consente di progettare le vostre

81
00:05:38,855 --> 00:05:43,135
applicazioni software in modo davvero interessante, in una maniera davvero intuitiva.

82
00:05:43,135 --> 00:05:45,435
Ma per essere in gradi di utilizzare questo approccio,

83
00:05:45,435 --> 00:05:48,513
è necessario abituare la mente a questo approccio.

84
00:05:48,513 --> 00:05:55,455
Proprio come abbiamo fatto con il pattern callback o come abbiamo fatto con l'uso delle promises.

85
00:05:55,455 --> 00:06:01,740
Gli observables costituiscono un altro
modo di progettare l'applicazione.

86
00:06:01,740 --> 00:06:06,605
Un observable in sé sarà molto pigro
e semplicemente andrà a spasso.

87
00:06:06,605 --> 00:06:10,360
Quindi, potete creare un observable
e semplicemente lasciarlo lì.

88
00:06:10,360 --> 00:06:12,496
L'observable diventa attivo o

89
00:06:12,496 --> 00:06:16,777
diventa caldo quando qualcuno inizia
a collegargli un observer.

90
00:06:16,777 --> 00:06:21,380
A questo punto, l'observer
entra in azione ed inizia a produrre valori.

91
00:06:21,380 --> 00:06:25,515
Così se almeno un observer è
coinvolto in un observable,

92
00:06:25,515 --> 00:06:29,000
allora l'observable
inizierà ad emettere valori.

93
00:06:29,000 --> 00:06:36,010
Se nessuno è coinvolto, l'observable
tornerà a chiudersi nel suo guscio e rimane lì.

94
00:06:36,010 --> 00:06:38,058
Potete pensare a questa cosa in questo modo.

95
00:06:38,058 --> 00:06:42,231
Se questa metafora
vi aiuta a comprendere

96
00:06:42,231 --> 00:06:46,760
come l'observer funziona, potete utilizzarla.

97
00:06:46,760 --> 00:06:51,939
Questo vi aiuterà a comprendere
il modo in cui costruiremo le nostre applicazioni

98
00:06:51,939 --> 00:06:56,657
negli esercizi che seguono e nelle successive lezioni

99
00:06:56,657 --> 00:07:01,116
dove esamineremo il supporto HTTP
di Angular in modo più dettagliato

100
00:07:04,490 --> 00:07:11,222
Un altro aspetto degli observables è il fatto che cancellano un aprecedente richiesta e

101
00:07:11,222 --> 00:07:16,172
quindi ritentare è molto
esplicito con gli observables.

102
00:07:16,172 --> 00:07:20,660
La promise che avete visto in precedenza
, quando avete iniziato ad attendere una promessa,

103
00:07:20,660 --> 00:07:23,690
non la potete cancellare, state aspettando.

104
00:07:23,690 --> 00:07:26,878
La promise eventualmente si risolve o
fallisce e

105
00:07:26,878 --> 00:07:31,907
dovete reagire, non importa,
anche se non siete più interessati.

106
00:07:31,907 --> 00:07:36,075
Ma con un observable,
se potete cancellare la vostra iscrizione

107
00:07:36,075 --> 00:07:41,540
ciò che accade non vi riguarda affatto.

108
00:07:41,540 --> 00:07:45,019
E quindi non dovete fare nulla,
se cancellate la vostra iscrizione.

109
00:07:45,019 --> 00:07:50,732
Quindi, annullare e ritentare,
nel caso in cui il precedente tentativo non

110
00:07:50,732 --> 00:07:55,599
sia riuscito, è una cosa molto esplicita
con gli observables.

111
00:07:55,599 --> 00:08:01,710
Vedremo alcuni di questi comportamenti
più dettagliatamente negli esercizi che seguono.

112
00:08:03,050 --> 00:08:06,771
Questo ci porta al concetto
di programmazione reattiva.

113
00:08:06,771 --> 00:08:11,071
La programmazione reattiva è basata
sia sul pattern Observer

114
00:08:11,071 --> 00:08:13,550
sia sul pattern Iterator.

115
00:08:13,550 --> 00:08:14,243
In ogni caso,

116
00:08:14,243 --> 00:08:18,610
il pattern Observer è la caratteristica dominante
della programmazione reattiva.

117
00:08:18,610 --> 00:08:22,670
Quindi nella programmazione reattiva,
siamo interessati ai flussi di dati.

118
00:08:22,670 --> 00:08:25,780
Su come i dati scorrono attraverso l'applicazione.

119
00:08:25,780 --> 00:08:29,450
Ed i flussi di dati possono essere trattati come stream.

120
00:08:29,450 --> 00:08:34,510
Quindi questi flussi di dati si possono propagare
attraverso l'applicazione.

121
00:08:34,510 --> 00:08:37,940
E mentre i cambiamenti si propagano
attraverso l'applicazione,

122
00:08:39,140 --> 00:08:43,440
negli stadi intermedi
potete prendere uno specifico stream

123
00:08:43,440 --> 00:08:46,860
modificarlo e creare un altro
stream che fuoriesce da lì.

124
00:08:46,860 --> 00:08:51,980
Questo è ciò che il pattern
Observable ci consente di fare.

125
00:08:51,980 --> 00:08:58,000
Quindi l'intero paradigma è costruito
attorno gli stream e i flussi di dati.

126
00:08:58,000 --> 00:09:04,540
Questo costituisce un altro modo di
vedere e risolvere il problema.

127
00:09:04,540 --> 00:09:10,180
Ed è il motivo per cui metto in risalto il fatto
che dobbiate abituare la vostra mente a

128
00:09:10,180 --> 00:09:17,120
comprendere come il pattern reactive e come
la programmazione reattiva viene fatta nella pratica.

129
00:09:17,120 --> 00:09:20,810
A questo punto, sentite spesso le persone
parlare di qualcosa chiamata

130
00:09:20,810 --> 00:09:22,290
programmazione reattiva funzionale.

131
00:09:22,290 --> 00:09:25,640
Se siete abituati al paradigma
della programmazione funzionale.

132
00:09:25,640 --> 00:09:28,430
Ma vi aggiungete la programmazione reattiva

133
00:09:28,430 --> 00:09:32,400
questo è ciò a cui la gente spesso si riferisce
come programmazione reattiva funzionale.

134
00:09:32,400 --> 00:09:35,670
Cioè al matrimonio reciproco
tra questi due approcci.

135
00:09:35,670 --> 00:09:40,340
A questo punto, inizieremo a vedere l'utilizzo
di queste cose in Angular

136
00:09:40,340 --> 00:09:43,720
ma mano che andrete avanti nel corso.

137
00:09:43,720 --> 00:09:46,010
Infine, che cosa dire riguardo RxJS?

138
00:09:46,010 --> 00:09:49,890
Quale ruolo gioca all'interno di tutto l'ecosistema?

139
00:09:49,890 --> 00:09:55,280
RxJS è una implementazione JavaScript
del pattern observable e

140
00:09:55,280 --> 00:09:58,750
anche del supporto alla programmazione reattiva.

141
00:09:58,750 --> 00:10:03,820
Quindi se state per fare programmazione
reattiva in JavaScript

142
00:10:03,820 --> 00:10:07,820
allora utilizzerete la libreria RxJS
per fare ciò.

143
00:10:07,820 --> 00:10:10,790
RxJS è soltanto una delle implementazioni.

144
00:10:10,790 --> 00:10:15,990
Ce ne sono poche altre, ma la ragione per cui
siamo interessati in particolare a RxJS

145
00:10:15,990 --> 00:10:20,860
in questo corso è perché
Angular utilizza RxJS per

146
00:10:20,860 --> 00:10:23,880
il suo supporto alla programmazione reactive.

147
00:10:23,880 --> 00:10:26,190
Abbiamo detto che RxJS è una libreria.

148
00:10:26,190 --> 00:10:28,480
E' una libreria separata
proveniente dall'esterno.

149
00:10:28,480 --> 00:10:35,010
Potete utilizzare RxJs anche per altri scopi,
non necessariamente legati ad Angular.

150
00:10:35,010 --> 00:10:39,960
Ci sono state applicazioni,
sviluppate utilizzando esclusivamente RxJS

151
00:10:39,960 --> 00:10:42,400
non legate ad Angular.

152
00:10:42,400 --> 00:10:46,955
Ma in questo corso siamo interessati
a come RxJS interagisce

153
00:10:46,955 --> 00:10:52,480
con Angular per consentire
la programmazione reattiva.

154
00:10:52,480 --> 00:10:57,790
Dunque, RxJS è una libreria che vi consente
di fare programmazione asincrona.

155
00:10:57,790 --> 00:11:01,800
Abbiamo parlato in precedenza della programmazione
asincrona quando abbiamo parlato delle promise.

156
00:11:01,800 --> 00:11:06,300
Vedremo la programmazione asincrona
con l'uso di callbacks nel corso relativo a NodeJS.

157
00:11:06,300 --> 00:11:11,380
Gli observables sono un ulteriore
modo di vedere la

158
00:11:11,380 --> 00:11:16,530
programmazione asincrona,
insieme alla programmazione event driven.

159
00:11:16,530 --> 00:11:20,320
Se avete familiarità con
la programmazione event driven,

160
00:11:20,320 --> 00:11:24,230
RxJS la soddisfa proprio bene
in questo ambiente.

161
00:11:25,970 --> 00:11:30,290
Tutte le cose sono costruite
attorno a sequenze di Observable.

162
00:11:30,290 --> 00:11:37,160
E la libreria RxJS vi fornisce
un tipo di dato elementare chiamato Observable.

163
00:11:37,160 --> 00:11:39,810
E attorno a questo tipo elementare,
abbiamo alcuni tipi satellite

164
00:11:39,810 --> 00:11:44,390
che sono chiamati observers,
schedulers e subjects.

165
00:11:44,390 --> 00:11:47,520
Tutti questi vi consentono
di fare programmazione reattiva.

166
00:11:48,620 --> 00:11:54,445
Inoltre, RxJS supporta
un intero mucchio di operatori.

167
00:11:55,745 --> 00:11:59,345
Separators, scusate intendevo dire
supporta gli operatori.

168
00:11:59,345 --> 00:12:02,545
E' stato un [risata] intreccio della mia lingua.

169
00:12:03,872 --> 00:12:06,642
RxJS supporta gli operatori,

170
00:12:06,642 --> 00:12:11,292
operatori che si ispirano
agli operatori array di JavaScript.

171
00:12:11,292 --> 00:12:15,892
Se avete familiarità con gli operatori array di Javascript
come ad esempio le map, allora

172
00:12:18,202 --> 00:12:22,232
anche gli operatori RxJS
vi sembreranno molto familiari.

173
00:12:22,232 --> 00:12:25,372
Potete trattare un observable e

174
00:12:25,372 --> 00:12:30,340
i valori che esso emette proprio come un array,
questo è il motivo per cui

175
00:12:30,340 --> 00:12:36,170
gli operatori array trovano impiego in RxJS
e anche nella programmazione reattiva.

176
00:12:36,170 --> 00:12:40,250
Quindi anche le users map, filter, reduce e altri

177
00:12:40,250 --> 00:12:46,440
operatori array troveranno impiego
in RxJS e nella programmazione reattiva.

178
00:12:46,440 --> 00:12:51,890
E questo è ciò che vi consente di gestire
gli eventi asincroni come collezioni.

179
00:12:51,890 --> 00:12:55,092
Quindi, quando vorrete mettervi in attesa di

180
00:12:55,092 --> 00:12:59,770
un evento asincrono, somiglierà
a sottoscriversi ad un observable.

181
00:12:59,770 --> 00:13:03,684
Così quando l'observable emette il valore,
sarete pronti ad catturare il valore e

182
00:13:03,684 --> 00:13:05,550
ad agire di conseguenza.

183
00:13:05,550 --> 00:13:07,960
Non sapete quando
l'emissione avverrà.

184
00:13:07,960 --> 00:13:13,220
A questo punto la parte asincrona
entra in gioco con l'uso di RxJS.

185
00:13:14,550 --> 00:13:19,480
Come già detto, la ragione
per cui siamo interessati a RxJS è perché

186
00:13:19,480 --> 00:13:22,750
Angular sfrutta la libreria RxJS per

187
00:13:23,900 --> 00:13:27,840
fornire il suo supporto
alla programmazione reattiva.

188
00:13:27,840 --> 00:13:31,080
Angular stesso ha un certo numero
di observables incorporati,

189
00:13:31,080 --> 00:13:32,369
come vedremo fra poco.

190
00:13:33,430 --> 00:13:38,430
Quando entrate nel mondo della programmazione
reattiva, sentirete spesso le persone parlare

191
00:13:38,430 --> 00:13:42,230
degli Observables e poi li sentirete
parlare degli operatori e

192
00:13:42,230 --> 00:13:45,830
poi sentirete anche alcuni
che parlano di diagrammi a biglie.

193
00:13:45,830 --> 00:13:49,290
Questo perché i diagrammi a biglie
sono un modo per rappresentare

194
00:13:50,390 --> 00:13:53,730
come la programmazione reattiva
che utilizza gli Observables.

195
00:13:53,730 --> 00:13:55,710
Se vi capita di avere un observable,

196
00:13:56,830 --> 00:14:02,070
se osservate questo observable
in funzione del tempo

197
00:14:02,070 --> 00:14:06,710
cioè se l'asse rappresenta lo scorrere
del tempo, l'observable

198
00:14:06,710 --> 00:14:12,090
emetterà periodicamente valori
come questo, uno dopo l'altro.

199
00:14:12,090 --> 00:14:16,896
Quindi se organizzate
questi valori in una sequenza,

200
00:14:16,896 --> 00:14:21,540
in funzione del tempo, vedrete
che i valori saranno emessi in questo modo.

201
00:14:22,680 --> 00:14:26,350
C' è anche la possibilità che
incontriate un errore.

202
00:14:27,750 --> 00:14:30,990
In questo caso, avrete bisogno di gestire
questo errore in modo appropriato.

203
00:14:30,990 --> 00:14:32,510
Se gestite appropriatamente l'errore,

204
00:14:32,510 --> 00:14:37,830
potete continuare oppure
fermarvi a questo punto.

205
00:14:37,830 --> 00:14:41,520
Similmente, quando un observable
completa tutte le sue iterazioni,

206
00:14:41,520 --> 00:14:44,730
allora sul diagramma verrà marcato
il completamento dell'observable.

207
00:14:44,730 --> 00:14:49,570
Dovete essere in grado anche di gestire
l'evento di completamento in un Observable.

208
00:14:49,570 --> 00:14:54,500
Dopo aver mappato il comportamento
dell'Observable, potete dunque prendere

209
00:14:54,500 --> 00:15:00,240
i valori che l'observable emette e
applicare gli operatori su di esso.

210
00:15:00,240 --> 00:15:04,680
Questi valori possono
essere visti come un array.

211
00:15:04,680 --> 00:15:10,120
Se può aiutarvi a capire meglio,
potete vederlo come un array di valori.

212
00:15:10,120 --> 00:15:15,140
Si può operare su questi valori
utilizzando diversi operatori.

213
00:15:15,140 --> 00:15:21,630
Qui è dove inserirete la vostra map, filtro,
reduce o qualunque operatore che

214
00:15:21,630 --> 00:15:26,560
qualsiasi libreria reactive
come RxJS supporta.

215
00:15:26,560 --> 00:15:29,010
Ciò vi consente di trasformare

216
00:15:29,010 --> 00:15:33,590
un insieme di valori prelevati da un
observable in un'altro insieme di valori.

217
00:15:33,590 --> 00:15:36,640
Alla fine creerete
un nuovo Observable.

218
00:15:36,640 --> 00:15:39,170
E questo nuovo observable sarà costituito

219
00:15:39,170 --> 00:15:42,830
dai valori trasformati provenienti
dall'observable originario.

220
00:15:42,830 --> 00:15:48,294
Questa è la ragione per cui vi ho mostrato
qui questi valori trasformati come rettangoli.

221
00:15:48,294 --> 00:15:52,861
Proprio per darvi una impressione visiva
di ciò che stiamo tentando di fare con

222
00:15:52,861 --> 00:15:54,170
un operatore.

223
00:15:54,170 --> 00:15:58,620
State prendendo un valore e poi
lo state trasformando in un valore differente.

224
00:15:58,620 --> 00:16:01,640
E questa sequenza
di valori diversi che

225
00:16:01,640 --> 00:16:06,400
Ottenete trasformando
i valori emessi da un observable.

226
00:16:06,400 --> 00:16:11,390
Sarà essa stessa un'altra stringa
di valori, e di conseguenza,

227
00:16:11,390 --> 00:16:12,880
diventerà un altro Observable.

228
00:16:12,880 --> 00:16:16,820
Dunque potete derivare un Observable
da un altro Observable.

229
00:16:16,820 --> 00:16:19,335
Ma questo secondo Observable dipende
dal primo, quindi è dipendente.

230
00:16:19,335 --> 00:16:26,600
Il suo comportamento è stabilito,
attraverso l'uso di questo operatore.

231
00:16:26,600 --> 00:16:31,730
Vedremo esempi di queste
attraverso degli esercizi

232
00:16:31,730 --> 00:16:37,210
in questa lezione e nelle lezioni successive.

233
00:16:37,210 --> 00:16:41,450
Cosa dire riguardo ad Angular e RxJS,
come stanno assieme?

234
00:16:41,450 --> 00:16:48,540
Angular, come menzionato in precedenza,
supporta un numero di observables propri.

235
00:16:48,540 --> 00:16:53,375
E questi observables integrati
vi consentono di fare uso

236
00:16:53,375 --> 00:16:59,070
di programmazione reattiva all'interno
di una applicazione Angular.

237
00:16:59,070 --> 00:17:02,210
Così, ad esempio, le forms di Angular,

238
00:17:02,210 --> 00:17:06,340
abbiamo già visto le forms reactive
in una precedente lezione.

239
00:17:06,340 --> 00:17:11,040
In quel punto, non ho mai citato
esplicitamente la parola observable.

240
00:17:11,040 --> 00:17:15,725
Ma adesso che conosciamo gli observable,
ritorneremo sulle form reattive, e

241
00:17:15,725 --> 00:17:18,440
effettueremo alcune trasformazioni
alla form reattiva.

242
00:17:18,440 --> 00:17:21,460
Le forms diventano
observables in Angular.

243
00:17:21,460 --> 00:17:26,337
E ogni cambiamento nei valori
di ciascun elemento della form,

244
00:17:26,337 --> 00:17:30,605
può essere tirato fuori, e
osservato sottoscrivendosi

245
00:17:30,605 --> 00:17:36,280
all'observable che il framework
Angular ci fornisce.

246
00:17:36,280 --> 00:17:41,934
Similmente, HTTP, che incontreremo
nel prossimo modulo di questo corso,

247
00:17:41,934 --> 00:17:46,500
sarà basato sugli observables.

248
00:17:46,500 --> 00:17:52,720
Così quando il vostro servizio andrà
e preleverà i dati dal server, la libreria HTTP,

249
00:17:52,720 --> 00:17:56,750
o il modulo HHTP in Angular,
forniranno degli observables.

250
00:17:56,750 --> 00:17:59,780
Quando eseguirete qualunque metodo
get, put, post o

251
00:17:59,780 --> 00:18:04,160
delete, utilizzando HTTP,
esso vi restituirà un observable

252
00:18:04,160 --> 00:18:07,730
che potete sottoscrivere
all'interno del vostro servizio.

253
00:18:07,730 --> 00:18:11,495
E conseguentemente trasformarlo,
e passarlo ai vostri componenti, e

254
00:18:11,495 --> 00:18:13,958
i componenti possono
sottoscriversi agli observables.

255
00:18:13,958 --> 00:18:18,410
Il servizio ha il compito di
trasformare gli streams HTTP.

256
00:18:18,410 --> 00:18:21,780
E qui è dove
la programmazione reattiva e

257
00:18:21,780 --> 00:18:27,800
il flusso di dati attraverso la vostra
applicazione Angular risultano evidenti.

258
00:18:27,800 --> 00:18:32,840
Similmente, c'è una AsincPipe, che
incontrerete in seguito in questo corso.

259
00:18:32,840 --> 00:18:38,631
E anche la detection change
costruita attorno agli Observables in Angular.

260
00:18:38,631 --> 00:18:44,310
Vedrete alcuni esempi
di questi nel resto del corso.

261
00:18:44,310 --> 00:18:49,110
Adesso, riprendiamo la domanda
che abbiamo visto nella precedente lezione.

262
00:18:49,110 --> 00:18:53,615
Come prendete un observable e
lo trasformate in un altro observable?

263
00:18:53,615 --> 00:19:01,465
Questo è un esempio che incontrerete
nell'esercizio che segue questa lezione.

264
00:19:01,465 --> 00:19:07,415
Qui, abbiamo la variabile route

265
00:19:07,415 --> 00:19:12,410
all'interno del nostro componente menu,
che utilizzala variabile route per

266
00:19:12,410 --> 00:19:17,710
fornire il valore del dish selezionato
al componente dish detail.

267
00:19:17,710 --> 00:19:20,250
Così la variabile route
diventa un observable.

268
00:19:20,250 --> 00:19:24,905
Il modulo router di Angular ha un attività
di servizio ActivatedRoute che

269
00:19:24,905 --> 00:19:30,435
supporta un mucchio di observables e
uno di questi è l'observable params.

270
00:19:30,435 --> 00:19:33,996
L'observable params è contenuto
tra le variabili di route.

271
00:19:33,996 --> 00:19:37,615
E dunque ogni cambiamento alle variabili,

272
00:19:37,615 --> 00:19:43,620
nell' URL che incontrate
sarà emesso come un observable.

273
00:19:43,620 --> 00:19:47,521
Adesso, quando prelevate l'observable,
come potete vedere,

274
00:19:47,521 --> 00:19:53,010
potete ottenere l'accesso a questo observable
richiamando la variabile params di route nel vostro codice.

275
00:19:53,010 --> 00:19:55,415
Questa stessa variabile
params qui è un observable.

276
00:19:55,415 --> 00:19:57,666
A questo observable params,

277
00:19:57,666 --> 00:20:02,970
potete applicare un operatore come
questo qui chiamato switchmap.

278
00:20:02,970 --> 00:20:05,830
Vedremo l'uso di
questo nell'esercizio.

279
00:20:05,830 --> 00:20:09,840
L'operatore switchmap prende
l'observable params.

280
00:20:09,840 --> 00:20:17,190
E lo trasforma in un altro
observable che è un dish.

281
00:20:17,190 --> 00:20:21,861
Esso prende il valore params, e poi
estrae il valore ID da params,

282
00:20:21,861 --> 00:20:25,493
che vi consente l'accesso alla variabile route, l'id, o

283
00:20:25,493 --> 00:20:30,708
la variabile che avete specificato, e
alla fine lo usa per prelevare il dish.

284
00:20:30,708 --> 00:20:38,265
Ogni volta che la variabile cambia, si otterrà
il prelievo di un nuovo dish.

285
00:20:38,265 --> 00:20:42,045
E ogni volta che la variabile cambia,

286
00:20:42,045 --> 00:20:47,290
ciò equivale all'emissione di un nuovo
valore da parte dell'observable params.

287
00:20:47,290 --> 00:20:50,850
Questo valore viene trasformato nel prelievo di un nuovo dish

288
00:20:50,850 --> 00:20:53,190
corrispondente all'ID specificato.

289
00:20:53,190 --> 00:20:56,240
Allora il dish diventa un altro observable.

290
00:20:56,240 --> 00:21:01,100
A questo punto, quando l'observable dish diventa disponibile, ci si può sottoscrivere ad esso

291
00:21:01,100 --> 00:21:05,850
ed ottenere il valore del dish.

292
00:21:05,850 --> 00:21:10,490
E quando avete ottenuto il valore dish, allora potete prendere questo valore, e

293
00:21:10,490 --> 00:21:17,742
creare la vostra variabile dish all'interno del componente dish detail.

294
00:21:17,742 --> 00:21:22,468
Così qualsiasi cambiamento al campo route si propaga attraverso questo

295
00:21:22,468 --> 00:21:25,224
operatore switchmap in un observable,

296
00:21:25,224 --> 00:21:28,296
che quando viene osservato attraverso una sottoscrizione,

297
00:21:28,296 --> 00:21:32,569
ci consentirà di trasformarlo e a assegnarlo ad un altro piatto.

298
00:21:32,569 --> 00:21:37,236
E quando questo accade, potete essere aggiornati dal

299
00:21:37,236 --> 00:21:41,915
nuovo dish che è stato ottenuto dal servizio.

300
00:21:41,915 --> 00:21:47,106
Così adesso, vedete come i dati scorrono attraverso il route parameter,

301
00:21:47,106 --> 00:21:50,184
attraverso l'operatore switchmap, e

302
00:21:50,184 --> 00:21:55,985
e finiscono per cambiare la vista del
componente dish detail.

303
00:21:55,985 --> 00:22:01,000
Questa è la ragione per cui
la programmazione basata sul pattern observable o

304
00:22:01,000 --> 00:22:05,060
programmazione reattiva in Angular
diventa molto utile per

305
00:22:05,060 --> 00:22:09,070
implementare alcune funzionalità
all'interno della vostra applicazione.

306
00:22:09,070 --> 00:22:11,034
Questo è uno degli esempi.

307
00:22:11,034 --> 00:22:15,984
Vedremo l'uso di questo
particolare esempio in

308
00:22:15,984 --> 00:22:20,332
questo esercizio che segue questa lezione.

309
00:22:20,332 --> 00:22:22,658
Suppongo che sia più facile

310
00:22:22,658 --> 00:22:27,970
per voi ricordare tutte queste cose semplicemente
cantando questa Ode agli Observables.

311
00:22:27,970 --> 00:22:34,948
[MUSICA]

312
00:22:34,948 --> 00:22:37,469
Dovreste cantarla sulla musica di

313
00:22:37,469 --> 00:22:42,310
You Can Call Me Al di Paul Simon
e Garfunkel fame.

314
00:22:42,310 --> 00:22:46,000
Se vi state guardando attorno
chiedendovi, chi è Paul Simon?

315
00:22:46,000 --> 00:22:47,385
Spiacente, altra generazione.

316
00:22:47,385 --> 00:22:53,670
[MUSICA]