analogjs/angular-http

¿Qué hace angular-http?

Implementa la obtención de datos HTTP en Angular v20+ usando resource(), httpResource() y HttpClient. Útil para llamadas a API, carga de datos con señales, manejo de solicitudes/respuestas e interceptores. Se activa en la obtención de datos, integración de API, estados de carga, manejo de errores o conversión de patrones HTTP basados en Observables a patrones basados en señales.

¿Qué hace?

• Proporciona guías y ejemplos para usar las nuevas APIs de Angular para la obtención de datos HTTP.
• Ayuda a migrar código existente basado en Observables (HttpClient + subscribe) al nuevo enfoque basado en señales (resource() y httpResource()).
• Maneja estados de carga, éxito y error de manera declarativa.
• Integra interceptores HTTP para autenticación, logging, etc.

¿Por qué es útil?

• Modernización: Adopta el nuevo modelo reactivo de Angular basado en señales, que es más simple y eficiente.
• Rendimiento: Las señales reducen el sobreprocesamiento y mejoran la detección de cambios.
• Legibilidad: El código es más declarativo y fácil de seguir.
• Mantenibilidad: Simplifica la lógica de datos y reduce la complejidad de los componentes.

Plataformas compatibles

• Angular v20+ (web, mobile, server-side rendering).
• Cualquier proyecto que use Angular con @angular/core y @angular/common/http.

Cómo funciona

1. resource(): Una función que crea una señal reactiva que puede obtener datos de forma asíncrona. Se usa con un loader que devuelve una promesa o un Observable.

   import { resource } from '@angular/core';
   
   const userResource = resource({
     request: () => ({ id: userId() }),
     loader: async ({ request }) => {
       const response = await fetch(`/api/users/${request.id}`);
       return response.json();
     }
   });
   

2. httpResource(): Una extensión de resource() que usa HttpClient para hacer peticiones HTTP. Proporciona un loader predefinido que maneja la serialización, cabeceras, etc.

   import { httpResource } from '@angular/common/http';
   
   const users = httpResource(() => '/api/users');
   const user = httpResource(() => `/api/users/${id}`);
   

3. HttpClient: Sigue siendo útil para casos avanzados o cuando se necesita más control. La skill muestra cómo combinarlo con señales.

4. Interceptores: Se pueden usar como de costumbre con HttpClient y httpResource() para agregar lógica transversal (autenticación, logging, etc.).

Ejemplos de uso

Obtener datos con httpResource()

import { Component, inject } from '@angular/core';
import { httpResource } from '@angular/common/http';

@Component({
  selector: 'app-users',
  template: `
    @if (users.isLoading()) {
      <p>Cargando...</p>
    } @else if (users.error()) {
      <p>Error: {{ users.error() }}</p>
    } @else {
      <ul>
        @for (user of users.value(); track user.id) {
          <li>{{ user.name }}</li>
        }
      </ul>
    }
  `
})
export class UsersComponent {
  users = httpResource(() => '/api/users');
}

Migrar de Observable a señal

Antes (con Observable):

export class UsersComponent {
  private http = inject(HttpClient);
  users$ = this.http.get<User[]>('/api/users');
}

Después (con señal):

export class UsersComponent {
  users = httpResource<User[]>(() => '/api/users');
}

Con solicitud parametrizada

const userPosts = httpResource<Post[]>(() => ({
  url: '/api/posts',
  params: { userId: selectedUserId() }
}));

Manejo de errores

const data = httpResource(() => '/api/data');

// En la plantilla:
// @if (data.error()) { <p>Algo salió mal: {{ data.error().message }}</p> }

Notas importantes

• httpResource() devuelve un objeto con propiedades: value, isLoading, error, status.
• Las señales son reactivas: cualquier cambio en las dependencias (como userId()) activa una nueva petición.
• Asegúrate de que tu proyecto use Angular v20+ y tenga @angular/common/http instalado.
• Para más detalles, consulta la documentación oficial de Angular.

Activación

Esta skill se activa automáticamente cuando:

• Se necesita obtener datos de una API en Angular.
• Se usan señales y se quiere integrar HTTP.
• Se migra código de Observable a señal.
• Se configuran interceptores o manejo de errores HTTP.