Un servizio è una classe per logica non-UI — recupero dati, regole di business, stato condiviso, logging — che i componenti possono riutilizzare. L'iniezione delle dipendenze (DI) è come Angular fornisce questi servizi ai componenti che ne hanno bisogno, invece che i componenti li creino manualmente.
{ } ;
({ : })
{
users = [];
() { .; }
() { ..(u); }
}
Il decorator @Injectable({ providedIn: "root" }) registra il servizio con il sistema DI di Angular come un'istanza condivisa singola (singleton) per l'intera 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
}
Semplicemente dichiara il servizio come parametro del costruttore; il DI di Angular crea e fornisce l'istanza. Non scrivi mai new UserService(). (Angular moderno può anche usare la funzione inject() invece dell'iniezione del costruttore.)
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
Poiché il componente non costruisce le sue dipendenze, puoi iniettare un servizio finto nei test, o cambiare l'implementazione in tutta l'app in un solo posto.
Servizi + DI sono centrali nell'architettura di Angular: i componenti rimangono focalizzati sull'UI mentre i servizi contengono logica e stato, e il DI li connette insieme con accoppiamento minimo.
Questa separazione (e la testabilità che porta) è uno dei punti di forza distintivi di Angular — preso in prestito da framework backend — e @Injectable({ providedIn: 'root' }) è il pattern quotidiano per un singleton condiviso e iniettabile.