En service er en klasse for ikke-UI-logikk — datahenting, forretningsregler, delt tilstand, logging — som komponenter kan gjenbruke. Dependency Injection (DI) er hvordan Angular leverer disse tjenestene til komponentene som trenger dem, i stedet for at komponenter oppretter dem manuelt.
{ } ;
({ : })
{
users = [];
() { .; }
() { ..(u); }
}
Dekoratøren @Injectable({ providedIn: "root" }) registrerer tjenesten hos Angular's DI-system som en enkelt delt instans (singleton) for hele appen.
@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 ganske enkelt tjenesten som en constructor-parameter; Angular's DI opprettet og leverer instansen. Du skriver aldri new UserService(). (Moderne Angular kan også bruke inject() funksjonen i stedet for constructor-injeksjon.)
import { inject } from "@angular/core";
export class UserListComponent {
private userService = inject(UserService); // alternative injection style
}
✓ 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 avhengighetene sine, kan du injisere en falsk tjeneste i tester, eller endre implementeringen app-bredt på ett sted.
Services + DI er sentrale i Angular-arkitektur: komponenter forblir fokusert på brukergrensesnittet mens tjenester holder logikk og tilstand, og DI kobler dem sammen med minimal kobling.
Denne separasjonen (og testbarheten den bringer) er en av Angular's avgjørende styrker — lånt fra backend-rammeverk — og @Injectable({ providedIn: 'root' }) er det daglige mønsteret for en delt, injiserbar singleton.