ANG_FRONT

Capítulo 8.10. Métodos POST y PUT en Angular

Objetivo de la práctica

• Crear un servicio para manejar POST y PUT.

Duración aproximada

• 10 minutos.

Instrucciones

• Configuración inicial

• Antes de comenzar, asegurarse de haber configurado el HttpClientModule y de tener un servicio para interactuar con la API. Si no lo has hecho, revisa el contenido anterior sobre Peticiones HTTP en Angular (REST).

• Creación de un servicio para manejar POST y PUT

• Vamos a extender el servicio que creamos previamente (product.service.ts) para incluir métodos para agregar y actualizar productos.

1. Paso 1: Implementar el método POST.

• El método POST se utiliza para enviar datos a la API y crear un nuevo recurso.

// product.service.ts

createProduct(product: Product): Observable<Product> {
  return this.http.post<Product>(this.apiUrl, product).pipe(
    catchError(this.handleError)
  );
}

1. Paso 2: Implementar el método PUT.

• El método PUT se utiliza para actualizar un recurso existente. Generalmente, se debe especificar el ID del recurso que se va a actualizar.

// product.service.ts

updateProduct(id: number, product: Product): Observable<Product> {
  return this.http.put<Product>(`${this.apiUrl}/${id}`, product).pipe(
    catchError(this.handleError)
  );
}

• Uso de POST y PUT en componentes

• Ahora que tenemos los métodos en nuestro servicio, vamos a implementar la lógica para utilizarlos en un componente.

1. Paso 1: Crear un componente para agregar productos.

• Generar un nuevo componente llamado product-add.

ng generate component components/product-add

1. Paso 2: Implementar la lógica del componente para el método POST.

• En el componente product-add.component.ts, inyectar el servicio y utilizar el método createProduct para enviar un nuevo producto.

import { Component } from '@angular/core';
import { ProductService } from '../services/product.service';
import { Product } from '../services/product.service';

@Component({
  selector: 'app-product-add',
  template: `
    <h2>Agregar Producto</h2>
    <form (ngSubmit)="onSubmit()">
      <label for="name">Nombre:</label>
      <input type="text" id="name" [(ngModel)]="product.name" name="name" required>
      
      <label for="description">Descripción:</label>
      <textarea id="description" [(ngModel)]="product.description" name="description" required></textarea>

      <label for="price">Precio:</label>
      <input type="number" id="price" [(ngModel)]="product.price" name="price" required>

      <button type="submit">Agregar</button>
    </form>
  `
})
export class ProductAddComponent {
  product: Product = { id: 0, name: '', description: '', price: 0 };

  constructor(private productService: ProductService) {}

  onSubmit() {
    this.productService.createProduct(this.product).subscribe({
      next: (data) => {
        console.log('Producto agregado:', data);
        // Aquí puedes agregar lógica para redirigir o mostrar un mensaje
      },
      error: (err) => {
        console.error('Error al agregar producto:', err);
      }
    });
  }
}

1. Paso 3: Crear un componente para actualizar productos.

• Generar un nuevo componente llamado product-edit.

ng generate component components/product-edit

1. Paso 4: Implementar la lógica del componente para el método PUT.

• En el componente product-edit.component.ts, inyectar el servicio y utilizar el método updateProduct para actualizar un producto existente.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ProductService } from '../services/product.service';
import { Product } from '../services/product.service';

@Component({
  selector: 'app-product-edit',
  template: `
    <h2>Editar Producto</h2>
    <form (ngSubmit)="onSubmit()">
      <label for="name">Nombre:</label>
      <input type="text" id="name" [(ngModel)]="product.name" name="name" required>
      
      <label for="description">Descripción:</label>
      <textarea id="description" [(ngModel)]="product.description" name="description" required></textarea>

      <label for="price">Precio:</label>
      <input type="number" id="price" [(ngModel)]="product.price" name="price" required>

      <button type="submit">Actualizar</button>
    </form>
  `
})
export class ProductEditComponent implements OnInit {
  product!: Product;

  constructor(
    private productService: ProductService,
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    const id = +this.route.snapshot.paramMap.get('id')!;
    this.productService.getProductById(id).subscribe(data => {
      this.product = data;
    });
  }

  onSubmit() {
    const id = this.product.id;
    this.productService.updateProduct(id, this.product).subscribe({
      next: (data) => {
        console.log('Producto actualizado:', data);
        // Aquí puedes agregar lógica para redirigir o mostrar un mensaje
      },
      error: (err) => {
        console.error('Error al actualizar producto:', err);
      }
    });
  }
}