Een service is een klasse voor non-UI logica — data ophalen, bedrijfsregels, gedeelde toestand, logging — die componenten kunnen hergebruiken. Dependency Injection (DI) is hoe Angular die services aan componenten verstrekt die ze nodig hebben, in plaats van dat componenten ze zelf maken.
import { Injectable } from "@angular/core";
({ providedIn: "root" }) // makes it a singleton available app-wide
export class UserService {
private users = [];
getUsers() { return this.users; }
addUser(u) { this.users.push(u); }
}
De @Injectable({ providedIn: "root" }) decorator registreert de service bij Angular's DI-systeem als een enkele gedeelde instantie (singleton) voor de hele app.
@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
}
Je declares de service eenvoudig als een constructor-parameter; Angular's DI maakt en verstrekt de instantie. Je schrijft nooit new UserService(). (Moderner Angular kan ook de inject() function gebruiken in plaats van constructor-injectie.)
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
Omdat de component haar dependencies niet zelf construeert, kun je in tests een nep-service injecteren, of de implementatie app-breed op één plaats wijzigen.
Services + DI staan centraal in Angular-architectuur: componenten blijven gericht op de UI terwijl services logica en toestand bevatten, en DI verbindt ze met minimale koppeling.
Deze scheiding (en de testbaarheid die het biedt) is een van Angular's bepaalde sterktes — overgenomen van backend-frameworks — en @Injectable({ providedIn: 'root' }) is het alledaagse patroon voor een gedeelde, injecteerbare singleton.