¿Qué son los servicios e inyección de dependencias en Angular?

Question

Accepted Answer

Un **servicio** es una clase para **lógica no relacionada con la UI** — obtención de datos, reglas de negocio, estado compartido, logging — que los componentes pueden reutilizar. La **Inyección de Dependencias (DI)** es cómo Angular *proporciona* esos servicios a los componentes que los necesitan, en lugar de que los componentes los creen manualmente.

## Definir un servicio

```ts
import { Injectable } from "@angular/core";

@Injectable({ providedIn: "root" }) // makes it a singleton available app-wide
export class UserService {
  private users = [];
  getUsers() { return this.users; }
  addUser(u) { this.users.push(u); }
}
```

El decorador `@Injectable({ providedIn: "root" })` registra el servicio en el sistema DI de Angular como una única instancia compartida (singleton) para toda la aplicación.

## Inyectarlo en un componente

```ts
@Component({ ... })
export class UserListComponent {
  // Angular sees this constructor param and INJECTS the singleton automatically
  constructor(private userService: UserService) {}

users = this.userService.getUsers(); // just use it
}
```

Simplemente declara el servicio como parámetro del constructor; el DI de Angular **crea y proporciona** la instancia. Nunca escribes `new UserService()`. (Angular moderno también puede usar la función `inject()` en lugar de inyección en constructor.)

```ts
import { inject } from "@angular/core";
export class UserListComponent {
  private userService = inject(UserService); // alternative injection style
}
```

## Por qué DI es valioso

```text
✓ Single source of truth — one shared UserService instance across components
✓ Loose coupling — components depend on the type, not on constructing it
✓ Testability — swap in a mock service in tests easily
✓ Lifecycle management — Angular handles creation and sharing
```

Como el componente no construye sus dependencias, puedes inyectar un servicio **falso** en las pruebas, o cambiar la implementación en toda la aplicación en un único lugar.

## Por qué es importante

Los servicios + DI son centrales en la arquitectura de Angular: los componentes se mantienen enfocados en la UI mientras que los servicios contienen la lógica y el estado, y DI los conecta con un acoplamiento mínimo.

Esta separación (y la capacidad de prueba que aporta) es una de las fortalezas definitorias de Angular — tomada prestada de frameworks de backend — y `@Injectable({ providedIn: 'root' })` es el patrón cotidiano para un singleton compartible e inyectable.