Hvad er tjenester og dependency injection i Angular?

Question

Accepted Answer

En **tjeneste** er en class for **non-UI logik** — datahentning, forretningsregler, delt tilstand, logging — som komponenter kan genbruge. **Dependency Injection (DI)** er hvordan Angular *leverer* disse tjenester til de komponenter, der har brug for dem, i stedet for at komponenter opretter dem manuelt.

## Definition af en tjeneste

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

Decoratoret `@Injectable({ providedIn: "root" })` registrerer tjenesten i Angulars DI-system som en enkelt delt instans (singleton) for hele appen.

## Injicering i en komponent

```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 erklærer simpelthen tjenesten som en constructor-parameter; Angulars DI **opretter og leverer** instansen. Du skriver aldrig `new UserService()`. (Moderne Angular kan også bruge funktionen `inject()` i stedet for constructor injection.)

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

## Hvorfor DI er værdifuldt

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

Fordi komponenten ikke konstruerer sine afhængigheder, kan du injicere en **falsk** tjeneste i tests, eller ændre implementeringen app-bredt på ét sted.

## Hvorfor det betyder noget

Tjenester + DI er centrale for Angulars arkitektur: komponenter forbliver fokuseret på UI, mens tjenester indeholder logik og tilstand, og DI forbinder dem med minimal koblingseffekt.

Dette opdelte (og den testbarhed, det medfører) er en af Angulars definerende styrker — lånt fra backend-frameworks — og `@Injectable({ providedIn: 'root' })` er det daglige mønster for en delt, injicerbar singleton.