A service is a class for non-UI logic — data fetching, business rules, shared state, logging — that components can reuse. Dependency Injection (DI) is how Angular provides those services to the components that need them, instead of components creating them manually.
{ } ;
({ : })
{
users = [];
() { .; }
() { ..(u); }
}
The @Injectable({ providedIn: "root" }) decorator registers the service with Angular's DI system as a single shared instance (singleton) for the whole 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
}
You simply declare the service as a constructor parameter; Angular's DI creates and supplies the instance. You never write new UserService(). (Modern Angular can also use the inject() function instead of constructor injection.)
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
Because the component doesn't construct its dependencies, you can inject a fake service in tests, or change the implementation app-wide in one place.
Services + DI are central to Angular architecture: components stay focused on the UI while services hold logic and state, and DI wires them together with minimal coupling.
This separation (and the testability it brings) is one of Angular's defining strengths — borrowed from backend frameworks — and @Injectable({ providedIn: 'root' }) is the everyday pattern for a shared, injectable singleton.
A library of IT interview questions with detailed answers — from Junior to Senior.
Donate