analogjs/angular-di

¿Qué hace angular-di?

Implementa la inyección de dependencias en Angular v20+ usando inject(), tokens de inyección y configuración de proveedores. Útil para arquitectura de servicios, suministro de dependencias en diferentes niveles, creación de tokens inyectables y gestión de servicios singleton vs. con ámbito. Se activa al crear servicios, configurar proveedores, usar tokens de inyección o entender la jerarquía de DI.

¿Qué es la Inyección de Dependencias en Angular?

La inyección de dependencias (DI) es un patrón de diseño donde las dependencias se proporcionan a los componentes en lugar de ser creadas internamente. Angular v20+ ofrece un sistema basado en la función inject() y los tokens de inyección (InjectionToken).

Características Clave

• inject(): Función moderna para obtener dependencias en contexto de inyección.
• Tokens de Inyección (InjectionToken): Permiten inyectar valores que no son clases (como configuraciones, cadenas, objetos).
• Jerarquía de DI: Las dependencias pueden definirse a nivel de raíz, módulo, componente o elemento.
• Proveedores: Configuración que indica cómo se crea una dependencia (singleton, factoría, alias).
• Ámbito (Scope): Control de instancias únicas vs. nuevas instancias por contexto.

Ejemplo Básico

import { Injectable, inject } from '@angular/core';

// Servicio simple
@Injectable({ providedIn: 'root' })
export class LoggerService {
  log(message: string): void {
    console.log(message);
  }
}

// Otro servicio que inyecta LoggerService
@Injectable({ providedIn: 'root' })
export class UserService {
  private logger = inject(LoggerService);

  getUser() {
    this.logger.log('Obteniendo usuario...');
  }
}

Uso de InjectionToken

Para valores no-clase:

import { InjectionToken, inject } from '@angular/core';

export const API_URL = new InjectionToken<string>('api.url');

// En un componente
@Component({...})
export class MyComponent {
  private apiUrl = inject(API_URL);
}

Configuración de Proveedores

Puedes configurar proveedores a diferentes niveles:

1. Raíz (providedIn: 'root'): Singleton global.
2. Componente (providers: [...]): Nueva instancia por componente.
3. Elemento (viewProviders: [...]): Solo disponible para la vista del componente y sus hijos.

@Component({
  providers: [MyService],  // Nueva instancia por componente
  viewProviders: [MyService2], // Disponible solo en la vista
  standalone: true
})
export class ExampleComponent {
  private service = inject(MyService);
}

Jerarquía de DI

Angular resuelve las dependencias subiendo en la jerarquía de inyectores:

1. Inyector de elemento (vista)
2. Inyector de componente
3. Inyector de módulo (si no es standalone)
4. Inyector raíz
5. Plataforma

Buenas Prácticas

• Usar providedIn: 'root' para servicios singleton.
• Preferir inject() sobre la inyección por constructor (más seguro en contextos dinámicos).
• Definir tokens de inyección con nombres descriptivos.
• Evitar la creación de dependencias dentro de componentes; delegar a servicios.
• Mantener la jerarquía de DI lo más plana posible para facilitar pruebas.

Activación de la Habilidad

Esta habilidad se activa cuando trabajas con:

• Creación de servicios (@Injectable)
• Configuración de proveedores (providers, viewProviders)
• Uso de InjectionToken
• Comprensión o depuración de jerarquía de DI
• Gestión de ámbito entre singleton y servicios por contexto