[MÚSICA]
Agora que tivemos uma rápida introdução às estruturas MVM e
MVVM, serviços angulares, e também injeção de dependência,
vamos agora passar para o nosso próximo exercício onde vamos criar o nosso primeiro serviço angular
e depois injetá-lo em nosso componente e
fazer uso dele dentro do nosso componente.
Para começar, vá para seu aplicativo em
o bloco do editor dentro da pasta App,
crie uma nova subpasta e nomee-a como Serviços.
Agora vamos fazer uso de Angular CLI para adicionar um novo serviço à nossa aplicação Angular.
Para fazer isso, no prompt digite ng
gerar serviço, e serviços/prato.
Então, isso criará um novo serviço na pasta Serviços chamado serviço dish.
Assim, uma vez criado, você verá que dois arquivos são criados
pela Angular CLI chamada DishService.ts e dish.service.specter.ts.
Este é usado para testar nosso serviço Angular enquanto falaremos sobre mais tarde.
O segundo é onde vamos criar nosso serviço de prato e
, em seguida, injetar isso em nosso módulo de aplicativo e fazer uso dele em nosso componente de menu.
Indo para o editor, vamos abrir o arquivo dish.service.ts.
Agora, quando você abre este arquivo, você imediatamente percebe aqui a primeira instrução
dizendo, import {Injectable} de '@angular /core'.
Então este injetável nos permite definir este decorador
injetável para qualquer classe que definimos aqui.
Então você pode ver que estamos definindo uma classe aqui chamada DishService.
Ao usar este decorador injetável para este serviço de prato,
estamos tornando este objeto agora injetável dentro de nossa aplicação.
Então isso é o que permite que a injeção de dependência seja usada dentro da nossa aplicação
.
Assim, uma vez que você declarar a classe como injetável,
vamos agora configurar nosso DishService para fornecer algumas informações para nós.
Então aqui, eu vou importar,
A classe Dish da pasta compartilhada,
e também importar,
A constante pratos de,
pasta compartilhada aqui.
Assim, uma vez que eu tenha importado esses dois,
agora meu serviço pode ser configurado para fornecer o valor para nós.
Então, dentro do serviço, eu estou indo para
adicionar em um novo método chamada getDistes, e
este método vai retornar em uma variedade de pratos aqui.
E, assim, este método irá retornar a constante DISTRAS
que importamos para o nosso DishService.
Com isso, nosso DishService agora está configurado para
fornecer essa matriz de objetos JavaScript DICHAS para qualquer
outra parte da nossa aplicação que o requeira.
Agora, antes que isso aconteça, precisamos tomar este serviço e
, em seguida, injetar em nosso aplicativo.
Para fazer isso, vamos abrir o arquivo.ts módulo de aplicativo.
Então, dentro do arquivo.ts módulo app, logo após importar
os componentes ali mesmo, eu vou importar o,
DishService bem ali.
E isso é importado de,
Serviços DishService aqui.
Então, uma vez que importamos isso, então vamos declarar este DishService como um provedor.
Então, se você entrar no decorador do módulo ng, então
você vê esta terceira propriedade aqui chamada provedores.
Então temos declarações, importações e provedores.
Assim, sempre que você tiver um serviço que você deseja disponibilizar para
todos os componentes de parte deste módulo.
Então você especificará isso como um provedor dentro do módulo aqui.
Então aí mesmo, eu vou dizer, DishService, aqui.
Então, com isso, meu DishService agora se torna disponível para o resto do aplicativo.
Agora, como isso acontece?
A dependência injetável do Angular olha para esta informação que
declaramos aqui e, em seguida, decide que precisa criar um DishService e
injeta onde quer que seja necessário.
Agora, como fazemos uso desse serviço?
Vemos que no componente do menu estávamos recebendo
a constante DATES diretamente importando do arquivo de pratos compartilhados aqui.
Agora esta não é a maneira ideal de obter a informação,
em vez de amarrar a informação diretamente em seu componente,
você deve deixar um serviço buscar essa informação para você.
Mais tarde, podemos redesenhar o nosso serviço para poder ir e
buscar as mesmas informações de um servidor back-end, se assim o necessitar.
Na verdade, isso é o que faremos em alguns dos exercícios posteriores.
Então você vai delegar a responsabilidade de buscar as informações para o serviço
e, em seguida, você vai apenas fazer uso do serviço dentro deste componente menu.
Então vamos excluir este componente pratos de lá e
em vez disso vamos importar esse DishService aqui.
E este DishService é importado do arquivo
services/dish.service aqui.
Então, depois de adicionar isso agora fizemos uma parte do trabalho.
Agora precisamos disponibilizar esse serviço para que nosso componente faça uso.
Então é aí que vamos descer para este construtor aqui.
Neste construtor, então
agora você vê o uso do construtor dentro de nossa classe aqui.
Então, neste construtor, veremos
DishService privado e DishService aqui.
Então este é do tipo DishService, então
quando você declara isso no construtor, quando este componente é criado,
então este DishService que você injetou no módulo do aplicativo.
Quando você injetar isso no módulo do aplicativo,
ele criará um único objeto DishService.
E esse objeto DishService será disponibilizado para você dentro do seu componente
menu aqui.
Então agora você pode então recorrer aos métodos que este DishService fornece para
você, a fim de fazer o trabalho em seu nome.
Então, uma vez que você colocar isso lá,
agora nós percebemos que nós não temos mais esta constante de pratos aqui.
Então eu preciso de alguma forma buscar essa informação.
Agora é aqui que eu vou aproveitar o serviço que tenho disponível para mim para
buscar as informações para nós.
Onde obtemos essa informação?
Então, é aqui que vamos ter a ajuda deste método de ciclo de vida chamado
Ngoninit.
Então, quando você declara este método de ciclo de vida chamado NGONinit em seu aplicativo
, então você vê que na classe, você diz implementa o OnInit.
Portanto, a implementação deste OnInit requer que você
implementar este método NGONinit como parte de sua classe aqui.
Assim, dentro deste método NGONinit,
agora você pode pedir ao serviço para buscar essa informação.
Por que é assim?
Este método de ciclo de vida será executado
pela estrutura Angular sempre que este componente for instanciado.
Então, sempre que este componente é criado, este método vai ser executado.
Então, quando esse método é executado, então nesse ponto eu posso ir e
buscar os pratos do DishService.
Então eu posso dizer DishService, e
então você saberá que você tem o método getDishService dentro do DishService.
Você pode invocar sobre o método para buscar os pratos para você.
Agora, quando fazemos isso, então o objeto pratos será fornecido por
o serviço para nós através deste método getDistes.
E isso pode ser colocado em nossos pratos variável local que definimos aqui.
Então, com isso, nós completamos a atualização
para todos os nossos arquivos de aplicativos.
Vamos dar uma olhada rápida no aplicativo Angular resultante.
Mudando para o navegador, agora você pode ver que no navegador o aplicativo Angular
renderiza exatamente como antes.
Nesta versão, como você viu, a informação sobre os pratos
vai ser obtida em seu componente fazendo uso do serviço.
O serviço, por sua vez, vai buscar essas informações para você.
Agora, neste momento, estamos mantendo o serviço muito básico.
O serviço simplesmente retorna esse valor constante que definimos aqui.
Mais tarde, você pode imaginar que você estaria estendendo o serviço para ir e
obter essas informações do servidor back-end.
Quando isso acontece,
a busca de informações não será mais instantaneamente.
É aí que precisaríamos da ajuda de promessas e
também a abordagem JavaScript reativa para suportar esse atraso e
lidar com o atraso na busca das informações dentro de nosso aplicativo.
Falaremos sobre isso com mais detalhes no próximo módulo.
Por enquanto, nosso aplicativo será executado muito bem, então você pode selecionar qualquer um dos
esses pratos e as informações serão exibidas exatamente como antes.
Com isso, competimos neste exercício onde aprendemos as noções básicas de serviços angulares.
E também vimos como podemos fazer uso do serviço Angular,
dentro de nosso componente de aplicativos.
Este é um bom momento para você fazer um commit git com os serviços básicos de mensagem.
[MÚSICA].