Neste exercício, vamos fazer uso do Angular HTTP Client para
comunicar com o servidor JSON que já configuramos no exercício anterior.
Podemos agora baixar dados do servidor para a nossa aplicação angular usando
o cliente HTTP e, em seguida, fazer uso dos dados para
construir as várias visualizações dentro de nossos componentes.
Neste exercício, vamos reconfigurar o serviço de prato para poder
ir e buscar os dados sobre os pratos do servidor JSON.
Como parte de sua missão,
você completará os dois restantes,
o serviço líder e o serviço de promoção.
Vamos ver como podemos aproveitar o cliente HTTP que irá retornar um observável para nós.
Nós já reconfiguramos nosso aplicativo,
especialmente o serviço para poder entregar observáveis aos nossos componentes.
Dentro de nossos componentes, estamos assinando esses observáveis.
Então, a maior parte da configuração
para obter dados do serviço para o componente já está lá.
Vamos melhorá-lo um pouco para lidar com erros no próximo exercício.
Nosso primeiro passo na preparação do aplicativo Angular para usar
o cliente HTTP para acessar o servidor é
configurar nosso aplicativo com o HttpClientModule.
Então, para fazer isso, abra app.module.ts.
Então, aqui, vamos importar
o HttpClientModule de Angular/Common/HTTP.
Uma vez que importamos isso,
então vamos em frente e configurar o decorador ngModule
nas importações com o HttpClientModule.
Agora, nosso aplicativo está pronto para fazer uso do HttpClientModule para acessar o servidor.
Agora, certifique-se de que o servidor JSON está funcionando e
servindo os dados para que nosso aplicativo possa
se comunicar com o aplicativo do servidor JSON.
Agora que estamos acessando dados do lado do servidor,
é uma boa prática criar um valor especial que aponta para
a BaseURL do seu servidor para
que ele pode ser configurado dentro de sua aplicação angular como e quando necessário.
Então, indo para a pasta compartilhada,
Eu vou criar um novo arquivo aqui chamado baseurl.ts.
Em seguida, dentro deste arquivo,
incluirei uma constante e exportarei e a constante chamada BaseURL,
que definirei como HTTP: //localhost:3000.
Então, como você se lembra, este é o BaseURL no qual meu servidor JSON está acessível.
Então, localhost:3000/, lá.
Então, com isso,
deixe-me salvar as alterações no BaseURL.
Agora, angular fornece uma maneira de fornecer valores como
para o resto do seu aplicativo, configurando um provedor dentro do seu módulo de aplicativo.
Então, indo para o módulo do aplicativo,
para nos permitir fornecer esse BaseURL específico,
nós vamos primeiro importar o valor BaseURL para a nossa aplicação angular.
Então, eu diria importar BaseURL de compartilhado/baseurl.
Este valor agora pode ser disponibilizado para
o resto do meu aplicativo indo para os provedores.
Então, além do LeaderService,
se eu configurar um valor como este,
eu diria fornecer
e, em seguida, BaseURL, UseValue.
Então, desta forma, eu estarei fornecendo esse valor BaseURL como
um provedor de valor de dentro do módulo de aplicativo para o resto do meu aplicativo angular.
Na próxima etapa,
nós vamos configurar nosso DishService para permitir que ele acesse o lado do servidor,
e, em seguida, obter os dados do lado do servidor,
e, em seguida, disponibilizar os dados para nossos componentes.
Agora, vamos para o DishService.
Então, no DishService,
esses pratos não são mais necessários do arquivo local lá.
Vou baixar esses dados do lado do servidor.
Então, eu vou remover isso e, em seguida, adicionar em uma importação
de HTTPClient de angular,
cada HTTP comum,
importar o BaseURL de,
lembrar que isso está em compartilhado/baseurl.
Agora, dentro do meu DishService,
Vou buscar os dados do lado do servidor.
Então, no construtor,
Eu vou atualizar o construtor por
injetando HttpClient no meu construtor aqui.
Então, agora, meu DishService deve ser configurado para
obter os dados do lado do servidor e retornar os dados para o meu aplicativo.
Agora, você percebe que
o método getDistes já está configurado para retornar o observável para o componente.
Então, essa parte já está configurada.
Agora, o que isso vai retornar é o que ele obtém de
o método HTTP get
que vamos chamar o lado do servidor.
Então, a fim de chamar o lado do servidor,
Eu vou ter que fornecer,
dentro do método get,
o BaseURL que eu tenho
já obtido, e então pratos.
Então, desta forma, o método HTTP get vai obter os dados de localhost: 3000/pratos.
Então, essa é a URL do lado do servidor de
que você pode buscar os dados de pratos aqui. É isso.
Meu servidor vai fornecer os dados na forma de um
observável para este serviço quando o método HTTP get é chamado,
e que será retornado para o componente através do método getDistes.
É sobre isso. Agora, meu serviço está configurado para ir e
buscar os dados do lado do servidor e, em seguida, retornar os dados para o meu componente.
Eu vou atualizar os métodos restantes também de forma semelhante.
Então, o que eu vou fazer para o próximo método para o método GetDish é,
Eu vou copiar
esta parte e, em seguida, simplesmente colá-la no lugar aqui,
e então vamos editar isso.
Agora, quando você precisa obter para um determinado prato,
você tem o ID do prato que está disponível para você.
Então, diremos que GetDish ID está disponível como um parâmetro.
Então, para os pratos,
Eu vou adicionar o ID como o outro parâmetro aqui.
Agora, quando eu receber a resposta e, em seguida, retornar
para o componente através da chamada de método GetDish.
Da mesma forma, para o prato em destaque,
vai ser uma maneira um pouco interessante de configurá-lo.
Agora, para o prato em destaque,
quando você precisa acessar os dados do lado do servidor,
o que eu vou fazer é, agora,
quando eu pedir um prato em destaque, agora,
a maneira como meu servidor está configurado é que eu posso enviar a
um parâmetro de consulta dentro do meu URL para que eu possa dizer pratos?
e, em seguida, dizer destaque igual a true.
Então, desta forma, meu servidor retornará
somente os objetos para os quais o sinalizador em destaque está definido como true,
ou a propriedade em destaque está definida como true no lado do servidor.
Agora, é assim que o lado do servidor é configurado.
Agora, novamente, uma vez que você obter os dados,
então você simplesmente mapear o valor e, em seguida, retornar isso como
um observável para o meu componente através do método get featured dish.
Quando eu consultar o lado do servidor usando o parâmetro de consulta,
ele vai retornar uma matriz de objetos que correspondem.
Neste caso, acontece que a matriz conterá exatamente um item lá.
Mas quando eu retornar o valor depois de obter o resultado,
Eu preciso também incluir um zero lá porque este é um array,
então eu preciso retornar o primeiro elemento da matriz.
Antes que eu esqueça, deixe-me importar
o operador de mapa dos operadores rxjs.
Agora, para o último, o GetDishIDs,
o que eu vou fazer é aproveitar o fato de que eu já
tenho o método getDishids disponível para mim.
Então, quando o método getDish retornar,
Eu vou mapear isso com o operador de mapa
como dishes.map, dish.dish id.
Então, desta forma, eu estou retornando apenas o valor que eu preciso,
apenas os ids do prato através deste método aqui.
É sobre isso.
Agora, meu serviço de prato é completamente atualizado para ir e buscar os dados de
o site do servidor e, em seguida, fornecer os dados para os meus componentes no meu.
Aplicação angular aqui.
Na próxima etapa,
Vou entrar no componente de menu.
Em seguida, dentro do componente de menu,
Eu vou usar a interface de injeção que está disponível através
o núcleo angular para injetar este BaseURL que eu obtive lá.
Então, como fazemos uso disso?
Dentro do construtor do meu componente,
Eu vou entrar e dizer,
"@Inject" Então, lembre-se que tínhamos configurado
este BaseURL como um provedor para esse valor no módulo de aplicativo anteriormente.
Então, esse BaseURL agora pode ser injetado no componente como este aqui.
Agora, quando você tem um serviço,
você está injetando serviços como este aqui,
mas quando você tem um valor,
então você injetar o valor usando o decorador "@Inject".
Aqui, estamos especificando o valor do provedor que especificamos lá.
Nós dissemos, provide:BaseURL lá,
então esse é o valor que estamos fornecendo aqui.
Então, estou declarando isso como BaseURL privado.
Então agora, dentro do meu código aqui,
este BaseURL está disponível para configurar o que eu precisar dentro do meu aplicativo aqui.
Enquanto eu ainda estou aqui,
Eu vou remover este prato selecionado que também não está sendo usado dentro do meu aplicativo.
Então, este método também não estou usando com meu aplicativo,
então deixe-me fazer um pouco de limpeza enquanto eu ainda estou aqui.
A maneira como processamos os dados que obtivemos
do serviço permanecerá exatamente a mesma.
Como meu serviço ainda está retornando e observável,
e eu estou assinando o observável dentro deste componente.
Então, essa parte não muda nada.
Agora, a razão pela qual eu injetar o BaseURL dentro do meu componente é que,
no meu modelo aqui,
Estou obtendo a imagem do prato aqui.
Agora, mas esta imagem do prato precisa ser obtida do meu servidor lá,
do servidor JSON lá.
Então, eu preciso entrar e, em seguida, atualizar esta fonte para dizer,
BaseURL plus dish image.
Então, eu preciso fornecer o URL completo para essa imagem lá.
Então, isso deve ser, httlp://localhost:3000/images/, qualquer que seja.
Então, essa é a razão pela qual eu preciso fornecer
o valor BaseURL além da imagem do prato aqui.
Então, isso eu vou colocar entre aspas,
então essa é a maneira como uma expressão como esta dentro da interpolação funcionará corretamente.
Então, coloque isso entre aspas e, em seguida, forneça isso como o valor de origem,
e então aqui você vê que você está usando BaseURL mais a imagem dish,
a dish.image, a propriedade image contém apenas a URL parcial.
Então, ele contém imagens barra e nome do arquivo image.png.
Então, é por isso que eu preciso anexar o http://localhost:3000/,
a essa propriedade de imagem dish para que eu construa o URL total da minha imagem.
Então, com isso, meu componente de menu está agora completamente configurado
para obter todos os dados do lado do servidor.
Agora, da mesma forma, eu sugiro que você atualize
o componente detalhe do prato e também o componente doméstico.
Indo para o componente de detalhe prato,
usar a injeção lá,
e depois ir para o construtor,
no construtor, agora eu preciso usar
injeção de BaseURL e BaseURL lá,
e assim, meu componente de detalhe prato está agora configurado para obter os dados do serviço de prato.
Então, esta parte não vai mais mudar,
permanece exatamente o mesmo porque meu serviço de prato é simplesmente
retornando um observável e eu estou assinando que observável aqui.
Eu também preciso atualizar o arquivo de modelo de componentes de detalhes do prato,
de forma semelhante indo para a fonte de imagem aqui,
Eu adicionaria o BaseURL mais a imagem do prato e depois colocaria isso dentro de citações lá.
Da mesma forma, indo para o componente doméstico, mesma coisa.
Eu vou fazer uma injeção,
e no construtor
eu faço uma injeção de BaseURL,
e indo para o arquivo de modelo de componentes domésticos,
da mesma forma onde eu uso a imagem do prato aqui,
então eu vou dizer, BaseURL mais imagem do prato,
e depois coloque entre aspas aqui,
e, em seguida, salve as alterações.
Então, é isso. Meu aplicativo agora é atualizado para usar
o servidor para obter os dados para os pratos.
Então, vamos ver o aplicativo no navegador.
Indo para o navegador,
agora você pode ver que dentro do meu navegador,
meu prato está sendo renderizado exatamente como antes,
e depois indo para o componente do menu,
você vê que o menu renderiza exatamente como antes e o componente de detalhe do prato,
também os detalhes do prato são renderizados exatamente como antes.
Então, com a mudança que introduzimos acessando os dados do lado do servidor,
somos capazes de buscar os dados do lado do servidor e, em seguida,
renderizar os dados dentro da nossa aplicação Angular.
Para convencê-lo de que os dados estão realmente sendo obtidos do meu servidor JSON,
vamos para o terminal e, em seguida, ver o log na janela do terminal lá.
Indo para o terminal onde meu servidor JSON está sendo executado,
você pode ver que eu realmente realizei um monte de solicitações Git
do meu servidor site para obter todos os dados que eu preciso dentro do meu aplicativo.
Então, na verdade o meu aplicativo Angular está agora buscando todos os dados de
o site do servidor para todos os pratos dentro do meu aplicativo Angular.
Agora, você pode usar a mesma abordagem para também atualizar
o serviço mais recente e também o serviço de promoção,
mas vamos adiar isso até a atribuição final neste curso,
mas isso pode completar este exercício.
Neste exercício, aprendemos como fazer
uso do cliente HTTP, a fim de obter os dados do
o site do servidor e, em seguida, usar os dados na construção
as visualizações dentro dos componentes da nossa aplicação Angular.
Este é um bom momento para você fazer um commit do Git com a mensagem HTTP parte um.