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:
Download | Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
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:
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
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:
Até mais!