Angular: Transferencia de Datos HTTP--HTTPClient _y

Transferencia de Datos: HTTPClient y APIs REST

Transferencia de Datos: En Angular, la transferencia de datos generalmente se refiere al proceso de enviar y recibir datos entre una aplicación Angular y un servidor remoto, a menudo a través de una API REST.

HTTPClient: Es un servicio de Angular que se utiliza para realizar solicitudes HTTP. Permite a las aplicaciones Angular comunicarse con servidores remotos a través de HTTP para realizar operaciones como GET, POST, PUT y DELETE.

APIs REST: Representational State Transfer (REST) es un estilo de arquitectura que utiliza HTTP para acceder y manipular recursos en un servidor. Las APIs RESTful permiten operaciones CRUD (Create, Read, Update, Delete) a través de endpoints definidos.

Componentes de Transferencia de Datos, HTTPClient y APIs REST

HttpClientModule: Módulo que proporciona las funcionalidades HTTP a la aplicación Angular.
HttpClient: Servicio para realizar solicitudes HTTP.
HttpHeaders: Clase para manejar encabezados HTTP.
HttpParams: Clase para manejar parámetros de URL.
HttpClientTestingModule: Módulo para pruebas unitarias que permite interceptar y controlar las solicitudes HTTP durante las pruebas.

Videotutoriales:

Angular: Transferencia de Datos HTTP - Interceptores y Programación Reactiva https://youtu.be/ZfzZ8S4DzpI
HTTP Interceptor https://youtu.be/fO86sfYpaj8
CRUD - Angular 17 + Firebase (Contact list app) https://youtu.be/ZCsoO9sOajA
ANGULAR 17: Consumir API REST-- MANEJO DE ERRORES e INTERCEPTORS https://youtu.be/OgkgPv19gYY
Angular 17: Consumir API https://youtu.be/Q_cdDiu1KG4
Angular Basics - HttpClient https://youtu.be/QTc0akSAZhQ
GET HTTP angular con JSON https://youtu.be/WtPY-JHczPM
consumir una API RESTFul con Angular: https://youtu.be/mTTVJcr0D_I
Rest API + Async + Observables + Suscribe + HttpClient https://youtu.be/EHs5X2n2q5E
API REST desde Angular Crear un servicio https://youtu.be/PtDrAb4Num0

Interpretación de cada componente

HttpClientModule:
- Módulo que habilita el uso de HttpClient en la aplicación Angular.


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

@NgModule({
  imports: [HttpClientModule]
})
export class AppModule {}

HttpClient:

Servicio que proporciona métodos para realizar solicitudes HTTP como get, post, put, delete.


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

constructor(private http: HttpClient) {}

this.http.get('https://api.example.com/data').subscribe(data => console.log(data));

HttpHeaders:

Clase utilizada para configurar los encabezados HTTP de una solicitud.


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

const headers = new HttpHeaders({ 'Content-Type': 'application/json' });

HttpParams:

Clase utilizada para agregar parámetros a la URL de una solicitud HTTP.


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

const params = new HttpParams().set('id', '123');

HttpClientTestingModule:

Módulo para pruebas que permite interceptar solicitudes HTTP y proporcionar respuestas controladas.

import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

@NgModule({
  imports: [HttpClientTestingModule]
})
export class TestModule {}

Ejemplo de Transferencia de Datos, HTTPClient y APIs REST

Este ejemplo muestra cómo usar HttpClient para realizar operaciones CRUD en una API REST, utilizando Angular v18 para manejar la transferencia de datos.

Configuración del módulo:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { DataService } from './data.service';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule {}

Servicio Angular:


// data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'http://localhost:3000/users';

  constructor(private http: HttpClient) {}

  getUsers(): Observable <any> {
    return this.http.get<any>(this.apiUrl);
  }

  addUser(user: any): Observable<any> {
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    return this.http.post<any>(this.apiUrl, user, { headers });
  }

  updateUser(id: string, user: any): Observable<any> {
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    return this.http.put<any>(`${this.apiUrl}/${id}`, user, { headers });
  }

  deleteUser(id: string): Observable<any> {
    return this.http.delete<any>(`${this.apiUrl}/${id}`);
  }
}

Componente Angular:


// app.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  users: any[] = [];
  newUser = { name: '', email: '' };

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.loadUsers();
  }

  loadUsers() {
    this.dataService.getUsers().subscribe((data) => {
      this.users = data;
    });
  }

  addUser() {
    this.dataService.addUser(this.newUser).subscribe((user) => {
      this.users.push(user);
      this.newUser = { name: '', email: '' };
    });
  }

  updateUser(user: any) {
    const updatedUser = { name: 'Updated Name', email: 'updated@example.com' };
    this.dataService.updateUser(user.id, updatedUser).subscribe(() => {
      this.loadUsers();
    });
  }

  deleteUser(user: any) {
    this.dataService.deleteUser(user.id).subscribe(() => {
      this.loadUsers();
    });
  }
}

Plantilla HTML:


<!-- app.component.html -->

<div>

<h1>User List</h1>

<ul>

<li *ngFor="let user of users">

{{ user.name }} ({{ user.email }})

<button (click)="updateUser(user)">Update</button>

<button (click)="deleteUser(user)">Delete</button>

</li>

</ul>


<h2>Add New User</h2>
  <form (ngSubmit)="addUser()">

<label for="name">Name:</label>

<input id="name" [(ngModel)]="newUser.name" name="name" required>


<label for="email">Email:</label>

<input id="email" [(ngModel)]="newUser.email" name="email" required>


<button type="submit">Add User</button>

</form>

</div>

Configuración del servidor backend con JSON Server:

Instala JSON Server:

// bash
npm install -g json-server

Crea un archivo db.json en la raíz de tu proyecto con el siguiente contenido:

 // json
{
  "users": []
}

Inicia JSON Server:

 // bash
json-server --watch db.json --port 3000

mmm

Angular: Transferencia de Datos HTTP--HTTPClient _y _APIs REST