Conectar una aplicación de Angular con una API es una de las habilidades más prácticas que puedes dominar como desarrollador frontend. Entender cómo funcionan las solicitudes GET sobre HTTP te permite obtener información de servidores externos y renderizarla de forma dinámica en tu proyecto. Aquí se explica paso a paso cómo lograrlo, desde la configuración del módulo HTTP hasta la correcta manipulación del tipado y el renderizado de productos.
¿Qué son los verbos HTTP y cómo funciona GET?
Cuando te conectas a una API, trabajas con verbos HTTP que definen el tipo de operación que deseas realizar. El verbo GET se utiliza exclusivamente para obtener información [0:10]. Por ejemplo, puedes solicitar el listado completo de productos de un e-commerce o pedir el detalle de un producto específico usando su ID.
Existen otros verbos como PUT, POST y DELETE, que sirven para modificar, crear y eliminar recursos respectivamente. Sin embargo, GET es el punto de partida fundamental para cualquier interacción con una API.
¿Cómo se configura el HTTP Client Module en Angular?
Para poder realizar peticiones desde una aplicación de Angular, es necesario habilitar el módulo HttpClientModule [2:05]. Este se importa desde el paquete @angular/common/http y se registra dentro del array de imports en el AppModule.
- Importa
HttpClientModule desde @angular/common/http.
- Agrégalo al array de
imports en tu app.module.ts.
- Si trabajas con el código base del curso, ya viene habilitado.
- En un proyecto nuevo, verifica que esté presente para evitar errores.
Sin este módulo activo, Angular no podrá ejecutar ninguna petición HTTP.
¿Cómo se estructura el servicio para hacer un GET?
El servicio ProductService utiliza la inyección de dependencias para incorporar el HttpClient [2:30]. Dentro de este servicio, el método getAllProducts ejecuta this.http.get(), indicando de forma explícita que se trata de una solicitud GET que espera recibir un array de productos.
typescript
getAllProducts() {
return this.http.get<Product[]>(this.apiUrl);
}
Este patrón es limpio y permite que Angular infiera el tipo de dato que retorna la API.
¿Cómo tipar correctamente los modelos de datos?
Al trabajar con una API real, los datos pueden cambiar respecto a versiones anteriores. En este caso, el modelo de Product requirió ajustes importantes [3:20]:
- images dejó de ser un solo string y pasó a ser un
string[], es decir, un array de imágenes.
- category ya no es un string simple, sino un subobjeto con propiedades
id y name.
Para manejar esto correctamente, se crea una interfaz separada para Category:
typescript
interface Category {
id: number;
name: string;
}
Y se referencia dentro de la interfaz Product:
typescript
interface Product {
id: number;
title: string;
price: number;
images: string[];
description: string;
category: Category;
}
Definir un estado inicial adecuado es crucial [5:40]. En lugar de dejar propiedades sin valor, se asignan valores por defecto como id: 0, name: '' y images: []. Esto previene errores de compilación y problemas al manejar estados vacíos.
¿Cómo se renderizan los datos obtenidos en el componente?
Desde el componente, se inyecta el ProductService y en el ngOnInit se ejecuta la petición [4:50]. Angular utiliza observables en su cliente HTTP, lo que significa que debes llamar a .subscribe() para obtener la respuesta.
typescript
ngOnInit() {
this.productService.getAllProducts().subscribe(data => {
this.products = data;
});
}
El array products inicia vacío y se llena una vez que la API responde.
¿Cómo manejar un array de imágenes en el template?
Como ahora cada producto tiene múltiples imágenes, se selecciona la primera posición del array con product.images[0] [6:15]. Sin embargo, acceder a la posición cero de un array vacío puede generar un error de tipo undefined.
La solución es agregar un ngIf que valide la existencia de imágenes antes de renderizar:
html
<img *ngIf="product.images.length > 0" [src]="product.images[0]">
Al verificar en el navegador usando las herramientas de desarrollo y la pestaña Network con el filtro Fetch, puedes confirmar que la petición GET se ejecutó correctamente con un código de respuesta 200, devolviendo cincuenta productos [7:20].
¿Ya probaste conectar tu proyecto con la API? Comparte en los comentarios cómo te fue con tu primer request GET.
