Actividad entregable

3.1. Crear el servicio ProductService

Creamos un servicio en la carpeta services llamado product.

Angular me genera el archivo product.service.ts dentro de src/app/services

ng generate service services/product --skip-tests

Definir el modelo de datos: interfaz Product

Definimos una interfaz Product que representa la estructura de los productos tal y como vienen de la API.

No es una clase, es una interface: solo sirve para describir datos, no se instancia con new.

Esto ayuda a TypeScript a comprobar tipos y a HttpClient a saber qué esperamos recibir

Abrimos src/app/services/product.service.ts y encima de la clase ProductService, añade:

export interface Product {
  _id: string;
  name: string;
  description: string;
  price: number;
  category: string;
  image: string;
  active: boolean;
}

Inyectar HttpClient

Importamos HttpClient y lo inyectamos en el constructor.

Gracias a que en el vídeo anterior configuramos provideHttpClient() en app.config.ts, Angular ya sabe cómo crear este HttpClient.

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

Y en la clase:

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  private url = 'https://api.npoint.io/1dee63ad8437c82b24fe';

  constructor(private http: HttpClient) { }

}

He subido los datos de la API en este enlace:

https://api.npoint.io/1dee63ad8437c82b24fe

Crear el método cargarProductos()

Creamos un método muy sencillo llamado cargarProductos().

Este método hace una petición GET a la URL de la API y devuelve un Observable de tipo Product[], es decir, un array de productos.

De momento no vamos a hacer nada más avanzado: simplemente queremos comprobar que Angular se conecta correctamente a la API y recibe los datos

En la clase ProductService, debajo del constructor, añadimos:

cargarProductos() {
  return this.http.get<Product[]>(this.url);
}

cargarProductos() {
  return this.http.get<Product[]>(this.url);
}