1
00:00:03,680 --> 00:00:11,610
Agora que você teve sua primeira introdução à Programação Reativa, RXJs,

2
00:00:11,610 --> 00:00:14,880
e o uso do padrão observador e

3
00:00:14,880 --> 00:00:21,165
como Angular alavanca o padrão observador e suporta Programação Reativa,

4
00:00:21,165 --> 00:00:24,600
vamos passar para o nosso primeiro exercício para obter nossos pés

5
00:00:24,600 --> 00:00:29,315
molhado usando os observáveis em Angular.

6
00:00:29,315 --> 00:00:35,950
Neste exercício, vamos atualizar nossos serviços para fazer uso de observables,

7
00:00:35,950 --> 00:00:43,999
porque quando passamos para o próximo módulo onde vamos olhar para o suporte HTTP em Angular,

8
00:00:43,999 --> 00:00:49,915
vamos imediatamente entender que o suporte HTTP em Angular é baseado em torno de observáveis.

9
00:00:49,915 --> 00:00:54,485
Então, é uma boa idéia para nós nos familiarizarmos

10
00:00:54,485 --> 00:00:59,870
com o uso de observáveis nesta lição em si.

11
00:00:59,870 --> 00:01:04,770
Então, vamos atualizar os serviços para exportar observables.

12
00:01:04,770 --> 00:01:08,479
Posteriormente, dentro de nossos componentes,

13
00:01:08,479 --> 00:01:11,270
nós subscreveremos esses observáveis e

14
00:01:11,270 --> 00:01:15,190
obteremos os dados necessários para renderizar as exibições.

15
00:01:15,190 --> 00:01:19,340
Vamos para o exercício a seguir.

16
00:01:19,340 --> 00:01:21,680
Você deve estar se perguntando,

17
00:01:21,680 --> 00:01:25,390
como fazemos uso de RXJs dentro Angular,

18
00:01:25,390 --> 00:01:28,510
e já está disponível para nós?

19
00:01:28,510 --> 00:01:31,730
Então o que você vai notar é que com o Angular CLI,

20
00:01:31,730 --> 00:01:34,480
quando você andaime seu aplicativo Angular,

21
00:01:34,480 --> 00:01:37,040
RXJs é automaticamente incluído lá.

22
00:01:37,040 --> 00:01:39,560
Então, se você for para o arquivo package.json,

23
00:01:39,560 --> 00:01:42,795
você notaria que dentro das dependências,

24
00:01:42,795 --> 00:01:48,900
a biblioteca RxJS já está incluída em seu aplicativo.

25
00:01:48,900 --> 00:01:53,155
Então, tudo o que você precisa usar a partir de RXJs já está disponível para você.

26
00:01:53,155 --> 00:02:00,215
Assim, podemos ir em frente e usar a biblioteca RxJs imediatamente dentro da nossa aplicação Angular.

27
00:02:00,215 --> 00:02:03,735
Se você está construindo seu aplicativo Angular do zero,

28
00:02:03,735 --> 00:02:08,450
então você precisa fazer explicitamente uma instalação npm de RXJs.

29
00:02:08,450 --> 00:02:11,135
Indo para o arquivo dish.service.js,

30
00:02:11,135 --> 00:02:21,080
deixe-me primeiro importar o de

31
00:02:21,080 --> 00:02:27,750
de nossos observáveis 'rxjs'.

32
00:02:28,960 --> 00:02:32,045
Nós também vamos importar- Agora,

33
00:02:32,045 --> 00:02:35,235
quando você usar RXJs dentro de seu aplicativo Angular,

34
00:02:35,235 --> 00:02:37,330
toda a biblioteca não é incluído.

35
00:02:37,330 --> 00:02:41,445
Você só pode importar as partes que você precisa da biblioteca RxJs,

36
00:02:41,445 --> 00:02:43,400
e, em seguida, usá-la em seu aplicativo Angular.

37
00:02:43,400 --> 00:02:48,680
Então, quando seu aplicativo Angular estiver finalmente preparado para implantação,

38
00:02:48,680 --> 00:02:52,070
somente as partes de RXJs que são necessárias

39
00:02:52,070 --> 00:02:56,030
serão incluídas dentro de seu aplicativo Angular.

40
00:02:56,030 --> 00:02:58,055
O operador de atraso.

41
00:02:58,055 --> 00:03:07,815
O operador de atraso nos permite atrasar a emissão do item de nosso observável.

42
00:03:07,815 --> 00:03:09,780
Indo para os métodos,

43
00:03:09,780 --> 00:03:15,295
vamos agora atualizar esses métodos para fazer uso de observáveis,

44
00:03:15,295 --> 00:03:18,230
e vamos retornar uma promessa convertendo o observável

45
00:03:18,230 --> 00:03:21,755
em sua promessa usando o operador ToPromise.

46
00:03:21,755 --> 00:03:27,700
Então, se você já está tendo componentes que estão usando promessas,

47
00:03:27,700 --> 00:03:30,520
e você quer não modificar os componentes,

48
00:03:30,520 --> 00:03:33,470
você pode simplesmente converter um observável para sua promessa e, em seguida,

49
00:03:33,470 --> 00:03:37,890
enviar a promessa para seus componentes.

50
00:03:37,890 --> 00:03:42,265
Como percebemos, as promessas emitirão apenas um item,

51
00:03:42,265 --> 00:03:48,000
enquanto você pode ver que os observáveis são baseados em fluxos.

52
00:03:48,000 --> 00:03:51,350
Então, essa é a limitação que você obterá se você

53
00:03:51,350 --> 00:03:54,560
apenas usar o operador de dois promessa em observables

54
00:03:54,560 --> 00:03:58,520
e fazer uso dele porque o operador ToPromise

55
00:03:58,520 --> 00:04:03,525
permitirá que seu observável emita apenas um valor.

56
00:04:03,525 --> 00:04:09,350
Mas, por enquanto, vamos fazê-lo como o primeiro passo antes de

57
00:04:09,350 --> 00:04:14,665
avançar para a implementação completa e observável de nossos serviços.

58
00:04:14,665 --> 00:04:17,820
Então, indo para o método getDistes,

59
00:04:17,820 --> 00:04:22,370
Eu vou devolver esses pratos.

60
00:04:22,370 --> 00:04:27,950
Então, eu vou remover essa parte e, em seguida, dizer, retorno de.

61
00:04:27,950 --> 00:04:31,625
Se você quiser emitir apenas um valor do seu observável,

62
00:04:31,625 --> 00:04:33,260
você usará o método of,

63
00:04:33,260 --> 00:04:38,010
e que tomará qualquer valor que você deseja emitir lá.

64
00:04:38,010 --> 00:04:43,300
Isso é suficiente para a nossa aplicação atual no momento.

65
00:04:43,300 --> 00:04:46,160
Então, vamos fazer uso disso,

66
00:04:46,160 --> 00:04:52,040
e também queremos atrasar a emissão do valor por dois segundos.

67
00:04:52,040 --> 00:04:55,565
Então, eu vou mudar esta parte do código para usar

68
00:04:55,565 --> 00:05:01,895
o operador de atraso para o meu observável, usando pipe.

69
00:05:01,895 --> 00:05:09,360
Preciso converter isso paraPromise e emitir a promessa.

70
00:05:09,360 --> 00:05:14,775
Então, agora, meu método getDistes é atualizado para fazer uso de um observável,

71
00:05:14,775 --> 00:05:19,665
e, em seguida, converter isso em uma promessa e, em seguida, enviar a promessa para o meu componente.

72
00:05:19,665 --> 00:05:22,710
Portanto, não preciso fazer nenhuma atualização do componente.

73
00:05:22,710 --> 00:05:31,200
Vamos usar a mesma abordagem para atualizar os dois métodos restantes do meu serviço aqui.

74
00:05:31,200 --> 00:05:34,455
Então eu vou apenas copiar esta parte,

75
00:05:34,455 --> 00:05:42,225
e, em seguida, atualizar essa parte,

76
00:05:42,225 --> 00:05:46,140
em seguida, pegar a parte de atraso dela,

77
00:05:46,140 --> 00:05:54,080
e, em seguida, atualizar esta parte para usar o delay

78
00:05:54,080 --> 00:06:06,300
e converter este método ToPromise.

79
00:06:06,300 --> 00:06:10,980
Então, com isso, meu método GetDish também é atualizado.

80
00:06:10,980 --> 00:06:17,370
Deixe-me fazer a mesma coisa com o método getFeaturedDish.

81
00:06:17,370 --> 00:06:21,000
Novamente, se você quiser,

82
00:06:21,000 --> 00:06:23,040
você pode digitar tudo.

83
00:06:23,040 --> 00:06:32,270
Eu estou apenas sendo preguiçoso para apenas cortar e colar e mudar as partes que

84
00:06:32,270 --> 00:06:42,395
Quero alterar e converter este método ToPromise.

85
00:06:42,395 --> 00:06:52,800
É isso. Meu serviço está agora atualizado para retornar promessas de um observável aqui.

86
00:06:52,800 --> 00:06:54,405
Então, com esta atualização,

87
00:06:54,405 --> 00:06:58,620
meu serviço de prato é atualizado para fazer uso de observáveis em vez

88
00:06:58,620 --> 00:07:04,215
do que diretamente usando os valores.

89
00:07:04,215 --> 00:07:10,460
Da mesma forma, vá em frente e atualize o serviço líder e o serviço de promoção.

90
00:07:10,460 --> 00:07:13,415
Agora você notaria que eu já atualizei

91
00:07:13,415 --> 00:07:17,985
o serviço líder para fazer uso de observáveis.

92
00:07:17,985 --> 00:07:24,380
Da mesma forma, eu também atualizei o serviço de promoção para fazer uso de observáveis.

93
00:07:24,380 --> 00:07:28,200
Salve as alterações e vamos dar uma olhada no nosso aplicativo.

94
00:07:28,200 --> 00:07:29,890
Quando você vai para o navegador,

95
00:07:29,890 --> 00:07:34,745
você notaria que seu aplicativo executa exatamente da mesma maneira que antes

96
00:07:34,745 --> 00:07:41,010
e obtém os dados dos serviços exatamente como antes.

97
00:07:41,010 --> 00:07:45,160
Portanto, não é muito de uma mudança dentro de seu aplicativo como tal.

98
00:07:45,160 --> 00:07:46,850
Ele executa exatamente o mesmo.

99
00:07:46,850 --> 00:07:51,035
Então, observe que ao substituir suas promessas por observáveis,

100
00:07:51,035 --> 00:07:55,370
não houve muita mudança dentro de seu aplicativo como você espera.

101
00:07:55,370 --> 00:07:58,460
Agora, vamos um passo adiante.

102
00:07:58,460 --> 00:08:04,540
Vamos agora deixar nossos serviços retornar observables,

103
00:08:04,540 --> 00:08:08,240
e vamos atualizar os componentes para fazer uso de observáveis.

104
00:08:08,240 --> 00:08:09,835
A razão como mencionei,

105
00:08:09,835 --> 00:08:13,790
é porque quando atualizamos nossos serviços para usar

106
00:08:13,790 --> 00:08:18,420
o serviço HTTP para ir a um servidor para buscar os dados,

107
00:08:18,420 --> 00:08:25,345
então nós notaríamos que em Angular os métodos HTTP retornarão observáveis.

108
00:08:25,345 --> 00:08:30,260
Os serviços podem simplesmente passar os observáveis para os nossos componentes e deixar

109
00:08:30,260 --> 00:08:33,080
os componentes subscrever estes observables e fazer uso

110
00:08:33,080 --> 00:08:36,215
dos dados que eles obtêm assim.

111
00:08:36,215 --> 00:08:41,020
Então, este seria um passo intermediário para chegarmos a esse estágio.

112
00:08:41,020 --> 00:08:45,275
Vamos começar a olhar para HTTP no próximo módulo.

113
00:08:45,275 --> 00:08:48,234
Retornando aos nossos serviços,

114
00:08:48,234 --> 00:08:52,460
agora você pode remover o ToPromise primeiro removendo

115
00:08:52,460 --> 00:08:55,400
o operador ToPromise porque não precisamos mais dele

116
00:08:55,400 --> 00:08:59,660
e, em seguida, vamos simplesmente remover o ToPromise deste,

117
00:08:59,660 --> 00:09:04,110
importação observável e, em seguida, deixar

118
00:09:04,110 --> 00:09:09,044
nosso método retornar

119
00:09:09,044 --> 00:09:16,140
observables em vez de promessas.

120
00:09:16,140 --> 00:09:17,615
Então, como eu mencionei,

121
00:09:17,615 --> 00:09:21,420
o que uma promessa pode fazer um observável também pode fazer.

122
00:09:22,810 --> 00:09:28,400
Então, vamos atualizar todos estes para retornar observáveis.

123
00:09:28,400 --> 00:09:32,695
Faça o mesmo com os dois serviços restantes.

124
00:09:32,695 --> 00:09:36,680
Agora você notaria que eu também atualizei o serviço líder

125
00:09:36,680 --> 00:09:40,725
para simplesmente retornar observáveis em vez de promessas,

126
00:09:40,725 --> 00:09:43,984
e também o serviço de promoção foi correspondentemente

127
00:09:43,984 --> 00:09:47,735
atualizado para retornar observável em vez de promessas.

128
00:09:47,735 --> 00:09:52,460
Agora o que isso significa é que precisamos ir e atualizar nossos componentes

129
00:09:52,460 --> 00:09:57,590
para fazer uso de observáveis em vez de promessas como fizemos anteriormente.

130
00:09:57,590 --> 00:10:01,885
Agora, para promessa, vimos que precisamos usar o.then

131
00:10:01,885 --> 00:10:07,430
para obter o resultado quando a resolução da promessa é executada.

132
00:10:07,430 --> 00:10:12,495
Com um observável, o.then é convertido para.subscribe.

133
00:10:12,495 --> 00:10:16,715
A maneira como você consome os dados permanecerá exatamente a mesma.

134
00:10:16,715 --> 00:10:19,890
Então, com essa pequena alteração dentro de seus componentes,

135
00:10:19,890 --> 00:10:25,480
os componentes agora serão capazes de lidar com observáveis em vez de promessas.

136
00:10:25,480 --> 00:10:31,085
Então, indo para todos os quatro componentes que fazem uso dos serviços,

137
00:10:31,085 --> 00:10:37,185
primeiro, vamos para o arquivo menu.component.ts.

138
00:10:37,185 --> 00:10:39,280
No arquivo menu.component.ts,

139
00:10:39,280 --> 00:10:42,080
você notaria imediatamente a linha vermelha rabiscada lá,

140
00:10:42,080 --> 00:10:48,100
sob o então obviamente porque não estamos devolvendo uma promessa.

141
00:10:48,100 --> 00:10:50,090
Em vez disso, estamos retornando um observável.

142
00:10:50,090 --> 00:10:55,245
Então basta converter isso, em seguida, para se inscrever e é isso.

143
00:10:55,245 --> 00:10:59,225
Seu componente de menu agora é capaz de

144
00:10:59,225 --> 00:11:04,910
consumir os valores observáveis que estão sendo emitidos pelo observável.

145
00:11:04,910 --> 00:11:10,890
Faça a mesma alteração no arquivo about.component.ts,

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

147
00:11:16,760 --> 00:11:22,520
Depois de atualizar os arquivos Tapscott componentes restantes,

148
00:11:22,520 --> 00:11:27,245
vamos olhar para o comportamento do nosso aplicativo no navegador.

149
00:11:27,245 --> 00:11:32,920
Vá para o navegador, você não vai notar nenhuma diferença no comportamento da nossa aplicação.

150
00:11:32,920 --> 00:11:36,170
Esta versão do nosso aplicativo Angular é atualizada para usar

151
00:11:36,170 --> 00:11:40,275
observables em vez de promessas.

152
00:11:40,275 --> 00:11:42,620
Então, o componente home aqui,

153
00:11:42,620 --> 00:11:46,085
sobre componente executa exatamente da mesma maneira que antes,

154
00:11:46,085 --> 00:11:49,800
eo componente de menu faz exatamente a mesma coisa.

155
00:11:49,800 --> 00:11:54,785
Além disso, o componente de detalhe do prato se comportará exatamente da mesma maneira que antes.

156
00:11:54,785 --> 00:11:57,960
Com isso, completamos este exercício.

157
00:11:57,960 --> 00:12:01,430
Neste exercício, demos nossos primeiros passos para usar

158
00:12:01,430 --> 00:12:05,030
observáveis dentro de nossa aplicação Angular, atualizando

159
00:12:05,030 --> 00:12:08,330
os serviços e correspondentemente os componentes para

160
00:12:08,330 --> 00:12:12,185
fazer uso de observáveis em vez de promessas.

161
00:12:12,185 --> 00:12:18,640
Este é um bom momento para você fazer um commit git com a mensagem RXJs parte um.