Module Recap

Module 05 covered Angular’s service and dependency injection system: what services are, how @Injectable works, how to create and inject services, how root-level singletons share state, and how inject() is the modern DI pattern.

What you learned

Services hold shared logic and state. They have no template. Components inject them and call their methods. Logic that needs to be reused or shared belongs in a service, not a component.

@Injectable({ providedIn: 'root' }) creates a singleton. Angular creates exactly one instance and provides it to every component or service that injects it. State stored in that instance is shared.

Constructor injection and inject() both work. Constructor injection is traditional. inject() as a class field is the modern alternative and works in functional contexts like guards where there is no constructor.

Signals are Angular’s reactive state primitive. signal<T>() holds a value that notifies readers when it changes. computed() derives values. asReadonly() prevents external writes. update() applies transformations immutably.

inject() has an injection context requirement. Call it as a class field, in the constructor body, or in factory functions. Never in lifecycle hooks or async callbacks.

CinemaVault’s three services working together

MovieService        → fetches data from TMDb API via HttpClient
WatchlistService    → holds a signal<Movie[]>, persists to localStorage
ToastService        → holds a signal<Toast|null>, shows notifications

NavBar     → injects WatchlistService (reads count)
MovieCard  → injects WatchlistService (reads has(), calls toggle())
Home       → injects MovieService (calls getTrending(), getPopular())
Browse     → injects MovieService (calls discover(), getGenres())
MovieDetail → injects MovieService (calls getDetail())
Watchlist  → injects WatchlistService (reads items)
watchlistGuard → injects WatchlistService + Router + ToastService
Toast       → injects ToastService (reads toast signal)

Every service is a singleton. When MovieCard calls watchlistService.toggle(), the signal updates, and every component that reads from it re-renders — NavBar’s badge, all MovieCard indicators, the Watchlist page. No coordination code needed.

Key terms

Term	What it means
Service	A TypeScript class that holds shared logic or state with no template
@Injectable	Decorator that makes a class injectable via Angular’s DI system
providedIn: 'root'	Registers the service as a root-level singleton
Singleton	A single instance shared by all consumers
inject()	Function that retrieves a service from the DI system
signal<T>()	Reactive state container — notifies readers when the value changes
computed()	Derives a value from one or more signals; updates automatically
asReadonly()	Returns a read-only view of a signal
update()	Applies a transformation function to a signal’s current value

What is next

Module 06 — Reactive Forms and HTTP →

Module 06 covers Angular’s reactive forms system — FormGroup, FormControl, FormBuilder, validators, and error display — and HttpClient for making typed HTTP requests. You will also learn the key RxJS operators (map, catchError, switchMap) and the debounce pattern that powers CinemaVault’s Browse filter form.