Consumindo APIs com Angular

Configurando o projeto e criando os componentes

Pessoal nesse artigo vamos criar uma aplicação front-end simples para consumir nossa API. A idéia aqui é mostrar como criar uma aplicação front-end utilizando o framework Angular.

Para seguir com esse artigo você precisará ter instalado em seu computador o node.JS e angular-cli.

Abaixo você pode encontrar os repositórios oficiais para baixar/instalar:

Angular CLI

Download | Node.js

Agora que ja temos os pré-requisitos instalados vamos criar um novo projeto angular:

ng new heroes

vamos entrar na pasta criada pelo angular-cli para a nossa aplicação:

cd heroes

agora vamos criar os componentes da aplicação:

ng generate component header
ng generate component input
ng generate component gallery
ng generate component card

vamos baixar os arquivos do bootstrap:

npm install bootstrap --save

Pronto, agora precisamos abrir o diretório atual no seu editor de código preferido no meu caso o Visual studio code.

Configurando o bootstrap

Para adicionar o bootstrap na nossa aplicação, precisaremos adicionar a referência do bootrstrap no arquivo angular.json

“styles”: [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]

Pronto, agora que a nossa aplicação ja está configurada vamos testar. Para isso digitamos o comando ng serve que irá compilar e carregar nossa aplicação em um servidor temporário:

ng serve

após a compilação dos arquivos precisamos abrir um navegador e digitar a url:

http://localhost:4200

Atualizando nossos componentes

Vamos começar a editar nossos componentes modificando o conteúdo do: header.component.html

agora precisamos editar o app.component.html vamos substituir seu conteúdo e adicionar o seletor do componente header:

<app-header></app-header>
<router-outlet></router-outlet>

note que não removemos o router-outlet pois vamos precisar dele para controlar as rotas da nossa aplicação.

Pronto, nossa aplicação já tem um cabeçalho:

Para criar as rotas da nossa aplicação precisaremos modificar o arquivo app-routing.module.ts

Vamos importar os componentes da aplicação:

e modificar o array routes:

Pronto, agora vamos editar o apontamento dos links do nosso cabeçalho header.component.html

<a class="navbar-brand" routerLink="/">Heroes</a>

<a class="nav-link" routerLink="/new">Add New</a>

Perceba que substituimos a propriedade href pelo routerLink que é uma diretiva do angular utilizada onde podemos gerar os links para nossas telas.

Vamos editar o componente input.component.html

input.component.css

http://localhost:4200/new

Ok, agora vamos editar ocomponent card.component.html

card.component.css

Vamos editar o ultimo componente da nossa aplicação gallery.component.html

Agora precisamos adicionar as imagens dos nossos heróis, primeiro vamos fazer o download :

https://drive.google.com/drive/folders/1s6TpOGc3I4DQkMml7FUvdMXBiVwC0Phe?usp=sharing

depois vamos criar a pasta: src/assets/img

Agora que ja temos as imagens vamos adicionar uma variável ao nosso componente para salvar o caminho das nossas imagens:

private imagesPath = 'http://localhost:4200/assets/img/';

precisaremos adicionar um array para receber a lista de imagens da nossa galeria:

private images = [
'robbin.png',
'incrediblew.png',
'arrow.png',
'flash.png',
'america.png',
'spider.png',
'wonderwoman.png',
'cat.png',
'batman.png'];

Versão atualizada do nosso arquivo : gallery.component.ts

Você deve ter percebido que temos varias imagens porém no nosso arquivo gallery.component.html temos uma unica tag <img> precisamos modificar essa tag para que ela se repita para cada item do nosso array de imagens:

Vamos utilizar uma diretiva estrutural ou structural directive: *ngFor

O ngFor permite realizar uma iteração exatamente como o laço de repetição for que utilizamos em varias linguagens de programação.

Vamos editar o gallery.component.html, adicionando ngFor na tag div:

<div *ngFor="let img of images" class="col-lg-3 col-md-4 col-6">

Pronto, nossa div e seu conteúdo interno está sendo replicado para cada novo item do array, porém ainda precisamos atribuir cada item do array na propriedade src tag < img >

Para isso vamos utilizar um property binding que nos permite vincular a propriedade de um elemento html ao valor de uma variável:

<img class="img-fluid img-thumbnail cursor-pointer" [src]="imagesPath+img" alt="">

Nesse caso nós estamos atribuindo o valor do caminho das imagens + o nome da imagem que corresponde ao item de iteração do array img.

Corrigindo o avatar

Agora que ja temos a estrutura geral, precisamos corrigir alguns problemas de imagem e redirecionamento.

Primeiro no componente input precisaremos consertar a imagem do avatar:

vamos adicionar uma variável que deverá receber o caminho das nossas imagens:

heroAvatar = 'http://localhost:4200/assets/img/default.png';

Agora vamos modificar o input.component.html, e fazer um property binding para vincular essa variavel à propriedade src da nossa imagem:

<img class="cursor-pointer card-img-top rounded-circle align-items-center" [src]="heroAvatar" alt="Card image cap">

Também temos que corrigir o avatar do nosso componente card:

card.component.ts

Novamente vamos criar um array com o caminho:

heroAvatar = 'http://localhost:4200/assets/img/default.png';

Vamos vincular a variável via property binding:

card.component.html

<img class="card-img-top rounded-circle img-background align-items-center" [src]="heroAvatar" alt="Card image cap">

Selecionando o avatar

No component input ao clicar na imagem do avatar, queremos permitir que nosso usuário selecione um novo avatar e para isso precisamos redireciona-lo para o componente gallery

Vamos modificar o input.component.ts e utilizar um módulo do angular chamado Router:

Primeiro vamos importar o Router

import { Router } from '@angular/router';

Depois vamos adicionar o router através de injeção de dependência:

constructor(private router: Router) { }

Agora vamos criar um método que será chamado sempre que a imagem for clicada:

onSelectImage() {
this.router.navigate(['/gallery']);
}

por último precisamos adicionar um event binding na imagem para chamarmos o metódo acima:

input.component.html

<img class="cursor-pointer card-img-top rounded-circle align-items-center" (click)="onSelectImage()" [src]="heroAvatar" alt="Card image cap">

ufa, nossa aplicaçao está quase pronta para chamar a API, se tudo deu certo, ela estará da seguinte forma:

no próximo artigo vamos finalizar nosso app com a chamada da API:

Consumindo APIs com Angular II

Até mais!