Aula 11: HTTP Client e Consumo de API REST 🌐

Nesta aula, vamos aprender como conectar nossa aplicação Angular a servidores externos para buscar, criar, atualizar e deletar dados usando o HttpClient.

---

📡 O que é o HttpClient?

É um serviço nativo do Angular que facilita a realização de requisições HTTP (GET, POST, PUT, DELETE) para APIs REST.

• Baseado em Observables (RxJS).
• Trata automaticamente a conversão para JSON.
• Oferece interceptores para gerenciar tokens e erros.

---

🛠️ Configuração Standalone

No modelo standalone, habilitamos o cliente HTTP no main.ts usando o provider provideHttpClient().

import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient() // Ativa o HTTP na app
  ]
});

---

💉 Usando o HttpClient no Serviço

Sempre isolamos as chamadas de API em serviços para manter o código limpo e reutilizável.

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

@Injectable({ providedIn: 'root' })
export class PostService {
  private url = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) {}

  listarPosts() {
    return this.http.get<any[]>(this.url);
  }

  salvarPost(post: any) {
    return this.http.post(this.url, post);
  }
}

---

📥 Consumindo no Componente

Como o http.get retorna um Observable, precisamos usar o método .subscribe() para receber os dados.

export class ListaPostsComponent {
  posts: any[] = [];

  constructor(private service: PostService) {}

  ngOnInit() {
    this.service.listarPosts().subscribe(dados => {
      this.posts = dados;
    });
  }
}

---

🌟 Fluxo da Requisição

graph LR
    A[Componente] --> B[Serviço]
    B --> |http.get| C[API REST]
    C --> |JSON Response| B
    B --> |Observable| A
    A --> |subscribe| D[Atualiza Tela]

---

🚀 Prática: Consumo de API Real

Vamos utilizar a API gratuita JSONPlaceholder para: 1. Listar uma série de postagens em uma lista. 2. Criar um pequeno formulário para "simular" o envio de um novo post. 3. Implementar um botão de deletar que remove o item da interface.

---

🏁 Mini-Projeto da Aula

Crie um buscador de CEP usando a API do ViaCEP. O usuário digita o CEP, clica no botão e o seu serviço deve retornar o endereço completo para ser exibido na tela.