O que é e como usar HTTP no Angular? -

O que é e como usar HTTP no Angular?

O module de HttpClient nos permite buscar dados de uma fonte externa, como em um database. Ele requer que usemos o Subscribe usando o Observable para ter o retorno.

Como usar o HTTP

Vamos começar importando o módulo do HttpClientModule que fica no “@angular/common/http” e não podemos esquecer de importar no array de App Module.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent  } from './app.component';
 
import { HttpClientModule } from '@angular/common/http';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

O próximo passo é criar um service onde vamos utilizar o Get do HTTP.

Vamos usar o CLI para gerar o service com o nome de “pessoa”.

Ng g s pessoa

Quer saber mais sobre o Angular? Acompanhe o Blog e o meu curso => Aqui

Para usar o HTTP em algum novo serviço precisamos declarar ele dentro do construtor e fazer o import.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
 
@Injectable({
  providedIn: 'root'
})
export class PessoaService {
  constructor(private http: HttpClient) { }
}

Agora estamos com tudo pronto para utilizar o método “get()”, como não temos um servidor web para buscar, vamos utilizar arquivos locais para uma demonstração.

Dentro do projeto vamos criar uma nova pasta chamada “data” e o caminho vai ser o seguinte “src > app > assets > data” e dentro dele vamos criar um arquivo chamado “pessoa.json”.

Agora ao abrir o arquivo “pessoa.json” vamos colocar esses dados:

[
  { "id": 1, "name": "Dener" },
  { "id": 2, "name": "Nay" },
  { "id": 3, "name": "Bruno" },
  { "id": 4, "name": "Sandra" }
]

Vamos utilizar o método “get()” para trazer os dados “externos”, esse método pega uma URL de uma fonte externa como argumento, mas como não estamos utilizando assim, vamos simplificar as coisas.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
 
@Injectable({
  providedIn: 'root'
})
export class PessoaService {
  constructor(private http: HttpClient) { }

 getPessoa() {
      return this.http.get(“../assets/data/pessoa.json”);
 }
}

Agora precisamos transformar o tipo de “pessoa” que pegamos com o “get()” e transformar em algo que representa um array.

Para isso vamos criar um tipo customizado de “pessoa” e vamos criar esse novo arquivo “pessoa.ts”.

Dentro desse novo arquivo vamos criar uma interface chamada “IPessoa”.

Export interface IPessoa {
    id: number,
    name: string
}

O próximo passo é dizer para o “getPessoa()” retornar um tipo “IPessoa”.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
Import { IPessoa } from './pessoa ';
import { Observable } from 'rxjs ';
 
@Injectable({
  providedIn: 'root'
})
export class PessoaService {
 
  constructor(private http: HttpClient) { }

 getPessoa(): Observable<IPessoa[]> {
      return this.http.get<IPessoa[]>(“../assets/data/pessoa.json”);
 }
}

Precisamos Subscribe o observable do componente para podermos usar. Porém o nosso caso é mais simples, vamos usar o main “app” para demonstração. Arquivo “app.component.ts”:

import { Component } from '@angular/core';
import { PessoaService } from './pessoa.service';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
 
  constructor(private pessService: PessoaService) { }
}

Agora sim tudo certo para sobrescrever no Observable que retorna do “getPessoa()” e guardar os dados retornados em um array chamado “pessoa”.

import { Component } from '@angular/core';
import { PessoaService } from './pessoa.service';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
 
  public pessoa:any = [];
 
  constructor(private pessService: PessoaService) { }
 
  ngOnInit(): void {
    this.pessService.getPessoa().subscribe(
      data => {
        this.pessoa = data;
      }
    );
  }
}

Agora que temos os dados, vamos mostrar em tela.

<ul *ngFor="let pessoa of pessoa">
  <li>{{ pessoa.id }}: {{ pessoa.name }}</li>
</ul>

E vai ser mostrado na tela os nomes que colocamos em nosso json.

O que é e como usar HTTP no Angular?