Angular 6 + REST – Part I

Angular 6 + REST – Part I

Dando sequência ao nosso post anterior sobre Angular 6 vamos ver como acessar API’s REST com Angular. Fique atento pois vamos utilizar o projeto de exemplo construído no post anterior.

Primeiramente vamos adicionar à nossa aplicação o módulo HttpClientModule. Portanto altere o arquivo /src/app/app.module.ts nos seguintes pontos:


import { HttpClientModule } from '@angular/common/http';
....
 imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
],
...

 

Service

Vamos criar uma classe do tipo “Servico” que poderá ser injetada dentro de qualquer componente de nossa aplicação. Usaremos o CLI para gerar nosso serviço, estando no diretório /src/app digite:


ng g service apiclient

Observe que foram criados dois arquivos: apiclient.service.ts e apiclient.service.spec.ts a classe com o código do nosso serviço e outra classe para testes respectivamente. Abaixo segue código da nossa classe de service:


import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root'
})
export class ApiclientService {

constructor() { }
}

O decorator @Injectable pode habilitar a injeção do componente/service em qualquer módulo da app através da propriedade: provideIn. No caso como o valor do atribute é root quer dizer que o Angular já irá implicitamente adicionar a declaração do nosso service no main module da app( módulo principal: app.module.ts ) e assim o service estará disponível para toda a aplicação, ou seja, visibilidade global.

O que precisamos fazer agora é o import da classe HttpClient no nosso service:


import { HttpClient } from '@angular/common/http';

Vamos criar um método que irá consumir a API REST do site https://resttesttest.com/ e também alterar o construtor do Service. Portanto altere a classe apiclient.service.ts:


export class ApiclientService {

URL = 'https://httpbin.org';

constructor(private httpClient: HttpClient) {}

getInfo(){
return this.httpClient.get('${this.URL}/get');
}

}

Por uma questão de praticidade vamos reutilizar o service criado no post anterior e realizar a chamada do método getInfo do nosso service nesta classe. Segue como deve ficar o código da classe src/app/user-create/user-create.component.ts:


import { Component, OnInit } from '@angular/core';
import { ApiclientService } from '../apiclient.service';

@Component({
selector: 'app-user-create',
templateUrl: './user-create.component.html',
styleUrls: ['./user-create.component.css']
})
export class UserCreateComponent implements OnInit {

constructor(private apiclientService: ApiclientService ) { }

ngOnInit() {
this.apiclientService.getInfo().subscribe((data: Array<Object>) => {
console.log(data);
}
);
}

}

Observe que tivemos que fazer o import da classe ApiclientService:import { ApiclientService } from ‘../apiclient.service’; e também realizamos a injeção deste na classe através da alteração do construtor: constructor(private apiclientService: ApiclientService ). Realizamos a chamada do método getInfo no corpo do método ngOnInit que irá sempre ser chamado após construção do componente:


this.apiclientService.getInfo().subscribe((data: Array<Object>) => {
console.log(data);
}

Perceba novamente,  que apenas por praticidade, o método apenas imprimi no console do navegador o retorno de sua chamada.

Para visualizar o resultado da chamada ao método get inicie a aplicação digitando na raiz do nosso projeto:


ng serve

E depois acesse http://localhost:4200 e ative no browser a função que possibilita visualizarmos os valores de saída do console. No caso estou usando o google Chrome então apertei F12 e na aba Console conseguimos ver o resultado da chamada:


Object
args:Object
headers:Object
Accept:"application/json, text/plain, */*"
Accept-Encoding:"gzip, deflate, br"
Accept-Language:"pt-BR,pt;q=0.8,en-US;q=0.6,en;q=0.4,es;q=0.2"
Connection:"close"
Host:"httpbin.org"
Origin:"http://localhost:4200"
Referer:"http://localhost:4200/usercreate"
User-Agent:"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.86 Safari/537.36"
__proto__:Object
origin:"191.187.78.238"
url:"https://httpbin.org/get"

Post

Para testar uma chamada via post primeiramente vamos alterar o método getInfo na classe src/app/user-create/user-create.component.ts:

getInfo(){
return this.httpClient.post('https://httpbin.org/post', "{'test': 'test123'}");
}

O resultado no console do browser deve ser algo parecido com este abaixo:

Object {args: Object, data: "{'test': 'test123'}", files: Object, form: Object, headers: Object…}
args
:
Object
data
:
"{'test': 'teste123'}"
files
:
Object
form
:
Object
headers
:
Object
json
:
null
origin
:
"191.187.78.238"
url
:
"https://httpbin.org/post"

Conclusão

O exemplo acima além de didático é extremamente simples, apenas para que o leitor consiga visualizar na prática como realizar chamadas REST através do Angular. No próximo post vamos aprimorar nosso exemplo com chamadas: get, post, etc a uma API construída por nós utilizando Spring Boot.

 

 

 

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s