1
00:00:00,000 --> 00:00:08,095
Agora que concluímos a atualização do lado do servidor,

2
00:00:08,095 --> 00:00:10,770
é hora de passar para o Cliente Angular.

3
00:00:10,770 --> 00:00:13,830
Para sua conveniência, forneci a você

4
00:00:13,830 --> 00:00:17,700
o repositório GitHub que contém a versão final do

5
00:00:17,700 --> 00:00:20,840
Cliente Angular que é capaz de se comunicar com o

6
00:00:20,840 --> 00:00:26,805
nosso REST API Server e, em seguida, renderizar as várias visualizações para o nosso cliente.

7
00:00:26,805 --> 00:00:29,690
Então, eu peguei a aplicação Angular que

8
00:00:29,690 --> 00:00:32,895
desenvolvemos no segundo curso desta especialização,

9
00:00:32,895 --> 00:00:34,380
e depois modifiquei.

10
00:00:34,380 --> 00:00:39,680
Faremos um breve tour pelo código em um pouco mais tarde.

11
00:00:39,680 --> 00:00:44,005
Agora, você clonará o repositório Git para o seu computador

12
00:00:44,005 --> 00:00:47,525
e, em seguida, inicializará o seu Cliente Angular

13
00:00:47,525 --> 00:00:50,820
e, em seguida, vê-lo se comunicando com o nosso lado do servidor.

14
00:00:50,820 --> 00:00:54,555
Vamos ver os detalhes a seguir.

15
00:00:54,555 --> 00:00:57,885
Para começar com este exercício,

16
00:00:57,885 --> 00:01:01,345
em seu terminal ou janela de comando,

17
00:01:01,345 --> 00:01:04,070
vá para seu local conveniente e, em seguida,

18
00:01:04,070 --> 00:01:06,685
no prompt, digite git clone

19
00:01:06,685 --> 00:01:21,615
https://github.com/jmuppala/conFusion-Angular6.git.

20
00:01:21,615 --> 00:01:28,705
Em seguida, deixe o aplicativo Angular ser clonado para o seu computador.

21
00:01:28,705 --> 00:01:30,495
Quando a clonagem estiver concluída,

22
00:01:30,495 --> 00:01:39,340
mova para a pasta Confusion-Angular6

23
00:01:39,340 --> 00:01:43,620
que acabou de ser criada quando você clonar este repositório git.

24
00:01:43,620 --> 00:01:48,845
Então você notará imediatamente que já há um monte de arquivos lá.

25
00:01:48,845 --> 00:01:56,700
Agora, no prompt, digite npm install,

26
00:01:56,700 --> 00:02:00,500
a fim de instalar todos os módulos de nó dos

27
00:02:00,500 --> 00:02:04,460
quais esta aplicação Angular é dependente.

28
00:02:04,460 --> 00:02:09,415
Assim, uma vez que os módulos de nó ou todos instalados,

29
00:02:09,415 --> 00:02:18,095
então podemos iniciar o nosso NG servir para compilar e servir nossa aplicação Angular.

30
00:02:18,095 --> 00:02:21,765
Uma vez que tudo é instalado pelo npm install,

31
00:02:21,765 --> 00:02:27,080
em seguida, certifique-se de que o seu MongoDB Server está

32
00:02:27,080 --> 00:02:32,365
em execução e também o seu REST API Server também está funcionando.

33
00:02:32,365 --> 00:02:35,165
Caso contrário, seu Cliente Angular não funcionará.

34
00:02:35,165 --> 00:02:39,720
Então, agora que você instalou seu Cliente Angular em seu computador,

35
00:02:39,720 --> 00:02:43,815
no prompt digite ng servir e

36
00:02:43,815 --> 00:02:50,755
seu aplicativo Angular será compilado e servido por ng servir em um curto espaço de tempo.

37
00:02:50,755 --> 00:02:54,725
Uma vez que seu aplicativo Angular é compilado com sucesso,

38
00:02:54,725 --> 00:02:59,345
em seguida, vá para um navegador e abra seu aplicativo Angular no navegador.

39
00:02:59,345 --> 00:03:01,025
Indo para o navegador,

40
00:03:01,025 --> 00:03:06,665
na barra de endereços,

41
00:03:06,665 --> 00:03:12,050
deixe-me digitar localhost:4200 e

42
00:03:12,050 --> 00:03:14,345
você verá que seu aplicativo Angular é

43
00:03:14,345 --> 00:03:17,930
iniciado e é visível na tela aqui.

44
00:03:17,930 --> 00:03:21,170
Você vai notar imediatamente que seu aplicativo Angular

45
00:03:21,170 --> 00:03:24,500
é capaz de buscar os dados do servidor e, em seguida, processar

46
00:03:24,500 --> 00:03:28,115
as várias partes de sua aplicação Angular exatamente como o que você

47
00:03:28,115 --> 00:03:33,040
fez no final de seu curso Angular.

48
00:03:33,080 --> 00:03:35,605
Quando você vai falar sobre pasta,

49
00:03:35,605 --> 00:03:42,730
você também verá que a página Sobre também renderiza as informações como tal.

50
00:03:42,730 --> 00:03:45,970
No menu, você vê os itens no menu que estão sendo

51
00:03:45,970 --> 00:03:49,475
exibidos exatamente como vimos com o aplicativo Angular.

52
00:03:49,475 --> 00:03:51,595
Agora, além disso, adicionei

53
00:03:51,595 --> 00:03:56,320
mais uma página ao aplicativo de página única chamado Meus Favoritos,

54
00:03:56,320 --> 00:04:02,590
para o qual você não pode navegar porque nenhum usuário está conectado ao sistema.

55
00:04:02,590 --> 00:04:05,960
Então, você vê que eu não tenho nenhum usuário conectado no sistema.

56
00:04:05,960 --> 00:04:09,120
Então, é por isso que não adianta indicar meus favoritos,

57
00:04:09,120 --> 00:04:10,845
porque você não sabe qual usuário,

58
00:04:10,845 --> 00:04:12,990
como favoritos, deve ser mostrado aqui.

59
00:04:12,990 --> 00:04:15,580
A página de contato como de costume.

60
00:04:15,580 --> 00:04:17,345
Agora, vamos fazer login.

61
00:04:17,345 --> 00:04:19,235
Para fazer login no nosso aplicativo,

62
00:04:19,235 --> 00:04:25,665
vamos clicar no botão Login e, em seguida, você veria que a caixa de diálogo Login aparece.

63
00:04:25,665 --> 00:04:32,620
Então, deixe-me fazer login como um dos usuários registrados,

64
00:04:32,620 --> 00:04:37,295
que registramos como parte deste curso anteriormente.

65
00:04:37,295 --> 00:04:39,100
Assim, uma vez que

66
00:04:39,100 --> 00:04:41,840
você fizer login, você notará imediatamente que,

67
00:04:41,840 --> 00:04:44,150
no canto direito,

68
00:04:44,150 --> 00:04:47,410
você vê que o botão Login agora se transformou em

69
00:04:47,410 --> 00:04:51,730
Logout e o nome do usuário é indicado aqui.

70
00:04:51,730 --> 00:04:54,500
Então, quem está logado é indicado aqui.

71
00:04:54,500 --> 00:04:56,110
Você também pode, em princípio,

72
00:04:56,110 --> 00:05:00,925
substituir isso pela imagem do usuário.

73
00:05:00,925 --> 00:05:03,715
Agora, para isso você precisa fazer mais modificações

74
00:05:03,715 --> 00:05:07,790
tanto para o cliente quanto para o servidor, a fim de suportar a exibição da imagem aqui.

75
00:05:07,790 --> 00:05:10,570
Mas, no momento, estou apenas mostrando como

76
00:05:10,570 --> 00:05:14,260
podemos exibir facilmente as informações do usuário aqui.

77
00:05:14,260 --> 00:05:17,200
Então, isso requer pequena modificação para o chefe do

78
00:05:17,200 --> 00:05:20,335
componente onde eu será capaz de recuperar

79
00:05:20,335 --> 00:05:23,410
o nome de usuário de um serviço

80
00:05:23,410 --> 00:05:27,060
chamado como o serviço OAuth que vamos falar em um curto espaço de tempo.

81
00:05:27,060 --> 00:05:29,420
Então, uma vez que o usuário faz login,

82
00:05:29,420 --> 00:05:31,955
então, se você agora clicar em Meus Favoritos,

83
00:05:31,955 --> 00:05:35,360
você notaria que não há nada nos meus favoritos para o usuário.

84
00:05:35,360 --> 00:05:40,815
Obviamente, porque o usuário ainda não escolheu nenhum favorito.

85
00:05:40,815 --> 00:05:44,675
Então, vamos agora para o Menu e, em seguida, no Menu,

86
00:05:44,675 --> 00:05:52,980
deixe-me selecionar um item e, em seguida, eles adicionarão este prato aos nossos favoritos.

87
00:05:52,980 --> 00:05:55,230
Então, indo abaixo aqui,

88
00:05:55,230 --> 00:05:58,415
você vê o símbolo do coração lá,

89
00:05:58,415 --> 00:06:02,655
clique nele e você verá que isso seria adicionado aos Favoritos.

90
00:06:02,655 --> 00:06:06,620
O fato de que isso foi adicionado aos Favoritos é indicado pela

91
00:06:06,620 --> 00:06:12,790
mudança no ícone aqui de um coração não preenchido para um coração cheio.

92
00:06:12,790 --> 00:06:15,790
Agora, se você for a qualquer outro prato,

93
00:06:15,790 --> 00:06:19,080
você notaria que este tem um coração não preenchido,

94
00:06:19,080 --> 00:06:22,795
o que significa que este ainda não está entre os nossos favoritos.

95
00:06:22,795 --> 00:06:25,070
Então, deixe-me adicionar mais um item aos

96
00:06:25,070 --> 00:06:29,990
meus favoritos e, em seguida, vamos adicionar um terceiro item aos meus favoritos também.

97
00:06:29,990 --> 00:06:37,455
Então, agora, você verá que se eu for agora para Meus Favoritos,

98
00:06:37,455 --> 00:06:42,560
você verá um conjunto de Meus Favoritos sendo exibido aqui.

99
00:06:42,560 --> 00:06:46,610
Então, você viu que eu acabei de adicionar estes três pratos aos Meus Favoritos.

100
00:06:46,610 --> 00:06:48,820
Então, estes estão sendo exibidos aqui.

101
00:06:48,820 --> 00:06:57,100
Então, isso é rastreado usando o ponto final de favoritos no lado do servidor,

102
00:06:57,100 --> 00:06:59,870
que eu implementei como parte de sua última tarefa.

103
00:06:59,870 --> 00:07:05,554
Então, se você fez essa atribuição corretamente, então esta parte deve funcionar como esperado.

104
00:07:05,554 --> 00:07:09,310
Agora, também podemos modificar Meu Favorito.

105
00:07:09,310 --> 00:07:11,320
Então, por exemplo, no canto direito aqui,

106
00:07:11,320 --> 00:07:14,165
você vê esta opção Excluir aqui.

107
00:07:14,165 --> 00:07:16,320
Então, deixe-me ligar isso.

108
00:07:16,320 --> 00:07:17,730
Então, ao ativá-lo,

109
00:07:17,730 --> 00:07:22,025
você verá imediatamente as três cruzes vermelhas

110
00:07:22,025 --> 00:07:27,630
aparecerão na parte inferior desses três itens em Meus Favoritos.

111
00:07:27,630 --> 00:07:29,905
Quando eu clico fora, então eles desaparecem.

112
00:07:29,905 --> 00:07:36,750
Então, esta é uma maneira de ativar os botões de exclusão em seus Meus Favoritos e, em seguida,.

113
00:07:36,750 --> 00:07:40,965
Então, deixe-me ir em frente e excluir um dos itens de Meus Favoritos.

114
00:07:40,965 --> 00:07:42,515
Então, quando eu clicar nesse botão,

115
00:07:42,515 --> 00:07:47,540
você notará imediatamente que esse item é excluído de Meus Favoritos,

116
00:07:47,540 --> 00:07:50,405
e imediatamente desaparece e Meus Favoritos é

117
00:07:50,405 --> 00:07:54,780
atualizado e você verá o valor resultante sendo mostrado aqui.

118
00:07:54,780 --> 00:07:56,115
Ao mesmo tempo,

119
00:07:56,115 --> 00:07:58,530
esta opção Excluir está desativada, de

120
00:07:58,530 --> 00:08:01,250
modo que os botões de exclusão não fiquem mais visíveis.

121
00:08:01,250 --> 00:08:07,610
Eu sempre posso voltar a ativar os botões de exclusão clicando em ativar e desativar aqui.

122
00:08:07,610 --> 00:08:11,210
Portanto, observe que os Meus Favoritos serão exibidos somente

123
00:08:11,210 --> 00:08:15,790
para usuários que estão conectados ao sistema.

124
00:08:15,790 --> 00:08:21,260
Então, você percebe imediatamente um conjunto de alterações que foram

125
00:08:21,260 --> 00:08:23,540
feitas no Cliente Angular para

126
00:08:23,540 --> 00:08:26,930
suportar alguns desses recursos adicionais que você vê aqui.

127
00:08:26,930 --> 00:08:31,190
Você também viu o recurso Login e Logout sendo suportado aqui.

128
00:08:31,190 --> 00:08:33,000
Então, quando eu clico no botão Logout,

129
00:08:33,000 --> 00:08:35,930
você percebe imediatamente que o usuário é desconectado

130
00:08:35,930 --> 00:08:39,800
e o nome de usuário desaparece de lá,

131
00:08:39,800 --> 00:08:44,250
e assim o botão também é transformado no botão Login.

132
00:08:44,560 --> 00:08:49,760
Então, com isso, você percebe como meu cliente Angular foi

133
00:08:49,760 --> 00:08:54,880
atualizado para fazer uso do novo servidor de API REST,

134
00:08:54,880 --> 00:08:59,100
a fim de suportar os favoritos que estão sendo salvos e no lado do servidor e, em

135
00:08:59,100 --> 00:09:04,930
seguida, sendo automaticamente refletido em meu aplicativo cliente, como mostrado aqui.

136
00:09:04,930 --> 00:09:08,305
Vamos fazer um breve tour

137
00:09:08,305 --> 00:09:14,160
pelo código Angular que eu forneci para você no repositório do GitHub,

138
00:09:14,160 --> 00:09:17,710
e também ver como modificamos partes do código

139
00:09:17,710 --> 00:09:21,655
para implementar o aplicativo Angular atualizado.

140
00:09:21,655 --> 00:09:24,310
Você vai notar que há um novo serviço

141
00:09:24,310 --> 00:09:27,130
que eu introduzi aqui chamado serviço de autenticação.

142
00:09:27,130 --> 00:09:29,295
O serviço de autenticação cuida de

143
00:09:29,295 --> 00:09:35,985
todas as ações relacionadas à autenticação para o aplicativo Angular.

144
00:09:35,985 --> 00:09:37,715
Então, dentro do serviço de autenticação,

145
00:09:37,715 --> 00:09:40,760
você deve notar imediatamente que eu tenho

146
00:09:40,760 --> 00:09:45,545
um conjunto de informações que eu configurei aqui.

147
00:09:45,545 --> 00:09:47,985
Como você já conhece Angular,

148
00:09:47,985 --> 00:09:52,535
você deve ser capaz de processar facilmente o que está escrito aqui.

149
00:09:52,535 --> 00:09:57,355
Observe em particular que dentro do próprio serviço de autenticação,

150
00:09:57,355 --> 00:09:59,240
estou armazenando informações como,

151
00:09:59,240 --> 00:10:00,815
por exemplo, o TokenKey,

152
00:10:00,815 --> 00:10:06,985
que é a chave para o armazenamento local onde estou armazenando o JSON Web Token,

153
00:10:06,985 --> 00:10:11,500
e também algumas variáveis adicionais

154
00:10:11,500 --> 00:10:16,310
aqui onde estou rastreando o nome de usuário e onde estou autenticado,

155
00:10:16,310 --> 00:10:21,955
e também manter o controle do JSON Web Token aqui.

156
00:10:21,955 --> 00:10:28,540
Agora, vamos começar olhando para quando o usuário faz login.

157
00:10:28,540 --> 00:10:30,290
Então, quando o usuário fizer login,

158
00:10:30,290 --> 00:10:37,135
então esta função chamada de login será chamada em nosso serviço de autenticação aqui,

159
00:10:37,135 --> 00:10:40,350
e quando o login é chamado no serviço de autenticação,

160
00:10:40,350 --> 00:10:44,730
isso será passado em um parâmetro chamado usuário que contém

161
00:10:44,730 --> 00:10:49,665
o nome de usuário e senha como parte do objeto JavaScript do usuário.

162
00:10:49,665 --> 00:10:57,890
Então, neste ponto, estou fazendo uma postagem HTTP para o BaseURL mais usuários/login.

163
00:10:57,890 --> 00:11:00,320
Observe também que aqui,

164
00:11:00,320 --> 00:11:06,030
eu estou fornecendo o AuthResponse como o qualificador aqui.

165
00:11:06,030 --> 00:11:09,945
O AuthResponse não passa de uma interface que eu implementei aqui,

166
00:11:09,945 --> 00:11:11,350
no topo aqui.

167
00:11:11,350 --> 00:11:14,295
Então, essa interface essencialmente especifica

168
00:11:14,295 --> 00:11:16,860
as informações que vão voltar como

169
00:11:16,860 --> 00:11:19,670
minha resposta de autenticação do lado do servidor,

170
00:11:19,670 --> 00:11:22,690
a estrutura dos dados JSON que está

171
00:11:22,690 --> 00:11:25,690
voltando do lado do servidor e os objetos JavaScript correspondentes.

172
00:11:25,690 --> 00:11:28,865
Então, você percebe que quando atualizamos o servidor,

173
00:11:28,865 --> 00:11:32,370
certificamo-nos de que o servidor está enviando de volta o status,

174
00:11:32,370 --> 00:11:37,035
o sucesso, o sinalizador e o token no índice de cadeia.

175
00:11:37,035 --> 00:11:42,000
Então, essa informação é obtida aqui.

176
00:11:42,000 --> 00:11:44,240
Agora, quando eu estou fazendo uma postagem sobre isso,

177
00:11:44,240 --> 00:11:52,975
eu estou passando o nome de usuário e senha para o post neste endpoint /users/login.

178
00:11:52,975 --> 00:11:58,375
Quando a resposta voltar da resposta,

179
00:11:58,375 --> 00:12:03,490
a mensagem de resposta em si conterá, como vimos,

180
00:12:03,490 --> 00:12:06,525
o sucesso, o campo de token

181
00:12:06,525 --> 00:12:09,885
e também a mensagem de status aqui.

182
00:12:09,885 --> 00:12:11,950
Então, a partir da mensagem de resposta,

183
00:12:11,950 --> 00:12:16,960
estou extraindo o token e, em seguida, passando-o para esta função que eu implemento aqui,

184
00:12:16,960 --> 00:12:20,415
função local aqui, chamada StoreUserCredentials.

185
00:12:20,415 --> 00:12:30,295
Então, isso será devolvido ao meu aplicativo e será armazenado no lado do meu cliente,

186
00:12:30,295 --> 00:12:32,220
no armazenamento local.

187
00:12:32,220 --> 00:12:34,545
Então, a partir desta função,

188
00:12:34,545 --> 00:12:37,870
estou retornando essas informações de volta para

189
00:12:37,870 --> 00:12:51,610
a função de chamada de onde iniciei o processo de login.

190
00:12:51,610 --> 00:12:56,345
Então, desta forma, eu estarei indicando ao meu componente de login que o login foi bem-sucedido,

191
00:12:56,345 --> 00:12:59,680
e então eu também passarei o nome de usuário para o meu componente de login,

192
00:12:59,680 --> 00:13:03,860
que então passará essas informações para o componente de cabeçalho,

193
00:13:03,860 --> 00:13:08,830
e o componente de cabeçalho usa isso para refletir o nome de usuário no barra de ferramentas no topo lá,

194
00:13:08,830 --> 00:13:11,145
e também pegamos o erro aqui.

195
00:13:11,145 --> 00:13:16,390
Então, esta é uma implementação muito simples de como realizamos o login.

196
00:13:16,390 --> 00:13:17,840
Quando você faz o logout,

197
00:13:17,840 --> 00:13:20,735
observe o que eu faço quando o usuário chama um logout.

198
00:13:20,735 --> 00:13:22,070
Quando o usuário chama um logout,

199
00:13:22,070 --> 00:13:24,560
eu simplesmente destruo as credenciais do usuário, o

200
00:13:24,560 --> 00:13:26,845
que inclui jogar fora

201
00:13:26,845 --> 00:13:33,085
o JSON Web Token que obtive quando fiz login no meu aplicativo.

202
00:13:33,085 --> 00:13:37,010
Em seguida, algumas funções auxiliares adicionais que eu implementei aqui chamado

203
00:13:37,010 --> 00:13:40,920
getUsername é logado e getToken, o

204
00:13:40,920 --> 00:13:45,370
que será útil de meus outros aplicativos,

205
00:13:45,370 --> 00:13:50,140
outros componentes e serviços.

206
00:13:50,140 --> 00:13:57,375
Então, agora vamos olhar para algumas das funções auxiliares que implementamos aqui.

207
00:13:57,375 --> 00:14:04,685
Então, LoadUserCredentials recuperará as credenciais do armazenamento local.

208
00:14:04,685 --> 00:14:10,800
Então, você percebe que aqui estou chamando LocalStorage e, em seguida, dizendo GetItem.

209
00:14:10,800 --> 00:14:12,750
Então, o LocalStorage aqui está usando

210
00:14:12,750 --> 00:14:17,305
o armazenamento local do navegador da Web que é suportado por navegadores da Web padrão,

211
00:14:17,305 --> 00:14:19,140
e armazenando as informações lá,

212
00:14:19,140 --> 00:14:21,620
e então ele está recuperando essas informações lá.

213
00:14:21,620 --> 00:14:23,830
Em seguida, a partir daí, as informações da credencial,

214
00:14:23,830 --> 00:14:25,745
se forem válidas,

215
00:14:25,745 --> 00:14:27,950
então essas credenciais serão configuradas aqui.

216
00:14:27,950 --> 00:14:32,735
Então, todas essas variáveis que defini aqui serão inicializadas com

217
00:14:32,735 --> 00:14:38,965
as informações apropriadas depois de serem recuperadas do LocalStorage.

218
00:14:38,965 --> 00:14:42,560
Agora, da mesma forma, a função StoreUserCredentials

219
00:14:42,560 --> 00:14:46,285
que implementei aqui é chamada do método de login.

220
00:14:46,285 --> 00:14:50,165
Quando essas informações são

221
00:14:50,165 --> 00:14:52,290
transmitidas, as informações de credencial são transmitidas,

222
00:14:52,290 --> 00:14:57,665
essas informações são armazenadas no LocalStorage neste ponto com essa chave.

223
00:14:57,665 --> 00:15:00,825
Em seguida, o UseCredentials basicamente

224
00:15:00,825 --> 00:15:05,510
configura todas as variáveis que eu tenho no serviço de autenticação.

225
00:15:05,510 --> 00:15:07,285
Então, ele configura o token,

226
00:15:07,285 --> 00:15:09,225
ele configura o nome de usuário

227
00:15:09,225 --> 00:15:14,270
e, em seguida, ele configura a função IsAuthenticated aqui.

228
00:15:14,270 --> 00:15:17,590
Então, note que o próprio nome de usuário aqui,

229
00:15:17,590 --> 00:15:20,865
Eu declarei como um assunto,

230
00:15:20,865 --> 00:15:23,595
que não é nada além de um observável aqui.

231
00:15:23,595 --> 00:15:27,410
Então, é por isso que sempre que eu digo,

232
00:15:27,410 --> 00:15:30,705
sendUsername aqui, eu digo credenciais nome de usuário.

233
00:15:30,705 --> 00:15:34,780
Então, este sendUsername implementado na parte superior aqui,

234
00:15:34,780 --> 00:15:40,080
observe que este é o lugar onde o valor observável é enviado de volta.

235
00:15:40,080 --> 00:15:43,305
Então, é por isso que estou dizendo esse nome de usuário a seguir.

236
00:15:43,305 --> 00:15:45,370
Então, o observável.

237
00:15:45,370 --> 00:15:49,630
Enviará de volta o nome que é fornecido

238
00:15:49,630 --> 00:15:55,130
como parâmetro para quem se registrou para observar este observável.

239
00:15:55,130 --> 00:15:59,070
Então este observável, eu vou estar observando isso a partir do

240
00:15:59,070 --> 00:16:03,980
meu componente de cabeçalho e assim sempre que o nome de usuário muda,

241
00:16:03,980 --> 00:16:09,870
seja de indefinido para um dado nome de usuário ou vice-versa,

242
00:16:09,870 --> 00:16:13,040
então eu posso atualizar minha barra de ferramentas

243
00:16:13,040 --> 00:16:17,670
no componente de cabeçalho para refletir se o usuário está logado ou desconectado.

244
00:16:17,670 --> 00:16:21,770
Então, isso é configurado usando este UseCredentials.

245
00:16:21,770 --> 00:16:29,010
Agora o DestroyUserCredentials basicamente define o token de autenticação como indefinido.

246
00:16:29,010 --> 00:16:34,320
Ele limpa o nome de usuário e, em seguida, define o isAuthenticated como false e, em seguida,

247
00:16:34,320 --> 00:16:37,560
remove esta informação da minha loja local

248
00:16:37,560 --> 00:16:40,930
que é basicamente jogar fora o jsonwebtoken nesta parte.

249
00:16:40,930 --> 00:16:43,330
Então é assim que você ama um usuário.

250
00:16:43,330 --> 00:16:47,150
Assim, uma vez que o jsonwebtoken é perdido, o usuário não pode mais

251
00:16:47,150 --> 00:16:49,850
se autenticar

252
00:16:49,850 --> 00:16:53,305
no lado do servidor porque o token não está mais disponível para nós.

253
00:16:53,305 --> 00:16:58,340
Então é assim que implementamos a função de logout dentro do nosso aplicativo.

254
00:16:58,340 --> 00:17:01,030
Então, reserve algum tempo para passar pelo

255
00:17:01,030 --> 00:17:05,350
auth.service aqui para ver como eu implementei as várias funcionalidades.

256
00:17:05,350 --> 00:17:06,865
Agora, neste momento,

257
00:17:06,865 --> 00:17:13,190
tenho certeza que você está muito familiarizado com a forma como os aplicativos Angulares são implementados, por

258
00:17:13,190 --> 00:17:17,960
isso não deve ser tão difícil para você entender como esse código é implementado.

259
00:17:17,960 --> 00:17:24,575
Agora, mais uma função para a qual eu chamaria sua atenção é o token JWT cheque, aqui.

260
00:17:24,575 --> 00:17:29,040
Esta função pode ser chamada a qualquer momento para verificar e

261
00:17:29,040 --> 00:17:33,360
certificar-se de que o nosso token web JSON ainda é válido.

262
00:17:33,360 --> 00:17:40,500
Então, este é o lugar onde eu estou enviando a solicitação get para os usuários barra cheque JWT token.

263
00:17:40,500 --> 00:17:49,450
Lembre-se de que implementamos esta rota no lado do servidor nos s.js e.

264
00:17:49,450 --> 00:17:55,385
Então, a partir daí, poderemos verificar se o jsonwebtoken ainda é válido ou não.

265
00:17:55,385 --> 00:17:57,855
Se o jsonwebtoken não é válido,

266
00:17:57,855 --> 00:17:59,170
então vamos destruir

267
00:17:59,170 --> 00:18:03,045
as credenciais do usuário e, em seguida, esperar que o usuário faça login novamente.

268
00:18:03,045 --> 00:18:06,550
Se o jsonwebtoken é válido, então está tudo bem e

269
00:18:06,550 --> 00:18:10,375
podemos prosseguir com permitindo que o usuário

270
00:18:10,375 --> 00:18:14,540
para reconhecer que estamos logados in.Então, mesmo se você fechar

271
00:18:14,540 --> 00:18:18,665
seu navegador e, em seguida, reabriu o navegador e, em seguida, reabriu seu aplicativo Angular,

272
00:18:18,665 --> 00:18:26,625
se você tivesse feito login anteriormente e o jsonwebtoken foi salvo no armazenamento local,

273
00:18:26,625 --> 00:18:28,930
ele pode ser recuperado de lá e, em seguida,

274
00:18:28,930 --> 00:18:33,740
seu status de login será restaurado dentro do seu aplicativo Angular.

275
00:18:33,740 --> 00:18:36,420
Se o token da web json expirar,

276
00:18:36,420 --> 00:18:38,635
não teremos permissão para fazer login.

277
00:18:38,635 --> 00:18:44,280
Então, toda vez que você atualizar seu aplicativo Angular em seu navegador ou

278
00:18:44,280 --> 00:18:47,290
recarregar seu aplicativo Angular em seu navegador, você estará

279
00:18:47,290 --> 00:18:50,550
verificando o jsonwebtoken para se certificar de que ele ainda é válido.

280
00:18:50,550 --> 00:18:53,095
Se não for válido, o usuário será

281
00:18:53,095 --> 00:18:56,200
eliminado e assim você terá que fazer login novamente.

282
00:18:56,200 --> 00:19:00,370
Caso contrário, as informações do usuário conectado serão recuperadas

283
00:19:00,370 --> 00:19:05,020
do LocalStorage e inicializadas dentro do meu aplicativo Angular.

284
00:19:05,020 --> 00:19:09,765
Periodicamente, se em qualquer momento o seu servidor

285
00:19:09,765 --> 00:19:15,575
responder com uma mensagem 401 não autorizada,

286
00:19:15,575 --> 00:19:16,880
mesmo nesse ponto,

287
00:19:16,880 --> 00:19:22,045
vamos novamente cruzar para ver se o jsonwebtoken é válido e, em seguida, permitir isso.

288
00:19:22,045 --> 00:19:26,960
Faremos isso usando algo chamado interceptores Http.

289
00:19:26,960 --> 00:19:30,630
Deixe-me fazer uma visita guiada a essa parte do código,

290
00:19:30,630 --> 00:19:35,180
e depois explicar-lhe como os interceptores funcionam daqui a pouco.

291
00:19:35,180 --> 00:19:38,635
Então, agora, além de AuthService,

292
00:19:38,635 --> 00:19:45,545
na pasta de serviços em si você verá este arquivo chamado AuthInterceptors.ts arquivo.

293
00:19:45,545 --> 00:19:51,285
Então abra isso e você verá que aqui eu implementei interceptores Http.

294
00:19:51,285 --> 00:19:54,435
Agora o que esses interceptores Http fazem,

295
00:19:54,435 --> 00:20:00,780
isso é suportado com o cliente Http que vem como parte do Angular 4.4.

296
00:20:00,780 --> 00:20:04,080
O que os interceptores http fazem é que eles podem interceptar

297
00:20:04,080 --> 00:20:06,180
solicitações de saída mensagens

298
00:20:06,180 --> 00:20:09,695
fazer modificações na mensagem de solicitação antes que ela seja enviada.

299
00:20:09,695 --> 00:20:13,530
Da mesma forma, eles podem interceptar mensagens de resposta recebidas e, em seguida, modificar

300
00:20:13,530 --> 00:20:15,660
a mensagem de resposta recebida antes que

301
00:20:15,660 --> 00:20:18,970
a resposta seja entregue ao aplicativo Angular.

302
00:20:18,970 --> 00:20:22,920
Então, através da interceptação, como funciona este interceptor?

303
00:20:22,920 --> 00:20:25,625
Então, para fazer este interceptor funcionar,

304
00:20:25,625 --> 00:20:28,620
nós implementamos, como você vê,

305
00:20:28,620 --> 00:20:37,285
uma classe chamada como um HttpInterceptor estendendo o HttpInterceptor.

306
00:20:37,285 --> 00:20:39,805
Então aqui eu implementei o AuthInterceptor.

307
00:20:39,805 --> 00:20:42,175
Então, o que esse AuthInterceptor faz?

308
00:20:42,175 --> 00:20:47,660
Este AuthInterceptor está basicamente capturando solicitações de saída.

309
00:20:47,660 --> 00:20:51,785
Então, para capturar uma solicitação de saída, você chama essa função chamada interceptar

310
00:20:51,785 --> 00:20:56,700
e, em seguida, isso lhe dará acesso ao pedido e ao próximo.

311
00:20:56,700 --> 00:21:00,550
Então você poderia encadear

312
00:21:00,550 --> 00:21:05,080
um monte de interceptores um atrás do outro se você assim escolher, para

313
00:21:05,080 --> 00:21:11,050
que eles possam processar as solicitações de saída um após o outro se você assim escolher.

314
00:21:11,050 --> 00:21:20,260
O que esta interceptação faz é que lhe dá acesso à mensagem de solicitação Http.

315
00:21:20,260 --> 00:21:23,300
Então, quando eu obter acesso à mensagem de solicitação Http,

316
00:21:23,300 --> 00:21:27,810
você notaria que aqui estou injetando o serviço de autenticação.

317
00:21:27,810 --> 00:21:33,870
Agora, ao contrário da maneira como estávamos injetando serviços em componentes,

318
00:21:33,870 --> 00:21:37,295
aqui estou mostrando o uso de um injetor.

319
00:21:37,295 --> 00:21:39,995
Um injetor faz parte do código angular.

320
00:21:39,995 --> 00:21:44,080
Assim, usando um injetor, você pode injetar serviços ou

321
00:21:44,080 --> 00:21:50,020
outros componentes em outros serviços ou componentes.

322
00:21:50,020 --> 00:21:57,495
Então aqui você vê que eu estou injetando o serviço de autenticação aqui usando isso.

323
00:21:57,495 --> 00:22:04,690
Agora uma outra razão é que se eu injetar diretamente o serviço no meu construtor,

324
00:22:04,690 --> 00:22:11,545
ele desenvolverá uma dependência circular entre o interceptor e o AuthService,

325
00:22:11,545 --> 00:22:15,200
e isso fará com que seu código não funcione.

326
00:22:15,200 --> 00:22:18,190
Então esta é uma solução para os problemas.

327
00:22:18,190 --> 00:22:21,430
Para que o seu interceptor- porque eu preciso do

328
00:22:21,430 --> 00:22:25,810
AuthService, a fim de obter o token do

329
00:22:25,810 --> 00:22:31,680
AuthService e AuthService por sua vez depende deste interceptor, então é

330
00:22:31,680 --> 00:22:38,760
por isso que, a fim de quebrar o loop eu estou explicitamente injetando o AuthService neste caso.

331
00:22:38,760 --> 00:22:42,630
Agora isso é algo que eu descobri por tentativa

332
00:22:42,630 --> 00:22:47,080
e erro eu inicialmente fui em frente e simplesmente injetou

333
00:22:47,080 --> 00:22:49,600
os serviços ímpares para o construtor e, em seguida, descobri que

334
00:22:49,600 --> 00:22:54,270
Angular não estava compilando o código, então eu descobri que

335
00:22:54,270 --> 00:23:01,510
havia um erro lá e depois de fazer alguma pesquisa no Google então

336
00:23:01,510 --> 00:23:05,330
descobriu que esta é uma maneira alternativa de lidar com

337
00:23:05,330 --> 00:23:09,620
a mesma coisa e isso funciona muito melhor para a nossa aplicação.

338
00:23:09,620 --> 00:23:13,560
Então, uma vez que eu injetar o AuthService do serviço, eu

339
00:23:13,560 --> 00:23:17,555
pego o token e, em seguida, percebo o que estou fazendo aqui.

340
00:23:17,555 --> 00:23:23,200
Aqui estou dizendo clone const auth req req clone.

341
00:23:23,200 --> 00:23:29,380
Então, vamos clonar a solicitação e, em seguida, vamos configurar nos cabeçalhos.

342
00:23:29,380 --> 00:23:32,110
Então vamos dizer req cabeçalhos definir

343
00:23:32,110 --> 00:23:35,240
autorização e, em seguida, notar o que eu estou

344
00:23:35,240 --> 00:23:38,005
configurando o cabeçalho de autorização para ser, portador.

345
00:23:38,005 --> 00:23:42,100
Mais AuthToken.

346
00:23:42,100 --> 00:23:47,360
Então, no cabeçalho de autorização estou configurando o portador e AuthToken aqui.

347
00:23:47,360 --> 00:23:49,550
Então é assim que eu estou configurando

348
00:23:49,550 --> 00:23:53,080
o cabeçalho de autorização

349
00:23:53,080 --> 00:23:57,465
na mensagem de solicitação de saída no meu aplicativo Angular. Então, bem ali.

350
00:23:57,465 --> 00:24:01,660
E foi assim que assegurei que todas as solicitações de saída

351
00:24:01,660 --> 00:24:06,645
terão o cabeçalho de autorização configurado antes de serem passadas para o lado do servidor.

352
00:24:06,645 --> 00:24:12,775
E depois disso, vamos simplesmente passá-lo para o próximo interceptor, se ele existir,

353
00:24:12,775 --> 00:24:15,140
ou para a fila de saída, de

354
00:24:15,140 --> 00:24:19,935
modo que a mensagem de solicitação será enviada para o lado do servidor.

355
00:24:19,935 --> 00:24:24,830
Da mesma forma, tenho outro interceptor que implementei aqui.

356
00:24:24,830 --> 00:24:30,260
Este interceptor intercepta todas as mensagens de resposta não autorizadas

357
00:24:30,260 --> 00:24:31,800
que estão voltando do lado do servidor.

358
00:24:31,800 --> 00:24:37,150
Então, se o servidor responder com uma mensagem de resposta não autorizada 401.

359
00:24:37,150 --> 00:24:39,550
Então, nesse ponto novamente, mesma coisa,

360
00:24:39,550 --> 00:24:42,760
Eu configurei o AuthService aqui,

361
00:24:42,760 --> 00:24:46,410
e, em seguida, dentro aqui, então eu vou dizer,

362
00:24:46,410 --> 00:24:49,060
fazer manipular se erro.

363
00:24:49,060 --> 00:24:54,800
Então é aqui que vou conseguir o HttpEvent aqui.

364
00:24:54,800 --> 00:25:04,580
O HttpEvent é um objeto de nível inferior a uma solicitação,

365
00:25:04,580 --> 00:25:08,630
mas isso nos permite obter acesso à mensagem de resposta de entrada,

366
00:25:08,630 --> 00:25:12,530
e então vamos verificar se há um erro,

367
00:25:12,530 --> 00:25:17,235
e, em seguida, se erro é uma instância de resposta de erro HTTP,

368
00:25:17,235 --> 00:25:20,770
e se o status de erro é 401.

369
00:25:20,770 --> 00:25:28,220
Então, o que significa que acabei de detectar que o servidor enviou de volta uma mensagem de erro 401.

370
00:25:28,220 --> 00:25:32,305
Então, o que significa que houve algum problema de autorização no lado do servidor.

371
00:25:32,305 --> 00:25:33,790
Então, nesse ponto, vou verificar

372
00:25:33,790 --> 00:25:37,620
o token da web json para ter certeza de que o token da web json ainda é válido.

373
00:25:37,620 --> 00:25:39,030
Se não for válido,

374
00:25:39,030 --> 00:25:44,910
descartarei minhas credenciais e espero que o usuário faça login novamente.

375
00:25:44,910 --> 00:25:48,880
Assim, eu vou garantir que se meu token json web

376
00:25:48,880 --> 00:25:53,480
expirar no processo de tentar buscar dados,

377
00:25:53,480 --> 00:25:58,045
que ainda será interceptado por aqui porque se o servidor responder com um 401,

378
00:25:58,045 --> 00:26:00,280
eu vou interceptar isso e depois limpar

379
00:26:00,280 --> 00:26:03,830
meu token json web e espero que o usuário faça login novamente.

380
00:26:03,830 --> 00:26:08,750
Também podemos redirecionar o usuário para a página de login se você quiser,

381
00:26:08,750 --> 00:26:12,330
mas com o aplicativo Angular é um pouco mais complicado

382
00:26:12,330 --> 00:26:16,275
fazer isso e eu não queria confundi-lo fazendo tudo isso.

383
00:26:16,275 --> 00:26:19,385
Em vez disso, estou simplesmente desconectando

384
00:26:19,385 --> 00:26:22,500
o usuário neste momento e destruindo as credenciais do usuário, de

385
00:26:22,500 --> 00:26:25,855
modo que o usuário deverá fazer login nesse ponto.

386
00:26:25,855 --> 00:26:33,880
Então, manipulação simples de como injetamos o cabeçalho de autorização na solicitação de saída,

387
00:26:33,880 --> 00:26:38,850
e também interceptar quaisquer 401 mensagens não autorizadas

388
00:26:38,850 --> 00:26:40,820
que estão voltando do lado do servidor.

389
00:26:40,820 --> 00:26:45,860
Então, você vê como essas alterações adicionais precisam ser

390
00:26:45,860 --> 00:26:51,955
feitas em seu aplicativo Angular, a fim de fazê-lo funcionar com o lado do servidor.

391
00:26:51,955 --> 00:26:55,125
Com a parte de autenticação definida,

392
00:26:55,125 --> 00:26:58,200
se você não tiver autenticação e se você estiver indo apenas para

393
00:26:58,200 --> 00:27:02,485
acessar os pontos finais da API restantes e obter operações,

394
00:27:02,485 --> 00:27:05,240
você nem precisa se preocupar com nenhuma dessas coisas.

395
00:27:05,240 --> 00:27:06,790
Nenhuma autenticação é necessária.

396
00:27:06,790 --> 00:27:09,140
Os dados podem ser obtidos com muita facilidade.

397
00:27:09,140 --> 00:27:10,590
Mas para qualquer post,

398
00:27:10,590 --> 00:27:12,395
colocar e excluir operações,

399
00:27:12,395 --> 00:27:15,630
precisamos suportar todos esses recursos.

400
00:27:15,630 --> 00:27:21,375
Então essa é a razão pela qual eu implementei a parte de autenticação em meu aplicativo.

401
00:27:21,375 --> 00:27:23,995
Além disso, como ilustrei anteriormente,

402
00:27:23,995 --> 00:27:26,985
quando nenhum usuário estiver conectado,

403
00:27:26,985 --> 00:27:32,570
então não poderemos navegar para o endpoint dos meus favoritos,

404
00:27:32,570 --> 00:27:35,035
mas quando um usuário estiver conectado,

405
00:27:35,035 --> 00:27:40,420
poderemos ver os meus favoritos para o usuário específico.

406
00:27:40,420 --> 00:27:45,095
Isso é implementado usando guardas de rota em Angular.

407
00:27:45,095 --> 00:27:47,995
Agora, para implementar esses guardas de rota,

408
00:27:47,995 --> 00:27:52,080
eu implementei outro serviço aqui chamado AuthGuardService.

409
00:27:52,080 --> 00:27:54,170
Então, neste AuthGuardService,

410
00:27:54,170 --> 00:27:57,970
implementamos este método chamado método CANActivate que

411
00:27:57,970 --> 00:28:02,225
vamos subclasse, a fim de implementar isso.

412
00:28:02,225 --> 00:28:05,705
E no método CANActivate,

413
00:28:05,705 --> 00:28:08,550
a implementação retornará um booleano

414
00:28:08,550 --> 00:28:10,090
e, neste caso,

415
00:28:10,090 --> 00:28:15,630
o que verificamos é se esse usuário estiver conectado,

416
00:28:15,630 --> 00:28:18,605
então permitiremos que o usuário navegue.

417
00:28:18,605 --> 00:28:25,480
Caso contrário, você navegará o usuário até o ponto final inicial.

418
00:28:25,480 --> 00:28:31,175
Então é assim que o guarda de rota é implementado neste caso.

419
00:28:31,175 --> 00:28:33,955
Agora, para fazer uso deste guarda de rota,

420
00:28:33,955 --> 00:28:41,780
vamos ver como as rotas são atualizadas para fazer uso dos guardas de rota.

421
00:28:41,780 --> 00:28:44,520
Então, no arquivo routes.ts,

422
00:28:44,520 --> 00:28:50,435
você pode ver que para o componente favoritos,

423
00:28:50,435 --> 00:28:54,510
vemos que especificamos o caminho como favoritos e o componente como

424
00:28:54,510 --> 00:28:58,620
FavoritesComponent e, em seguida, especificamos este outro campo

425
00:28:58,620 --> 00:29:07,785
chamado CanActivate para o qual especificamos AuthGuard como o parâmetro aqui,

426
00:29:07,785 --> 00:29:12,445
e este AuthGuard não é nada além do serviço AuthGuard que implementamos,

427
00:29:12,445 --> 00:29:14,825
que é importado aqui.

428
00:29:14,825 --> 00:29:20,405
Assim, quando o AuthGuard for avaliado como falso,

429
00:29:20,405 --> 00:29:24,755
então você não terá permissão para navegar para o componente favorito,

430
00:29:24,755 --> 00:29:28,105
em vez disso, você será redirecionado para casa,

431
00:29:28,105 --> 00:29:36,245
mas quando o usuário estiver conectado, obviamente, o AuthGuard avaliará como verdadeiro

432
00:29:36,245 --> 00:29:37,390
e, neste caso,

433
00:29:37,390 --> 00:29:41,665
você poderá para navegar até a rota de favoritos lá.

434
00:29:41,665 --> 00:29:49,700
Agora também há pequenas modificações para os componentes restantes lá,

435
00:29:49,700 --> 00:29:52,200
que permitem que você lide com

436
00:29:52,200 --> 00:29:57,365
as complexidades de como seu cliente e servidor se comunicarão entre si.

437
00:29:57,365 --> 00:30:02,555
Em particular, observe como o componente de cabeçalho foi atualizado para

438
00:30:02,555 --> 00:30:08,195
refletir o status conectado do usuário na barra de ferramentas na parte superior.

439
00:30:08,195 --> 00:30:11,500
Isso é novamente outra mudança interessante que eu

440
00:30:11,500 --> 00:30:15,710
fiz para o componente de cabeçalho em nossa aplicação.

441
00:30:15,710 --> 00:30:20,220
Então vou deixar isso como um exercício para você descobrir como isso foi implementado. Um

442
00:30:20,220 --> 00:30:22,160
código muito simples.

443
00:30:22,160 --> 00:30:24,660
Deve ser fácil para você descobrir isso.

444
00:30:24,660 --> 00:30:28,020
Então, com todas essas mudanças, agora,

445
00:30:28,020 --> 00:30:32,095
meu cliente angular é capaz de interagir com meu servidor.

446
00:30:32,095 --> 00:30:36,540
Deixe-me novamente mostrar-lhe como podemos postar alguns comentários para o servidor,

447
00:30:36,540 --> 00:30:41,995
e depois ver o comentário imediatamente refletido no prato.

448
00:30:41,995 --> 00:30:45,325
Então, novamente voltando para a nossa aplicação,

449
00:30:45,325 --> 00:30:50,050
agora podemos ir para o menu e, em seguida, puxar qualquer prato aqui,

450
00:30:50,050 --> 00:30:52,740
e eu posso postar comentários para o prato aqui,

451
00:30:52,740 --> 00:30:59,600
então eu iria imediatamente configurar a classificação aqui,

452
00:30:59,600 --> 00:31:02,540
e meu valor de comentário aqui.

453
00:31:03,540 --> 00:31:06,700
Observe que eu não estou inserindo

454
00:31:06,700 --> 00:31:15,735
meu nome de usuário ou o nome do meu autor aqui no formulário aqui.

455
00:31:15,735 --> 00:31:18,470
Agora, é claro, para enviar um comentário,

456
00:31:18,470 --> 00:31:19,590
você precisa estar logado.

457
00:31:19,590 --> 00:31:24,520
Então, se você não estiver logado neste comentário não será aceito pelo meu servidor.

458
00:31:24,520 --> 00:31:26,935
Então deixe-me primeiro entrar.

459
00:31:26,935 --> 00:31:32,890
Então eu posso fazer login aqui.

460
00:31:32,890 --> 00:31:34,220
E no momento em que faço login,

461
00:31:34,220 --> 00:31:39,255
você percebe imediatamente que a barra de ferramentas do cabeçalho é atualizada para indicar meu status.

462
00:31:39,255 --> 00:31:41,375
Agora eu posso postar este comentário.

463
00:31:41,375 --> 00:31:43,990
E você notaria que quando eu postar o comentário,

464
00:31:43,990 --> 00:31:46,440
o comentário é adicionado na lista dos comentários,

465
00:31:46,440 --> 00:31:50,575
e também notar que o campo do autor é automaticamente preenchido aqui.

466
00:31:50,575 --> 00:31:54,040
Porque é assim que configuramos nosso servidor.

467
00:31:54,040 --> 00:31:55,570
No campo de comentários,

468
00:31:55,570 --> 00:31:58,880
nós configuramos nosso usuário como

469
00:31:58,880 --> 00:32:05,890
uma referência para as informações do usuário

470
00:32:05,890 --> 00:32:09,755
que armazenamos em nosso lado do servidor, e como usamos o preenchimento,

471
00:32:09,755 --> 00:32:11,585
Mangusto Preencher no lado do servidor,

472
00:32:11,585 --> 00:32:14,080
as informações do usuário são automaticamente

473
00:32:14,080 --> 00:32:16,715
preenchidas nos comentários recebidos do servidor Lado.

474
00:32:16,715 --> 00:32:21,130
Então, é assim que você percebe como eu estou aproveitando o que

475
00:32:21,130 --> 00:32:25,615
o servidor já fornece para que eu preencha automaticamente os detalhes.

476
00:32:25,615 --> 00:32:31,180
Assim, pequenas mudanças novamente até mesmo

477
00:32:31,180 --> 00:32:38,880
na página de detalhes do prato para refletir o uso do suporte de comentários no lado do servidor.

478
00:32:38,880 --> 00:32:43,769
Com isso concluo a rápida ilustração

479
00:32:43,769 --> 00:32:49,575
do cliente Angular que implementamos como parte deste exercício.

480
00:32:49,575 --> 00:32:55,990
E espero que você passe pelos detalhes do código no cliente Angular também,

481
00:32:55,990 --> 00:32:59,410
e depois reflita sobre o que você aprendeu no curso Angular e veja

482
00:32:59,410 --> 00:33:03,105
como as modificações nos permitem implementar

483
00:33:03,105 --> 00:33:06,350
em um cliente angular modificado que agora é

484
00:33:06,350 --> 00:33:09,705
capaz de se comunicar com o servidor e então suportam todos os recursos

485
00:33:09,705 --> 00:33:17,310
que originalmente pretendíamos implementar como parte do lado do cliente e do servidor.