Que sont les services et l'injection de dépendances dans Angular ?

Question

Accepted Answer

Un **service** est une classe pour la **logique non-UI** — récupération de données, règles métier, état partagé, journalisation — que les composants peuvent réutiliser. L'**injection de dépendances (DI)** est la façon dont Angular *fournit* ces services aux composants qui en ont besoin, au lieu que les composants les créent manuellement.

## Définir un service

```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); }
}
```

Le décorateur `@Injectable({ providedIn: "root" })` enregistre le service auprès du système DI d'Angular comme une seule instance partagée (singleton) pour toute l'application.

## L'injecter dans un composant

```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
}
```

Vous déclarez simplement le service comme paramètre du constructeur ; le DI d'Angular **crée et fournit** l'instance. Vous n'écrivez jamais `new UserService()`. (Angular moderne peut aussi utiliser la fonction `inject()` à la place de l'injection par constructeur.)

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

## Pourquoi DI est précieux

```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
```

Parce que le composant ne construit pas ses dépendances, vous pouvez injecter un service **factice** dans les tests, ou changer l'implémentation à l'échelle de l'application en un seul endroit.

## Pourquoi c'est important

Les services + DI sont au cœur de l'architecture Angular : les composants restent concentrés sur l'UI tandis que les services contiennent la logique et l'état, et DI les relie ensemble avec un couplage minimal.

Cette séparation (et la testabilité qu'elle apporte) est l'une des forces définissantes d'Angular — empruntée aux frameworks backend — et `@Injectable({ providedIn: 'root' })` est le modèle quotidien pour un singleton partagé et injectable.