Consumindo APIs com Angular II
Nesse segundo artigo vamos utilizar o módulo HttpClientModule do Angular, que será responsável pelas requisições Http (Get, Post, Put, Delete). Através dele, nossos componentes vão consumir os endpoints da nossa API.
Para isso precisaremos importar o serviço core do angular, responsável por requisiçoes http:
app.module.ts
Vamos importar o módulo HttpClientModule
import { HttpClientModule } from '@angular/common/http';Depois vamos adicionar sua referência no array imports:
imports: [BrowserModule,AppRoutingModule,HttpClientModule],
Agora vamos criar um novo arquivo para o model que irá representar a nossa entidade Hero
/shared/models/hero-model.ts
Para facilitar a nossa vida, vamos criar um outro arquivo para adicionar um serviço a nossa aplicação que vai conter os métodos de request http
/shared/services/herohttp-service.ts
Vamos precisar importar nossa model, a API core HttpClient e adicionar o decorator Injectable pois nosso serviço será injetado.
import { HttpClient } from '@angular/common/http';
import { Hero } from '../models/hero-model';
import { Injectable } from '@angular/core';Vamos criar um serviço chamado HeroHttpService:
@Injectable({providedIn: 'root'})export class HeroHttpService {}
E em seguida vamos criar uma variável para armazenar o endpoint da nossa API:
private endpoint = 'https://demo8672629.mockable.io/heroes/';Por enquanto nosso serviço está assim:
Agora que nós já temos a estrutura do nosso serviço, vamos adicionar o HttpClient via injeção de dependência:
constructor(private http: HttpClient) {}Pronto, com esse setup já podemos iniciar a construção dos métodos (Get, Post, Put, Delete).
Vamos adicionar o metodo get e nele vamos utilizar nossa instância do HttpClient informando os parametros: tipo de resposta que nesse caso será <any> e a URL (this.endpoint)
get(){return this.http.get<any>(this.endpoint);}
Vamos repetir o mesmo processo para os métodos post, delet e put, alterando alguns parametros:
Nosso método post precisa receber um objeto Hero para enviar a API
post(hero: Hero) {return this.http.post<any>(this.endpoint,hero);}
OBS: Note que o método update é exatamente a mesma coisa com uma pequena diferença
update(hero: Hero) {return this.http.put<any>(this.endpoint, hero);}
e por último adicionamos o método delete:
delete(){return this.http.delete(this.endpoint);}
Pronto, nosso serviço finalizado está da seguinte forma:
Vamos começar a editar nossos componentes, iniciando pelo componente Card:
card.component.ts
Primeiro precisaremos adicionar um array para armazenar nossos heróis:
heroesArray: Hero[] = [];Agora vamos importar nosso serviço herohttp-service.ts:
import { HeroHttpService } from '../shared/services/herohttp-service';e adicionar uma injeção de dependência no nosso construtor:
constructor(private heroHttpService: HeroHttpService) { }Agora sempre que o nosso componente for carregado, queremos que ele receba via request Get da nossa API uma lista de todos os heróis cadastrados, para isso vamos utilizar um dos Hooks do angular o ngOnInit()
O ngOnInit é o método que é chamado sempre que nosso componente é iniciado (Obs: após o construtor).
Então dentro do ngOnInit vamos chamar o metodo get do nosso serviço e adicionar o array de resposta na nossa variável heroesArray
O método heroHttpService.get(), nos devolve um observable. Desta forma podemos utilizar o subscribe para adicionar um listener na request enviada ao servidor e saber se o request foi realizado com sucesso ou se tivemos algum erro.
Após receber o retorno da API, vamos preencher nosso array de heróis com o valor recebido e em seguida imprimir no console.
Por último, vamos precisar alterar o template do component card novamente para replicar nossos cards para cada herói do array:
Primeiro vamos adicionar um ngFor e em cada iteração avariável hero receberá os dados de um herói diferente do array
<div *ngFor="let hero of heroesArray" class="card hero-card m-4">Depois, vamos utilizar string interpolation para plotar as informaçoes dos heróis nos parágrafos:
<h5 class="card-title">{{hero.superHeroName}}</h5>O arquivo finalizado ficará assim :
Para encerrar, vamos consertar nosso avatar. Primeiro vamos alterar o conteúdo da nossa variável heroAvatar:
card.component.ts
heroAvatar = 'http://localhost:4200/assets/img/';Depois vamos alterar nosso template novamente:
card.component.html
<img class="card-img-top rounded-circle img-background align-items-center" alt="Card image cap" [src]="heroAvatar+hero.image">Pronto, nossa aplicação já está pronta para consumir a API.
Segue o link para o projeto completo até aqui no Github:
Nesse artigo mostramos apenas a implementação do método GET mas caso queira conferir o projeto CRUD completo com os métodos PUT, POST, DELETE, veja no repositório abaixo:
