03_primeiroservice

Primeiro Serviço!

Para referência a branch utilizada é a topicos/t3/p4.

Vamos criar nosso primeiro service. Um service é uma classe definida para ser utilizada através de injeção de dependência, responsáveis principalmente por interação externas. (Faça o Ajax aqui)

Vamos utilizar uma API externa para listagem paises pela língua materna.

https://restcountries.eu

Certifique-se de estar dentro da pasta src\app\paises do projeto.

ng generate service pesquisaPaises

Vamos fazer as seguintes alteraçoes:

1. Criar o serviço pesquisaPaises.
2. Importar no PaisesModule o HttpClientModule, para permitir o uso do serviço HttpClient no pesquisa Paises.
3. Alterar o layout no paises-list.component.html.
4. Alterar o paises-list.component.ts para utilizar o pesquisaPaises.

A branch com as alteraçoes é a topicos/t4/p1.

Para ver as alteraçoes veja o DIFF das alteraçoes.

Criando uma pesquisa aberta.

Aqui vamos utilizar o RxJS para criar uma pesquisa do tipo autocomplete, para pesquisar os paises por continente.

Os nomes devem ser usando em inglês:

• Africa.
• Europe.
• Asia.
• Americas.
• Oceania

Vamos fazer as seguintes alteraçoes:

1. Criar uma nova classe para modelar o retorno da api: ng g class restCountryApiModel.
2. Importar no PaisesModule o ReactiveFormsModule, para permitir o uso do FormControl para manipular dados.
3. Alterar o pesquisaPaises para adicionar a nova pesquisa.
4. Alterar o layout no paises-list.component.html.
5. Alterar o paises-list.component.ts para utilizar o novo metodo do pesquisaPaises. Será necessário assinar um fluxo de dados gerado através do FormControl, para interagir com o campo constantemente.

Importante: é utilizada um catchError evitar que o fluxo de dados morra, a api utilizada retorna 404 quando não existem dados, qualquer erro não tratado desfaz o fluxo de dados.

A branch com as alteraçoes é a topicos/t4/p2.

Para ver as alteraçoes veja o DIFF das alteraçoes.