Was sind Services und Dependency Injection in Angular?

Question

Accepted Answer

Ein **Service** ist eine Klasse für **Non-UI-Logik** — Datenabruf, Geschäftsregeln, gemeinsamer Status, Logging — die Komponenten wiederverwenden können. **Dependency Injection (DI)** ist die Art und Weise, wie Angular diese Services den Komponenten *bereitstellt*, die sie benötigen, anstatt dass Komponenten sie manuell erstellen.

## Einen Service definieren

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

Der Decorator `@Injectable({ providedIn: "root" })` registriert den Service im DI-System von Angular als eine einzige gemeinsame Instanz (Singleton) für die gesamte App.

## Injizieren in eine Komponente

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

Du deklarierst den Service einfach als Constructor-Parameter; Angulars DI **erstellt und stellt** die Instanz zur Verfügung. Du schreibst niemals `new UserService()`. (Modernes Angular kann auch die `inject()`-Funktion anstelle von Constructor-Injection verwenden.)

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

## Warum DI wertvoll ist

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

Weil die Komponente ihre Abhängigkeiten nicht konstruiert, kannst du einen **gefälschten** Service in Tests injizieren oder die Implementierung app-weit an einer Stelle ändern.

## Warum es wichtig ist

Services + DI sind zentral für die Angular-Architektur: Komponenten bleiben auf die UI konzentriert, während Services Logik und Status enthalten, und DI verbindet sie mit minimaler Kopplung.

Diese Trennung (und die Testbarkeit, die sie mit sich bringt) ist eine der definierenden Stärken von Angular — von Backend-Frameworks übernommen — und `@Injectable({ providedIn: 'root' })` ist das alltägliche Muster für einen gemeinsamen, injizierbaren Singleton.