1
00:00:00,000 --> 00:00:04,586
[MÚSICA]

2
00:00:04,586 --> 00:00:08,713
Deixe-me agora dar-lhe uma visão geral rápida de Angular e

3
00:00:08,713 --> 00:00:12,340
sua relação com programa reativo,

4
00:00:12,340 --> 00:00:16,780
como Angular faz uso de programação reativa.

5
00:00:16,780 --> 00:00:21,988
Em particular, a biblioteca RxJs e como ele é aproveitado por

6
00:00:21,988 --> 00:00:28,174
Angular para fornecer uma maneira reativa de escrever aplicações angulares.

7
00:00:28,174 --> 00:00:33,199
Agora o que apresentamos nesta palestra é uma visão geral muito rápida de

8
00:00:33,199 --> 00:00:38,426
o conceito geral de programação reativa, observáveis,

9
00:00:38,426 --> 00:00:43,930
o padrão observado e como ele é aplicado em Angular.

10
00:00:43,930 --> 00:00:47,280
Programação reativa por si só é um tópico

11
00:00:48,460 --> 00:00:52,100
muito vasto que não pode ser abordado em dez minutos.

12
00:00:53,240 --> 00:00:54,410
Programação reativa,

13
00:00:54,410 --> 00:00:59,800
se eu precisar cobri-lo em detalhes vai se tornar um curso inteiro em seu próprio direito.

14
00:00:59,800 --> 00:01:01,421
E infelizmente,

15
00:01:01,421 --> 00:01:07,372
não temos tempo para incorporar um curso inteiro neste curso em particular.

16
00:01:07,372 --> 00:01:12,718
Então, dado o fato de que estamos interessados principalmente em como Angular aproveita

17
00:01:12,718 --> 00:01:18,066
programação reativa para nos permitir dobrar aplicações angulares,

18
00:01:18,066 --> 00:01:21,590
então vamos nos concentrar nesse aspecto.

19
00:01:21,590 --> 00:01:22,455
Mas ao longo do caminho,

20
00:01:22,455 --> 00:01:28,340
Vou dar-lhe uma rápida introdução aos vários conceitos nesta área geral.

21
00:01:28,340 --> 00:01:30,720
Se você se interessar por programação reativa,

22
00:01:30,720 --> 00:01:36,100
Eu recomendo fortemente que você busque alguns dos links que eu forneci e

23
00:01:36,100 --> 00:01:40,240
recursos adicionais para esta lição em particular.

24
00:01:40,240 --> 00:01:44,090
Você tem acesso a um monte de material lá fora, mas

25
00:01:44,090 --> 00:01:48,220
nós lhe daremos uma forte base na programação reativa.

26
00:01:48,220 --> 00:01:51,713
Mas neste curso, a partir deste ponto,

27
00:01:51,713 --> 00:01:57,448
vamos olhar para como Angular aproveita o paradigma de programação reativa para

28
00:01:57,448 --> 00:02:00,150
projetar aplicações Angulares.

29
00:02:00,150 --> 00:02:04,818
Nós não estamos apenas indo para restringir apenas a esta lição, mas

30
00:02:04,818 --> 00:02:10,266
todas as lições subsequentes também verá Usado do observável e

31
00:02:10,266 --> 00:02:16,220
o padrão de observação e como escrevemos aplicações reativas em angular.

32
00:02:18,080 --> 00:02:22,800
Toda a discussão sobre programação reativa gira em torno de

33
00:02:22,800 --> 00:02:27,770
este padrão de engenharia de software específico chamado como padrão observável.

34
00:02:27,770 --> 00:02:31,970
Você se lembra da gangue de quatro que eu mencionei para você em uma das anteriores

35
00:02:31,970 --> 00:02:35,690
palestras onde discutimos sobre a estrutura do controlador de visualização de modelo e

36
00:02:35,690 --> 00:02:38,140
a estrutura do modelo de visão de modelo.

37
00:02:38,140 --> 00:02:43,246
A mesma gangue de quatro livros contém alguns dos padrões que

38
00:02:43,246 --> 00:02:49,616
tem sido usado com sucesso no padrão de programação reativa.

39
00:02:49,616 --> 00:02:53,570
O padrão do observador gira em torno de observáveis.

40
00:02:53,570 --> 00:02:58,948
Então você tem observáveis, cujo comportamento pode ser observado por observadores.

41
00:02:58,948 --> 00:03:02,200
Então é por isso que isso é chamado de padrão observador.

42
00:03:02,200 --> 00:03:07,180
Você declara certos objetos como observáveis ou sujeitos e

43
00:03:07,180 --> 00:03:12,060
esses observáveis serão observados por observadores.

44
00:03:12,060 --> 00:03:15,190
Agora, os próprios observadores se registrarão para

45
00:03:16,280 --> 00:03:19,400
assistir as mudanças no observável e

46
00:03:19,400 --> 00:03:24,010
o observável notificará os observadores sempre que ocorrerem mudanças.

47
00:03:24,010 --> 00:03:29,781
Assim, neste padrão de observador, a maneira como esses observadores vão subscrever

48
00:03:29,781 --> 00:03:35,165
para o observável ou se registrar com o observável.

49
00:03:35,165 --> 00:03:40,013
Então, é assim que o observável sabe quais observadores estão interessados em

50
00:03:40,013 --> 00:03:42,430
quaisquer mudanças em seu estado.

51
00:03:42,430 --> 00:03:46,250
Assim, sempre que um observador observável dizer,

52
00:03:46,250 --> 00:03:51,830
mudança em seu estado, ele notificará imediatamente todos os observadores

53
00:03:51,830 --> 00:03:56,660
sobre a mudança de estado e os observadores subsequentemente podem tomar

54
00:03:56,660 --> 00:04:02,170
ação com base nesta notificação da mudança no observável.

55
00:04:02,170 --> 00:04:06,185
O padrão observador tem sido usado de forma muito eficaz em muitas circunstâncias

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

57
00:04:07,212 --> 00:04:12,600
E, de fato, o paradigma de programação reativa é baseado em torno dele.

58
00:04:12,600 --> 00:04:15,990
Então, a pergunta que vem à sua mente imediatamente é

59
00:04:15,990 --> 00:04:18,280
por que falamos sobre os observáveis?

60
00:04:18,280 --> 00:04:21,730
Qual é o interesse especial sobre observáveis?

61
00:04:21,730 --> 00:04:26,161
Padrão de observador é uma maneira de escrever aplicativos de software.

62
00:04:26,161 --> 00:04:29,760
Então, isso é baseado em torno de Streams.

63
00:04:29,760 --> 00:04:33,290
Então, você tem dados que fluem seu aplicativo.

64
00:04:33,290 --> 00:04:37,826
Estes dados podem ser vistos como um fluxo de valores que flui através da sua aplicação

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

66
00:04:38,879 --> 00:04:44,158
Então, o fluxo é o canal primário em torno do qual observables e

67
00:04:44,158 --> 00:04:47,380
padrão observável é projetado.

68
00:04:47,380 --> 00:04:51,007
Então, quais fluxos você pode assinar esses fluxos.

69
00:04:51,007 --> 00:04:55,762
E sempre que um valor aparece no fluxo, você pega esse valor e

70
00:04:55,762 --> 00:04:58,400
então você pode reagir a esse valor.

71
00:04:58,400 --> 00:05:02,430
Então, para poder reagir a esse valor, você precisa se inscrever para esse fluxo ou

72
00:05:02,430 --> 00:05:04,710
você precisa se inscrever para o observável.

73
00:05:04,710 --> 00:05:08,860
O observável freqüentemente continuará emitindo valores.

74
00:05:08,860 --> 00:05:13,059
E quando você vê esses valores, o observador pode reagir a eles.

75
00:05:13,059 --> 00:05:16,413
Agora isso também significa que quando você não estiver mais interessado,

76
00:05:16,413 --> 00:05:19,660
você pode cancelar a inscrição de um observável.

77
00:05:19,660 --> 00:05:23,653
Você pode dizer, eu não estou interessado em vê-lo mais e depois desaparecer.

78
00:05:23,653 --> 00:05:28,794
Assim, o padrão observável permite que você observe periodicamente mudanças,

79
00:05:28,794 --> 00:05:34,170
se você quiser e, em seguida, pare de observar quando você não está mais interessado.

80
00:05:34,170 --> 00:05:38,855
Então esse tipo de paradigma permite que você desenhe seus aplicativos de software

81
00:05:38,855 --> 00:05:43,135
de uma forma muito interessante, de uma forma muito intuitiva.

82
00:05:43,135 --> 00:05:45,435
Mas para ser capaz de usar essa abordagem,

83
00:05:45,435 --> 00:05:48,513
você precisa colocar sua cabeça em torno dessa abordagem.

84
00:05:48,513 --> 00:05:55,455
Assim como vimos com o padrão de retorno de chamada ou vimos com o uso de promessas.

85
00:05:55,455 --> 00:06:01,740
Observables é mais uma maneira de projetar aplicativos.

86
00:06:01,740 --> 00:06:06,605
Então, um observável por si só será muito preguiçoso e ele vai ficar por aí.

87
00:06:06,605 --> 00:06:10,360
Então, você pode criar um observável e, em seguida, apenas deixá-lo lá.

88
00:06:10,360 --> 00:06:12,496
O observável fica ativo ou

89
00:06:12,496 --> 00:06:16,777
fica quente quando alguém começa a se inscrever para o observador.

90
00:06:16,777 --> 00:06:21,380
Então, nesse ponto, o observador entra em ação e começa a editar valores.

91
00:06:21,380 --> 00:06:25,515
Então, se pelo menos um observador é confiado no observável,

92
00:06:25,515 --> 00:06:29,000
então o observável começará a emitir valores.

93
00:06:29,000 --> 00:06:36,010
Se ninguém for confiado, observável voltará para sua concha e permanecerá lá.

94
00:06:36,010 --> 00:06:38,058
Então, você pode pensar nisso dessa maneira.

95
00:06:38,058 --> 00:06:42,231
Então, se essa imagem mental ajuda você a entender

96
00:06:42,231 --> 00:06:46,760
como funciona a patente de observador, então que assim seja.

97
00:06:46,760 --> 00:06:51,939
Então, que irá ajudá-lo a olhar para a forma como projetamos nossas aplicações

98
00:06:51,939 --> 00:06:56,657
nos exercícios que se seguem e, em seguida, as lições subsequentes

99
00:06:56,657 --> 00:07:01,116
onde examinamos HTTP suportado Angular em mais detalhes.

100
00:07:04,490 --> 00:07:11,222
Um outro aspecto dos observáveis é o fato de que cancelar um pedido anterior e

101
00:07:11,222 --> 00:07:16,172
, em seguida, tentar novamente é muito simples com observáveis.

102
00:07:16,172 --> 00:07:20,660
A promessa que você viu antes, uma vez que você começa a esperar por uma promessa,

103
00:07:20,660 --> 00:07:23,690
você não pode cancelar, você está esperando.

104
00:07:23,690 --> 00:07:26,878
A promessa acabará por resolver ou falhar e

105
00:07:26,878 --> 00:07:31,907
então você terá que reagir não importa o que, mesmo se você não estiver mais interessado.

106
00:07:31,907 --> 00:07:36,075
Mas com um observável, se você pode vender sua assinatura,

107
00:07:36,075 --> 00:07:41,540
então que o que acontece com o observável não é qualquer preocupação para você em tudo.

108
00:07:41,540 --> 00:07:45,019
Assim, você não precisa fazer nada, se cancelar sua assinatura.

109
00:07:45,019 --> 00:07:50,732
Então, cancelar e tentar novamente no caso de o julgamento anterior não ter

110
00:07:50,732 --> 00:07:55,599
sucesso é muito simples com observáveis.

111
00:07:55,599 --> 00:08:01,710
Vamos ver alguns desses comportamentos em mais detalhes nos exercícios que se seguem.

112
00:08:03,050 --> 00:08:06,771
Isso nos leva a esse conceito de programação reativa.

113
00:08:06,771 --> 00:08:11,071
Programação reativa é baseada em torno do padrão observador e

114
00:08:11,071 --> 00:08:13,550
também um padrão iterado.

115
00:08:13,550 --> 00:08:14,243
Mas de qualquer forma,

116
00:08:14,243 --> 00:08:18,610
o padrão observador é a característica dominante de uma programação reativa.

117
00:08:18,610 --> 00:08:22,670
Então, na programação reativa, estamos interessados em fluxos de dados.

118
00:08:22,670 --> 00:08:25,780
Como os dados fluem através da sua aplicação.

119
00:08:25,780 --> 00:08:29,450
Qualquer fluxo de dados pode ser tratado como um fluxo.

120
00:08:29,450 --> 00:08:34,510
Assim, esse fluxo de dados pode propagar alterações em todo o seu aplicativo.

121
00:08:34,510 --> 00:08:37,940
E enquanto as mudanças estão sendo propagadas através do aplicativo,

122
00:08:39,140 --> 00:08:43,440
em estágios intermediários você pode até pegar um fluxo específico,

123
00:08:43,440 --> 00:08:46,860
modificá-lo e criar outro fluxo saindo de lá.

124
00:08:46,860 --> 00:08:51,980
Então é isso que um padrão observável nos permite desenhar.

125
00:08:51,980 --> 00:08:58,000
Para que todo o paradigma de programação seja construído em torno de fluxos ou fluxos de dados.

126
00:08:58,000 --> 00:09:04,540
Então esta é outra maneira de olhar para resolver o seu problema.

127
00:09:04,540 --> 00:09:10,180
E é por isso que estou enfatizando o fato de que você precisa se concentrar em torno de

128
00:09:10,180 --> 00:09:17,120
entender como o padrão reativo ou como a programação reativa é feita na prática.

129
00:09:17,120 --> 00:09:20,810
Agora, você costuma ouvir pessoas falando sobre algo chamado funcional

130
00:09:20,810 --> 00:09:22,290
programação reativa.

131
00:09:22,290 --> 00:09:25,640
Se você está familiarizado com o paradigma de programação funcional.

132
00:09:25,640 --> 00:09:28,430
Mas além de programação reativa

133
00:09:28,430 --> 00:09:32,400
é o que as pessoas costumam se referir como programação reativa funcional.

134
00:09:32,400 --> 00:09:35,670
Assim, o inter-casamento dessas duas abordagens.

135
00:09:35,670 --> 00:09:40,340
Agora, você verá o uso de alguns deles com Angular

136
00:09:40,340 --> 00:09:43,720
à medida que você passar por este curso em particular.

137
00:09:43,720 --> 00:09:46,010
Finalmente, o que dizer RXJs?

138
00:09:46,010 --> 00:09:49,890
Que papel ele desempenha em todo esse ecossistema?

139
00:09:49,890 --> 00:09:55,280
RXJs é uma implementação JavaScript do padrão observável e

140
00:09:55,280 --> 00:09:58,750
também suporta para programação reativa.

141
00:09:58,750 --> 00:10:03,820
Então, se você fosse fazer programação reativa em JavaScript,

142
00:10:03,820 --> 00:10:07,820
então você aproveita a biblioteca RxJs para fazer isso.

143
00:10:07,820 --> 00:10:10,790
RXJs apenas uma dessas implementações.

144
00:10:10,790 --> 00:10:15,990
Há alguns outros, mas a razão pela qual estamos interessados em RXJs em particular

145
00:10:15,990 --> 00:10:20,860
neste curso é porque Angular aproveita RXJs para

146
00:10:20,860 --> 00:10:23,880
seu suporte para programação reativa.

147
00:10:23,880 --> 00:10:26,190
Então o RXJs é uma biblioteca.

148
00:10:26,190 --> 00:10:28,480
É uma biblioteca separada que está lá fora.

149
00:10:28,480 --> 00:10:35,010
Você pode usar RXJs para outros fins também, não necessariamente relacionados com Angular.

150
00:10:35,010 --> 00:10:39,960
Houve aplicativos que foram desenvolvidos usando RxJs per se

151
00:10:39,960 --> 00:10:42,400
não relacionados ao Angular.

152
00:10:42,400 --> 00:10:46,955
Mas neste curso, estamos interessados em como RXJs vem junto com

153
00:10:46,955 --> 00:10:52,480
o Angular para apoiar programação reativa em Angular.

154
00:10:52,480 --> 00:10:57,790
Então, há RXJs é uma biblioteca que permite que você faça programação assíncrona.

155
00:10:57,790 --> 00:11:01,800
Falamos sobre programação assíncrona que promete anteriormente.

156
00:11:01,800 --> 00:11:06,300
Veremos programação assíncrona com retornos de chamada no curso do nó.

157
00:11:06,300 --> 00:11:11,380
E observables é mais uma maneira de olhar para

158
00:11:11,380 --> 00:11:16,530
programação assíncrona, juntamente com programador orientado a eventos.

159
00:11:16,530 --> 00:11:20,320
Então, se você está familiarizado com o paradigma de programação orientado a eventos,

160
00:11:20,320 --> 00:11:24,230
RXJs se encaixa bem dentro desse ambiente.

161
00:11:25,970 --> 00:11:30,290
A coisa toda é construída em torno de sequências observáveis.

162
00:11:30,290 --> 00:11:37,160
E biblioteca RXJS fornece um tipo de núcleo chamado como Observável.

163
00:11:37,160 --> 00:11:39,810
E em torno desse tipo de núcleo, você tem alguns tipos de satélite

164
00:11:39,810 --> 00:11:44,390
que são criados como observadores, programadores e assuntos.

165
00:11:44,390 --> 00:11:47,520
Todos estes permitem que você faça programação reativa.

166
00:11:48,620 --> 00:11:54,445
Além disso, RXJs também suporta um monte de operadores.

167
00:11:55,745 --> 00:11:59,345
Suporta operadores, separadores, desculpe.

168
00:11:59,345 --> 00:12:02,545
Isso foi um deslize da minha língua.

169
00:12:03,872 --> 00:12:06,642
RXJs suporta operadores,

170
00:12:06,642 --> 00:12:11,292
operadores que são inspirados pelos operadores de matriz JavaScript.

171
00:12:11,292 --> 00:12:15,892
Se você está familiarizado com operadores de matriz JavaScript como mapa, em seguida,

172
00:12:18,202 --> 00:12:22,232
os operadores RxJs vai parecer muito familiar para você.

173
00:12:22,232 --> 00:12:25,372
Você pode tratar um observável e

174
00:12:25,372 --> 00:12:30,340
os valores que uma imagem observável como uma matriz, então é por isso que muitos dos

175
00:12:30,340 --> 00:12:36,170
os operadores de matriz encontrar seu caminho em RxJs e programação reativa também.

176
00:12:36,170 --> 00:12:40,250
Assim, os usuários mapear, filtrar, reduzir e

177
00:12:40,250 --> 00:12:46,440
outros operadores de array também encontrarão um lugar em RXJs e programação reativa.

178
00:12:46,440 --> 00:12:51,890
E isso é o que permite que você manipule eventos assíncronos como coleções.

179
00:12:51,890 --> 00:12:55,092
Então, quando você está querendo esperar por

180
00:12:55,092 --> 00:12:59,770
um evento assíncrono, ele será semelhante a se inscrever em um observável.

181
00:12:59,770 --> 00:13:03,684
Então, quando esse observável emite o valor, você está pronto para pegar o valor e

182
00:13:03,684 --> 00:13:05,550
então agir em conformidade.

183
00:13:05,550 --> 00:13:07,960
Você sabe quando essa emissão vai acontecer.

184
00:13:07,960 --> 00:13:13,220
Então essa é a parte assíncrona que entra em jogo com o uso de RXJs.

185
00:13:14,550 --> 00:13:19,480
E como já mencionei, a razão pela qual estamos interessados em RXJs é porque

186
00:13:19,480 --> 00:13:22,750
Angular aproveita a biblioteca RXJs para

187
00:13:23,900 --> 00:13:27,840
fazendo seu suporte para programação reativa.

188
00:13:27,840 --> 00:13:31,080
Angular em si tem um número de observáveis construídos,

189
00:13:31,080 --> 00:13:32,369
como veremos em pouco tempo.

190
00:13:33,430 --> 00:13:38,430
Quando você entra no mundo da programação reativa, muitas vezes você vai ouvir as pessoas falando

191
00:13:38,430 --> 00:13:42,230
sobre observáveis, então você vai ouvir as pessoas falando sobre operadores e

192
00:13:42,230 --> 00:13:45,830
então você também vai ouvir as pessoas falando sobre diagramas de mármore.

193
00:13:45,830 --> 00:13:49,290
Agora, diagramas de mármore são uma maneira de representar

194
00:13:50,390 --> 00:13:53,730
a programação reativa usando observáveis.

195
00:13:53,730 --> 00:13:55,710
Então, se acontecer de você ter um observável,

196
00:13:56,830 --> 00:14:02,070
então se você ver este observável como uma função do tempo,

197
00:14:02,070 --> 00:14:06,710
então se este eixo representa uma função do tempo, o observável

198
00:14:06,710 --> 00:14:12,090
estará periodicamente emitindo valores como este, um após o outro.

199
00:14:12,090 --> 00:14:16,896
Então, se você organizar esses valores ao longo de uma sequência,

200
00:14:16,896 --> 00:14:21,540
como uma função do tempo, então você veria valores sendo emitidos assim.

201
00:14:22,680 --> 00:14:26,350
Existe também a possibilidade de que você possa encontrar um erro.

202
00:14:27,750 --> 00:14:30,990
Nesse caso, você precisa lidar com o erro adequadamente.

203
00:14:30,990 --> 00:14:32,510
Se você manipular o erro adequadamente,

204
00:14:32,510 --> 00:14:37,830
você pode continuar ou você pode parar nesse ponto.

205
00:14:37,830 --> 00:14:41,520
Da mesma forma, quando um observável completa todas as suas iterações,

206
00:14:41,520 --> 00:14:44,730
então Ele vai ser marcado como a conclusão do observável.

207
00:14:44,730 --> 00:14:49,570
Então você precisa ser capaz de até mesmo lidar com o evento de conclusão em um observável.

208
00:14:49,570 --> 00:14:54,500
Dado este comportamento anotado de tempo do observável, você pode então tomar

209
00:14:54,500 --> 00:15:00,240
os valores que a imagem observável e aplicar operadores nesses observáveis.

210
00:15:00,240 --> 00:15:04,680
Agora esses valores podem ser vistos como uma matriz.

211
00:15:04,680 --> 00:15:10,120
Se isso ajuda você a entender melhor, você pode vê-lo como uma matriz de valores.

212
00:15:10,120 --> 00:15:15,140
Agora, esses valores podem então ser operados usando vários operadores.

213
00:15:15,140 --> 00:15:21,630
Então é aí que seu mapa, seu filtro, sua redução e vários operadores que

214
00:15:21,630 --> 00:15:26,560
qualquer biblioteca de programas reativos típicos como RXJs suporta.

215
00:15:26,560 --> 00:15:29,010
Permite transformar

216
00:15:29,010 --> 00:15:33,590
um conjunto de valores que você obtém de um observável em outro conjunto de valores.

217
00:15:33,590 --> 00:15:36,640
Assim, você acaba criando um novo observável.

218
00:15:36,640 --> 00:15:39,170
E este novo observável consistirá em

219
00:15:39,170 --> 00:15:42,830
valores transformados do observável original.

220
00:15:42,830 --> 00:15:48,294
Então essa é a razão pela qual eu mostro esses valores transformados como retângulos aqui.

221
00:15:48,294 --> 00:15:52,861
Só para lhe dar uma impressão visual do que é que estamos tentando fazer com

222
00:15:52,861 --> 00:15:54,170
um operador.

223
00:15:54,170 --> 00:15:58,620
Então você está pegando um valor e transformando em um valor diferente.

224
00:15:58,620 --> 00:16:01,640
E essa sequência desses valores diferentes que

225
00:16:01,640 --> 00:16:06,400
Você obtém transformando os valores emitidos por um observável.

226
00:16:06,400 --> 00:16:11,390
Se tornará outra cadeia de valores, e consequentemente,

227
00:16:11,390 --> 00:16:12,880
se tornará outra observável.

228
00:16:12,880 --> 00:16:16,820
Então você pode derivar um observável de outro observável.

229
00:16:16,820 --> 00:16:19,335
Mas este segundo observável é dependente do primeiro então depende.

230
00:16:19,335 --> 00:16:26,600
Seu comportamento é digitado, o primeiro através do uso deste operador.

231
00:16:26,600 --> 00:16:31,730
Vamos ver exemplos destes à medida que passarmos por alguns dos exercícios

232
00:16:31,730 --> 00:16:37,210
nesta lição e lições subsequentes.

233
00:16:37,210 --> 00:16:41,450
E quanto ao Angular e RXJs, como eles se reúnem?

234
00:16:41,450 --> 00:16:48,540
Angular, como mencionamos anteriormente, suporta uma série de observáveis por conta própria.

235
00:16:48,540 --> 00:16:53,375
E este suporte de observáveis em Angular permite que você faça alguma programação reativa

236
00:16:53,375 --> 00:16:59,070
dentro da sua aplicação Angular.

237
00:16:59,070 --> 00:17:02,210
Assim, por exemplo, formulários em Angular,

238
00:17:02,210 --> 00:17:06,340
vimos formas reativas já em uma das lições anteriores.

239
00:17:06,340 --> 00:17:11,040
Nesse ponto, eu nunca mencionei a palavra observável explicitamente lá.

240
00:17:11,040 --> 00:17:15,725
Mas agora que sabemos observável, vamos voltar para a forma reativa, e

241
00:17:15,725 --> 00:17:18,440
então fazer alguma transformação para a forma reativa.

242
00:17:18,440 --> 00:17:21,460
As próprias formas tornam-se observáveis em Angular.

243
00:17:21,460 --> 00:17:26,337
E qualquer alteração nos valores de qualquer um dos elementos de formulário,

244
00:17:26,337 --> 00:17:30,605
pode ser saída, e observada assinando

245
00:17:30,605 --> 00:17:36,280
o observável que a estrutura Angular fornece para nós.

246
00:17:36,280 --> 00:17:41,934
Da mesma forma, HTTP, que vamos encontrar no próximo módulo deste curso,

247
00:17:41,934 --> 00:17:46,500
também será baseado em torno de observáveis.

248
00:17:46,500 --> 00:17:52,720
Então, quando seu serviço vai e obtém dados de um servidor, a biblioteca HTTP,

249
00:17:52,720 --> 00:17:56,750
ou o módulo HTTP em Angular, suporta observables.

250
00:17:56,750 --> 00:17:59,780
Assim, sempre que você executar qualquer um dos métodos, obter, colocar, postar ou

251
00:17:59,780 --> 00:18:04,160
excluir, usando HTTP, eles lhe darão um

252
00:18:04,160 --> 00:18:07,730
observável que você pode então assinar dentro do seu serviço.

253
00:18:07,730 --> 00:18:11,495
E, em seguida, transformá-lo e, em seguida, dá-lo para seus componentes, e

254
00:18:11,495 --> 00:18:13,958
os componentes podem se inscrever para os observáveis.

255
00:18:13,958 --> 00:18:18,410
O serviço é fornecido através da transformação dos fluxos HTTP.

256
00:18:18,410 --> 00:18:21,780
E assim é onde a programação reativa e

257
00:18:21,780 --> 00:18:27,800
fluxo de dados através do seu aplicativo Angular se torna muito simples.

258
00:18:27,800 --> 00:18:32,840
Da mesma forma, há um AsyncPipe, que você encontrará mais tarde neste curso.

259
00:18:32,840 --> 00:18:38,631
E também alterar a detecção construída em torno de observáveis em Angular.

260
00:18:38,631 --> 00:18:44,310
Você verá alguns exemplos disso no resto deste curso.

261
00:18:44,310 --> 00:18:49,110
Agora, voltando à pergunta que vimos no slide anterior.

262
00:18:49,110 --> 00:18:53,615
Como você pega um observável e transformá-lo em outro observável?

263
00:18:53,615 --> 00:19:01,465
Aqui está um exemplo que você encontrará no exercício que segue esta palestra.

264
00:19:01,465 --> 00:19:07,415
Então aqui, temos o parâmetro de rota

265
00:19:07,415 --> 00:19:12,410
dentro do nosso componente de menu, que usa o parâmetro de rota para

266
00:19:12,410 --> 00:19:17,710
fornecer o valor do prato selecionado para o componente de detalhe do prato.

267
00:19:17,710 --> 00:19:20,250
Assim, o parâmetro route torna-se um observável.

268
00:19:20,250 --> 00:19:24,905
Módulo roteador do Angular tem uma atividade ActivatedRoute serviço que

269
00:19:24,905 --> 00:19:30,435
suporta um monte de observáveis e um deles sendo os parâmetros observáveis.

270
00:19:30,435 --> 00:19:33,996
Os parâmetros observáveis estão vinculados aos parâmetros de rota.

271
00:19:33,996 --> 00:19:37,615
E assim qualquer alteração nos parâmetros,

272
00:19:37,615 --> 00:19:43,620
na URL que você encontrar será emitida como um observável.

273
00:19:43,620 --> 00:19:47,521
Agora, então, quando você obtém o observável, assim como você pode ver,

274
00:19:47,521 --> 00:19:53,010
você pode obter acesso a este observável dizendo estes parâmetros de rota em seu código.

275
00:19:53,010 --> 00:19:55,415
Então os parâmetros em si é um observável aqui.

276
00:19:55,415 --> 00:19:57,666
Agora, para estes parâmetros observáveis,

277
00:19:57,666 --> 00:20:02,970
você pode aplicar um operador como um operador aqui chamado switchmap.

278
00:20:02,970 --> 00:20:05,830
Veremos o uso disso no trecho.

279
00:20:05,830 --> 00:20:09,840
O operador de mapa de comutação leva os parâmetros observáveis.

280
00:20:09,840 --> 00:20:17,190
E então transforma os paramás observáveis em outro observável que é um prato.

281
00:20:17,190 --> 00:20:21,861
Ele leva o valor params, e, em seguida, extrai o valor ID dos parâmetros,

282
00:20:21,861 --> 00:20:25,493
que lhe dá acesso ao parâmetro route, o id, ou

283
00:20:25,493 --> 00:20:30,708
o parâmetro que você especificou, e então usa isso para ir buscar o prato.

284
00:20:30,708 --> 00:20:38,265
Então, toda vez que o parâmetro muda, isso resultará em uma busca de um novo prato.

285
00:20:38,265 --> 00:20:42,045
E assim cada vez que o parâmetro muda,

286
00:20:42,045 --> 00:20:47,290
que é equivalente a emitir um novo valor por seus parâmetros observáveis.

287
00:20:47,290 --> 00:20:50,850
Isso é transformado em busca do novo prato para

288
00:20:50,850 --> 00:20:53,190
que é o ID correspondente.

289
00:20:53,190 --> 00:20:56,240
Assim, o prato vai então se tornar outro observável.

290
00:20:56,240 --> 00:21:01,100
Agora, quando este prato observável fica disponível, você pode assinar este

291
00:21:01,100 --> 00:21:05,850
prato observável aqui, e obter o valor do prato.

292
00:21:05,850 --> 00:21:10,490
E quando você obtém o valor do prato, então você pode pegar o valor do prato, e então

293
00:21:10,490 --> 00:21:17,742
criar sua variável de prato dentro do componente de detalhe do prato para esse valor do prato.

294
00:21:17,742 --> 00:21:22,468
Assim, qualquer alteração no parâmetro de rota se propaga através deste operador de mapa de comutação

295
00:21:22,468 --> 00:21:25,224
em um observável,

296
00:21:25,224 --> 00:21:28,296
que quando observado através do subscrito,

297
00:21:28,296 --> 00:21:32,569
permitirá que você transforme isso e atribua isso a outro prato.

298
00:21:32,569 --> 00:21:37,236
E quando isso acontece, sua visão pode ser atualizada com

299
00:21:37,236 --> 00:21:41,915
o novo prato que foi obtido a partir do serviço.

300
00:21:41,915 --> 00:21:47,106
Então agora, você vê como os dados fluem através do parâmetro route,

301
00:21:47,106 --> 00:21:50,184
através do operador switchmap e

302
00:21:50,184 --> 00:21:55,985
para resultando na mudança da visão do componente de detalhes do prato.

303
00:21:55,985 --> 00:22:01,000
Essa é a razão pela qual programação baseada observável ou

304
00:22:01,000 --> 00:22:05,060
programação reativa em Angular torna-se muito útil para

305
00:22:05,060 --> 00:22:09,070
implementar certos recursos dentro de seu aplicativo Angular.

306
00:22:09,070 --> 00:22:11,034
Este é um exemplo.

307
00:22:11,034 --> 00:22:15,984
Vamos ver o uso deste exemplo particular em

308
00:22:15,984 --> 00:22:20,332
o exercício que segue esta palestra.

309
00:22:20,332 --> 00:22:22,658
Eu pensei em tornar mais fácil para

310
00:22:22,658 --> 00:22:27,970
você se lembrar de tudo isso apenas cantando esta Ode to Observables.

311
00:22:27,970 --> 00:22:34,948
[MÚSICA]

312
00:22:34,948 --> 00:22:37,469
Você deve cantar isso ao som de,

313
00:22:37,469 --> 00:22:42,310
You Call Me Al de Paul Simon, da fama de Simon e Garfunkel.

314
00:22:42,310 --> 00:22:46,000
Se você está virando e dizendo, quem é Paul Simon?

315
00:22:46,000 --> 00:22:47,385
Desculpe, geração diferente.

316
00:22:47,385 --> 00:22:53,670
[MÚSICA]