8.HTTP Client

Objetivo

Aprender a realizar solicitudes HTTP en Angular utilizando HttpClient.

Configurar el Módulo HTTP

Abre src/app/app.module.ts y asegura que el módulo HttpClientModule esté importado:

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

@NgModule({
  imports.[
    // otros imports...
    HttpClientModule
  ]
})

Crear un Servicio HTTP

Abre src/app/my-service.service.ts y agrega la lógica para realizar solicitudes HTTP:

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

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

  constructor(private http.HttpClient) {}

  getPosts().Observable {
    return this.http.get(this.apiUrl);
  }
}

Usar el Servicio HTTP en un Componente

Abre src/app/my-component/my-component.component.ts y modifica la clase para usar el servicio HTTP:

import { Component, OnInit } from '@angular/core';
import { MyService } from '../my-service.service';

@Component({
  selector.'app-my-component',
  templateUrl.'./my-component.component.html',
  styleUrls.['./my-component.component.css']
})
export class MyComponent implements OnInit {
  posts.any[] = [];

  constructor(private myService.MyService) {}

  ngOnInit().void {
    this.myService.getPosts().subscribe(data => {
      this.posts = data;
    });
  }
}

Editar la Plantilla del Componente

Abre src/app/my-component/my-component.component.html y agrega el siguiente contenido:

<ul>
  <li *ngFor="let post of posts">
    <h3>{{ post.title }}</h3>
    <p>{{ post.body }}</p>
  </li>
</ul>

Conceptos Básicos

HttpClient en Angular permite realizar solicitudes HTTP para interactuar con APIs y servicios web. Utiliza observables para manejar las respuestas de manera reactiva.

Ejercicio

Crea y maneja solicitudes HTTP en tu proyecto Angular utilizando HttpClient. Verifica que los datos se recuperen y se muestren correctamente en el navegador.