Agora que concluímos a atualização do lado do servidor,
é hora de passar para o Cliente Angular.
Para sua conveniência, forneci a você
o repositório GitHub que contém a versão final do
Cliente Angular que é capaz de se comunicar com o
nosso REST API Server e, em seguida, renderizar as várias visualizações para o nosso cliente.
Então, eu peguei a aplicação Angular que
desenvolvemos no segundo curso desta especialização,
e depois modifiquei.
Faremos um breve tour pelo código em um pouco mais tarde.
Agora, você clonará o repositório Git para o seu computador
e, em seguida, inicializará o seu Cliente Angular
e, em seguida, vê-lo se comunicando com o nosso lado do servidor.
Vamos ver os detalhes a seguir.
Para começar com este exercício,
em seu terminal ou janela de comando,
vá para seu local conveniente e, em seguida,
no prompt, digite git clone
https://github.com/jmuppala/conFusion-Angular6.git.
Em seguida, deixe o aplicativo Angular ser clonado para o seu computador.
Quando a clonagem estiver concluída,
mova para a pasta Confusion-Angular6
que acabou de ser criada quando você clonar este repositório git.
Então você notará imediatamente que já há um monte de arquivos lá.
Agora, no prompt, digite npm install,
a fim de instalar todos os módulos de nó dos
quais esta aplicação Angular é dependente.
Assim, uma vez que os módulos de nó ou todos instalados,
então podemos iniciar o nosso NG servir para compilar e servir nossa aplicação Angular.
Uma vez que tudo é instalado pelo npm install,
em seguida, certifique-se de que o seu MongoDB Server está
em execução e também o seu REST API Server também está funcionando.
Caso contrário, seu Cliente Angular não funcionará.
Então, agora que você instalou seu Cliente Angular em seu computador,
no prompt digite ng servir e
seu aplicativo Angular será compilado e servido por ng servir em um curto espaço de tempo.
Uma vez que seu aplicativo Angular é compilado com sucesso,
em seguida, vá para um navegador e abra seu aplicativo Angular no navegador.
Indo para o navegador,
na barra de endereços,
deixe-me digitar localhost:4200 e
você verá que seu aplicativo Angular é
iniciado e é visível na tela aqui.
Você vai notar imediatamente que seu aplicativo Angular
é capaz de buscar os dados do servidor e, em seguida, processar
as várias partes de sua aplicação Angular exatamente como o que você
fez no final de seu curso Angular.
Quando você vai falar sobre pasta,
você também verá que a página Sobre também renderiza as informações como tal.
No menu, você vê os itens no menu que estão sendo
exibidos exatamente como vimos com o aplicativo Angular.
Agora, além disso, adicionei
mais uma página ao aplicativo de página única chamado Meus Favoritos,
para o qual você não pode navegar porque nenhum usuário está conectado ao sistema.
Então, você vê que eu não tenho nenhum usuário conectado no sistema.
Então, é por isso que não adianta indicar meus favoritos,
porque você não sabe qual usuário,
como favoritos, deve ser mostrado aqui.
A página de contato como de costume.
Agora, vamos fazer login.
Para fazer login no nosso aplicativo,
vamos clicar no botão Login e, em seguida, você veria que a caixa de diálogo Login aparece.
Então, deixe-me fazer login como um dos usuários registrados,
que registramos como parte deste curso anteriormente.
Assim, uma vez que
você fizer login, você notará imediatamente que,
no canto direito,
você vê que o botão Login agora se transformou em
Logout e o nome do usuário é indicado aqui.
Então, quem está logado é indicado aqui.
Você também pode, em princípio,
substituir isso pela imagem do usuário.
Agora, para isso você precisa fazer mais modificações
tanto para o cliente quanto para o servidor, a fim de suportar a exibição da imagem aqui.
Mas, no momento, estou apenas mostrando como
podemos exibir facilmente as informações do usuário aqui.
Então, isso requer pequena modificação para o chefe do
componente onde eu será capaz de recuperar
o nome de usuário de um serviço
chamado como o serviço OAuth que vamos falar em um curto espaço de tempo.
Então, uma vez que o usuário faz login,
então, se você agora clicar em Meus Favoritos,
você notaria que não há nada nos meus favoritos para o usuário.
Obviamente, porque o usuário ainda não escolheu nenhum favorito.
Então, vamos agora para o Menu e, em seguida, no Menu,
deixe-me selecionar um item e, em seguida, eles adicionarão este prato aos nossos favoritos.
Então, indo abaixo aqui,
você vê o símbolo do coração lá,
clique nele e você verá que isso seria adicionado aos Favoritos.
O fato de que isso foi adicionado aos Favoritos é indicado pela
mudança no ícone aqui de um coração não preenchido para um coração cheio.
Agora, se você for a qualquer outro prato,
você notaria que este tem um coração não preenchido,
o que significa que este ainda não está entre os nossos favoritos.
Então, deixe-me adicionar mais um item aos
meus favoritos e, em seguida, vamos adicionar um terceiro item aos meus favoritos também.
Então, agora, você verá que se eu for agora para Meus Favoritos,
você verá um conjunto de Meus Favoritos sendo exibido aqui.
Então, você viu que eu acabei de adicionar estes três pratos aos Meus Favoritos.
Então, estes estão sendo exibidos aqui.
Então, isso é rastreado usando o ponto final de favoritos no lado do servidor,
que eu implementei como parte de sua última tarefa.
Então, se você fez essa atribuição corretamente, então esta parte deve funcionar como esperado.
Agora, também podemos modificar Meu Favorito.
Então, por exemplo, no canto direito aqui,
você vê esta opção Excluir aqui.
Então, deixe-me ligar isso.
Então, ao ativá-lo,
você verá imediatamente as três cruzes vermelhas
aparecerão na parte inferior desses três itens em Meus Favoritos.
Quando eu clico fora, então eles desaparecem.
Então, esta é uma maneira de ativar os botões de exclusão em seus Meus Favoritos e, em seguida,.
Então, deixe-me ir em frente e excluir um dos itens de Meus Favoritos.
Então, quando eu clicar nesse botão,
você notará imediatamente que esse item é excluído de Meus Favoritos,
e imediatamente desaparece e Meus Favoritos é
atualizado e você verá o valor resultante sendo mostrado aqui.
Ao mesmo tempo,
esta opção Excluir está desativada, de
modo que os botões de exclusão não fiquem mais visíveis.
Eu sempre posso voltar a ativar os botões de exclusão clicando em ativar e desativar aqui.
Portanto, observe que os Meus Favoritos serão exibidos somente
para usuários que estão conectados ao sistema.
Então, você percebe imediatamente um conjunto de alterações que foram
feitas no Cliente Angular para
suportar alguns desses recursos adicionais que você vê aqui.
Você também viu o recurso Login e Logout sendo suportado aqui.
Então, quando eu clico no botão Logout,
você percebe imediatamente que o usuário é desconectado
e o nome de usuário desaparece de lá,
e assim o botão também é transformado no botão Login.
Então, com isso, você percebe como meu cliente Angular foi
atualizado para fazer uso do novo servidor de API REST,
a fim de suportar os favoritos que estão sendo salvos e no lado do servidor e, em
seguida, sendo automaticamente refletido em meu aplicativo cliente, como mostrado aqui.
Vamos fazer um breve tour
pelo código Angular que eu forneci para você no repositório do GitHub,
e também ver como modificamos partes do código
para implementar o aplicativo Angular atualizado.
Você vai notar que há um novo serviço
que eu introduzi aqui chamado serviço de autenticação.
O serviço de autenticação cuida de
todas as ações relacionadas à autenticação para o aplicativo Angular.
Então, dentro do serviço de autenticação,
você deve notar imediatamente que eu tenho
um conjunto de informações que eu configurei aqui.
Como você já conhece Angular,
você deve ser capaz de processar facilmente o que está escrito aqui.
Observe em particular que dentro do próprio serviço de autenticação,
estou armazenando informações como,
por exemplo, o TokenKey,
que é a chave para o armazenamento local onde estou armazenando o JSON Web Token,
e também algumas variáveis adicionais
aqui onde estou rastreando o nome de usuário e onde estou autenticado,
e também manter o controle do JSON Web Token aqui.
Agora, vamos começar olhando para quando o usuário faz login.
Então, quando o usuário fizer login,
então esta função chamada de login será chamada em nosso serviço de autenticação aqui,
e quando o login é chamado no serviço de autenticação,
isso será passado em um parâmetro chamado usuário que contém
o nome de usuário e senha como parte do objeto JavaScript do usuário.
Então, neste ponto, estou fazendo uma postagem HTTP para o BaseURL mais usuários/login.
Observe também que aqui,
eu estou fornecendo o AuthResponse como o qualificador aqui.
O AuthResponse não passa de uma interface que eu implementei aqui,
no topo aqui.
Então, essa interface essencialmente especifica
as informações que vão voltar como
minha resposta de autenticação do lado do servidor,
a estrutura dos dados JSON que está
voltando do lado do servidor e os objetos JavaScript correspondentes.
Então, você percebe que quando atualizamos o servidor,
certificamo-nos de que o servidor está enviando de volta o status,
o sucesso, o sinalizador e o token no índice de cadeia.
Então, essa informação é obtida aqui.
Agora, quando eu estou fazendo uma postagem sobre isso,
eu estou passando o nome de usuário e senha para o post neste endpoint /users/login.
Quando a resposta voltar da resposta,
a mensagem de resposta em si conterá, como vimos,
o sucesso, o campo de token
e também a mensagem de status aqui.
Então, a partir da mensagem de resposta,
estou extraindo o token e, em seguida, passando-o para esta função que eu implemento aqui,
função local aqui, chamada StoreUserCredentials.
Então, isso será devolvido ao meu aplicativo e será armazenado no lado do meu cliente,
no armazenamento local.
Então, a partir desta função,
estou retornando essas informações de volta para
a função de chamada de onde iniciei o processo de login.
Então, desta forma, eu estarei indicando ao meu componente de login que o login foi bem-sucedido,
e então eu também passarei o nome de usuário para o meu componente de login,
que então passará essas informações para o componente de cabeçalho,
e o componente de cabeçalho usa isso para refletir o nome de usuário no barra de ferramentas no topo lá,
e também pegamos o erro aqui.
Então, esta é uma implementação muito simples de como realizamos o login.
Quando você faz o logout,
observe o que eu faço quando o usuário chama um logout.
Quando o usuário chama um logout,
eu simplesmente destruo as credenciais do usuário, o
que inclui jogar fora
o JSON Web Token que obtive quando fiz login no meu aplicativo.
Em seguida, algumas funções auxiliares adicionais que eu implementei aqui chamado
getUsername é logado e getToken, o
que será útil de meus outros aplicativos,
outros componentes e serviços.
Então, agora vamos olhar para algumas das funções auxiliares que implementamos aqui.
Então, LoadUserCredentials recuperará as credenciais do armazenamento local.
Então, você percebe que aqui estou chamando LocalStorage e, em seguida, dizendo GetItem.
Então, o LocalStorage aqui está usando
o armazenamento local do navegador da Web que é suportado por navegadores da Web padrão,
e armazenando as informações lá,
e então ele está recuperando essas informações lá.
Em seguida, a partir daí, as informações da credencial,
se forem válidas,
então essas credenciais serão configuradas aqui.
Então, todas essas variáveis que defini aqui serão inicializadas com
as informações apropriadas depois de serem recuperadas do LocalStorage.
Agora, da mesma forma, a função StoreUserCredentials
que implementei aqui é chamada do método de login.
Quando essas informações são
transmitidas, as informações de credencial são transmitidas,
essas informações são armazenadas no LocalStorage neste ponto com essa chave.
Em seguida, o UseCredentials basicamente
configura todas as variáveis que eu tenho no serviço de autenticação.
Então, ele configura o token,
ele configura o nome de usuário
e, em seguida, ele configura a função IsAuthenticated aqui.
Então, note que o próprio nome de usuário aqui,
Eu declarei como um assunto,
que não é nada além de um observável aqui.
Então, é por isso que sempre que eu digo,
sendUsername aqui, eu digo credenciais nome de usuário.
Então, este sendUsername implementado na parte superior aqui,
observe que este é o lugar onde o valor observável é enviado de volta.
Então, é por isso que estou dizendo esse nome de usuário a seguir.
Então, o observável.
Enviará de volta o nome que é fornecido
como parâmetro para quem se registrou para observar este observável.
Então este observável, eu vou estar observando isso a partir do
meu componente de cabeçalho e assim sempre que o nome de usuário muda,
seja de indefinido para um dado nome de usuário ou vice-versa,
então eu posso atualizar minha barra de ferramentas
no componente de cabeçalho para refletir se o usuário está logado ou desconectado.
Então, isso é configurado usando este UseCredentials.
Agora o DestroyUserCredentials basicamente define o token de autenticação como indefinido.
Ele limpa o nome de usuário e, em seguida, define o isAuthenticated como false e, em seguida,
remove esta informação da minha loja local
que é basicamente jogar fora o jsonwebtoken nesta parte.
Então é assim que você ama um usuário.
Assim, uma vez que o jsonwebtoken é perdido, o usuário não pode mais
se autenticar
no lado do servidor porque o token não está mais disponível para nós.
Então é assim que implementamos a função de logout dentro do nosso aplicativo.
Então, reserve algum tempo para passar pelo
auth.service aqui para ver como eu implementei as várias funcionalidades.
Agora, neste momento,
tenho certeza que você está muito familiarizado com a forma como os aplicativos Angulares são implementados, por
isso não deve ser tão difícil para você entender como esse código é implementado.
Agora, mais uma função para a qual eu chamaria sua atenção é o token JWT cheque, aqui.
Esta função pode ser chamada a qualquer momento para verificar e
certificar-se de que o nosso token web JSON ainda é válido.
Então, este é o lugar onde eu estou enviando a solicitação get para os usuários barra cheque JWT token.
Lembre-se de que implementamos esta rota no lado do servidor nos s.js e.
Então, a partir daí, poderemos verificar se o jsonwebtoken ainda é válido ou não.
Se o jsonwebtoken não é válido,
então vamos destruir
as credenciais do usuário e, em seguida, esperar que o usuário faça login novamente.
Se o jsonwebtoken é válido, então está tudo bem e
podemos prosseguir com permitindo que o usuário
para reconhecer que estamos logados in.Então, mesmo se você fechar
seu navegador e, em seguida, reabriu o navegador e, em seguida, reabriu seu aplicativo Angular,
se você tivesse feito login anteriormente e o jsonwebtoken foi salvo no armazenamento local,
ele pode ser recuperado de lá e, em seguida,
seu status de login será restaurado dentro do seu aplicativo Angular.
Se o token da web json expirar,
não teremos permissão para fazer login.
Então, toda vez que você atualizar seu aplicativo Angular em seu navegador ou
recarregar seu aplicativo Angular em seu navegador, você estará
verificando o jsonwebtoken para se certificar de que ele ainda é válido.
Se não for válido, o usuário será
eliminado e assim você terá que fazer login novamente.
Caso contrário, as informações do usuário conectado serão recuperadas
do LocalStorage e inicializadas dentro do meu aplicativo Angular.
Periodicamente, se em qualquer momento o seu servidor
responder com uma mensagem 401 não autorizada,
mesmo nesse ponto,
vamos novamente cruzar para ver se o jsonwebtoken é válido e, em seguida, permitir isso.
Faremos isso usando algo chamado interceptores Http.
Deixe-me fazer uma visita guiada a essa parte do código,
e depois explicar-lhe como os interceptores funcionam daqui a pouco.
Então, agora, além de AuthService,
na pasta de serviços em si você verá este arquivo chamado AuthInterceptors.ts arquivo.
Então abra isso e você verá que aqui eu implementei interceptores Http.
Agora o que esses interceptores Http fazem,
isso é suportado com o cliente Http que vem como parte do Angular 4.4.
O que os interceptores http fazem é que eles podem interceptar
solicitações de saída mensagens
fazer modificações na mensagem de solicitação antes que ela seja enviada.
Da mesma forma, eles podem interceptar mensagens de resposta recebidas e, em seguida, modificar
a mensagem de resposta recebida antes que
a resposta seja entregue ao aplicativo Angular.
Então, através da interceptação, como funciona este interceptor?
Então, para fazer este interceptor funcionar,
nós implementamos, como você vê,
uma classe chamada como um HttpInterceptor estendendo o HttpInterceptor.
Então aqui eu implementei o AuthInterceptor.
Então, o que esse AuthInterceptor faz?
Este AuthInterceptor está basicamente capturando solicitações de saída.
Então, para capturar uma solicitação de saída, você chama essa função chamada interceptar
e, em seguida, isso lhe dará acesso ao pedido e ao próximo.
Então você poderia encadear
um monte de interceptores um atrás do outro se você assim escolher, para
que eles possam processar as solicitações de saída um após o outro se você assim escolher.
O que esta interceptação faz é que lhe dá acesso à mensagem de solicitação Http.
Então, quando eu obter acesso à mensagem de solicitação Http,
você notaria que aqui estou injetando o serviço de autenticação.
Agora, ao contrário da maneira como estávamos injetando serviços em componentes,
aqui estou mostrando o uso de um injetor.
Um injetor faz parte do código angular.
Assim, usando um injetor, você pode injetar serviços ou
outros componentes em outros serviços ou componentes.
Então aqui você vê que eu estou injetando o serviço de autenticação aqui usando isso.
Agora uma outra razão é que se eu injetar diretamente o serviço no meu construtor,
ele desenvolverá uma dependência circular entre o interceptor e o AuthService,
e isso fará com que seu código não funcione.
Então esta é uma solução para os problemas.
Para que o seu interceptor- porque eu preciso do
AuthService, a fim de obter o token do
AuthService e AuthService por sua vez depende deste interceptor, então é
por isso que, a fim de quebrar o loop eu estou explicitamente injetando o AuthService neste caso.
Agora isso é algo que eu descobri por tentativa
e erro eu inicialmente fui em frente e simplesmente injetou
os serviços ímpares para o construtor e, em seguida, descobri que
Angular não estava compilando o código, então eu descobri que
havia um erro lá e depois de fazer alguma pesquisa no Google então
descobriu que esta é uma maneira alternativa de lidar com
a mesma coisa e isso funciona muito melhor para a nossa aplicação.
Então, uma vez que eu injetar o AuthService do serviço, eu
pego o token e, em seguida, percebo o que estou fazendo aqui.
Aqui estou dizendo clone const auth req req clone.
Então, vamos clonar a solicitação e, em seguida, vamos configurar nos cabeçalhos.
Então vamos dizer req cabeçalhos definir
autorização e, em seguida, notar o que eu estou
configurando o cabeçalho de autorização para ser, portador.
Mais AuthToken.
Então, no cabeçalho de autorização estou configurando o portador e AuthToken aqui.
Então é assim que eu estou configurando
o cabeçalho de autorização
na mensagem de solicitação de saída no meu aplicativo Angular. Então, bem ali.
E foi assim que assegurei que todas as solicitações de saída
terão o cabeçalho de autorização configurado antes de serem passadas para o lado do servidor.
E depois disso, vamos simplesmente passá-lo para o próximo interceptor, se ele existir,
ou para a fila de saída, de
modo que a mensagem de solicitação será enviada para o lado do servidor.
Da mesma forma, tenho outro interceptor que implementei aqui.
Este interceptor intercepta todas as mensagens de resposta não autorizadas
que estão voltando do lado do servidor.
Então, se o servidor responder com uma mensagem de resposta não autorizada 401.
Então, nesse ponto novamente, mesma coisa,
Eu configurei o AuthService aqui,
e, em seguida, dentro aqui, então eu vou dizer,
fazer manipular se erro.
Então é aqui que vou conseguir o HttpEvent aqui.
O HttpEvent é um objeto de nível inferior a uma solicitação,
mas isso nos permite obter acesso à mensagem de resposta de entrada,
e então vamos verificar se há um erro,
e, em seguida, se erro é uma instância de resposta de erro HTTP,
e se o status de erro é 401.
Então, o que significa que acabei de detectar que o servidor enviou de volta uma mensagem de erro 401.
Então, o que significa que houve algum problema de autorização no lado do servidor.
Então, nesse ponto, vou verificar
o token da web json para ter certeza de que o token da web json ainda é válido.
Se não for válido,
descartarei minhas credenciais e espero que o usuário faça login novamente.
Assim, eu vou garantir que se meu token json web
expirar no processo de tentar buscar dados,
que ainda será interceptado por aqui porque se o servidor responder com um 401,
eu vou interceptar isso e depois limpar
meu token json web e espero que o usuário faça login novamente.
Também podemos redirecionar o usuário para a página de login se você quiser,
mas com o aplicativo Angular é um pouco mais complicado
fazer isso e eu não queria confundi-lo fazendo tudo isso.
Em vez disso, estou simplesmente desconectando
o usuário neste momento e destruindo as credenciais do usuário, de
modo que o usuário deverá fazer login nesse ponto.
Então, manipulação simples de como injetamos o cabeçalho de autorização na solicitação de saída,
e também interceptar quaisquer 401 mensagens não autorizadas
que estão voltando do lado do servidor.
Então, você vê como essas alterações adicionais precisam ser
feitas em seu aplicativo Angular, a fim de fazê-lo funcionar com o lado do servidor.
Com a parte de autenticação definida,
se você não tiver autenticação e se você estiver indo apenas para
acessar os pontos finais da API restantes e obter operações,
você nem precisa se preocupar com nenhuma dessas coisas.
Nenhuma autenticação é necessária.
Os dados podem ser obtidos com muita facilidade.
Mas para qualquer post,
colocar e excluir operações,
precisamos suportar todos esses recursos.
Então essa é a razão pela qual eu implementei a parte de autenticação em meu aplicativo.
Além disso, como ilustrei anteriormente,
quando nenhum usuário estiver conectado,
então não poderemos navegar para o endpoint dos meus favoritos,
mas quando um usuário estiver conectado,
poderemos ver os meus favoritos para o usuário específico.
Isso é implementado usando guardas de rota em Angular.
Agora, para implementar esses guardas de rota,
eu implementei outro serviço aqui chamado AuthGuardService.
Então, neste AuthGuardService,
implementamos este método chamado método CANActivate que
vamos subclasse, a fim de implementar isso.
E no método CANActivate,
a implementação retornará um booleano
e, neste caso,
o que verificamos é se esse usuário estiver conectado,
então permitiremos que o usuário navegue.
Caso contrário, você navegará o usuário até o ponto final inicial.
Então é assim que o guarda de rota é implementado neste caso.
Agora, para fazer uso deste guarda de rota,
vamos ver como as rotas são atualizadas para fazer uso dos guardas de rota.
Então, no arquivo routes.ts,
você pode ver que para o componente favoritos,
vemos que especificamos o caminho como favoritos e o componente como
FavoritesComponent e, em seguida, especificamos este outro campo
chamado CanActivate para o qual especificamos AuthGuard como o parâmetro aqui,
e este AuthGuard não é nada além do serviço AuthGuard que implementamos,
que é importado aqui.
Assim, quando o AuthGuard for avaliado como falso,
então você não terá permissão para navegar para o componente favorito,
em vez disso, você será redirecionado para casa,
mas quando o usuário estiver conectado, obviamente, o AuthGuard avaliará como verdadeiro
e, neste caso,
você poderá para navegar até a rota de favoritos lá.
Agora também há pequenas modificações para os componentes restantes lá,
que permitem que você lide com
as complexidades de como seu cliente e servidor se comunicarão entre si.
Em particular, observe como o componente de cabeçalho foi atualizado para
refletir o status conectado do usuário na barra de ferramentas na parte superior.
Isso é novamente outra mudança interessante que eu
fiz para o componente de cabeçalho em nossa aplicação.
Então vou deixar isso como um exercício para você descobrir como isso foi implementado. Um
código muito simples.
Deve ser fácil para você descobrir isso.
Então, com todas essas mudanças, agora,
meu cliente angular é capaz de interagir com meu servidor.
Deixe-me novamente mostrar-lhe como podemos postar alguns comentários para o servidor,
e depois ver o comentário imediatamente refletido no prato.
Então, novamente voltando para a nossa aplicação,
agora podemos ir para o menu e, em seguida, puxar qualquer prato aqui,
e eu posso postar comentários para o prato aqui,
então eu iria imediatamente configurar a classificação aqui,
e meu valor de comentário aqui.
Observe que eu não estou inserindo
meu nome de usuário ou o nome do meu autor aqui no formulário aqui.
Agora, é claro, para enviar um comentário,
você precisa estar logado.
Então, se você não estiver logado neste comentário não será aceito pelo meu servidor.
Então deixe-me primeiro entrar.
Então eu posso fazer login aqui.
E no momento em que faço login,
você percebe imediatamente que a barra de ferramentas do cabeçalho é atualizada para indicar meu status.
Agora eu posso postar este comentário.
E você notaria que quando eu postar o comentário,
o comentário é adicionado na lista dos comentários,
e também notar que o campo do autor é automaticamente preenchido aqui.
Porque é assim que configuramos nosso servidor.
No campo de comentários,
nós configuramos nosso usuário como
uma referência para as informações do usuário
que armazenamos em nosso lado do servidor, e como usamos o preenchimento,
Mangusto Preencher no lado do servidor,
as informações do usuário são automaticamente
preenchidas nos comentários recebidos do servidor Lado.
Então, é assim que você percebe como eu estou aproveitando o que
o servidor já fornece para que eu preencha automaticamente os detalhes.
Assim, pequenas mudanças novamente até mesmo
na página de detalhes do prato para refletir o uso do suporte de comentários no lado do servidor.
Com isso concluo a rápida ilustração
do cliente Angular que implementamos como parte deste exercício.
E espero que você passe pelos detalhes do código no cliente Angular também,
e depois reflita sobre o que você aprendeu no curso Angular e veja
como as modificações nos permitem implementar
em um cliente angular modificado que agora é
capaz de se comunicar com o servidor e então suportam todos os recursos
que originalmente pretendíamos implementar como parte do lado do cliente e do servidor.