Vad är tjänster och beroendeinjektion i Angular?

Question

Accepted Answer

En **tjänst** är en klass för **logik utan gränssnitt** — datahämtning, affärsregler, delad tillstånd, loggning — som komponenter kan återanvända. **Beroendeinjektion (DI)** är hur Angular *tillhandahåller* dessa tjänster till komponenter som behöver dem, istället för att komponenter skapar dem manuellt.

## Definiera en tjänst

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

Dekoratören `@Injectable({ providedIn: "root" })` registrerar tjänsten med Angular DI-system som en enda delad instans (singleton) för hela appen.

## Injicera den 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 deklarerar bara tjänsten som en konstruktorparameter; Angular DI **skapar och tillhandahåller** instansen. Du skriver aldrig `new UserService()`. (Modern Angular kan också använda funktionen `inject()` istället för konstruktorinjektion.)

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

## Varför DI är värdefullt

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

Eftersom komponenten inte konstruerar sina beroenden kan du injicera en **falsk** tjänst i tester, eller ändra implementeringen app-omfattande på ett ställe.

## Varför det är viktigt

Tjänster + DI är centrala för Angular-arkitektur: komponenter förblir fokuserade på gränssnittet medan tjänster innehåller logik och tillstånd, och DI kopplar ihop dem med minimal koppling.

Denna separation (och testbarheten den ger) är en av Angular:s definiande styrkor — lånad från backend-ramverk — och `@Injectable({ providedIn: 'root' })` är det dagliga mönstret för en delad, injicerbar singleton.