Module Recap

Module 04 covered Angular’s router end to end: how SPAs navigate without page reloads, how to define routes and place <router-outlet>, how to navigate with RouterLink, how to read route and query parameters, and how to protect routes with guards.

What you learned

Client-side routing uses the History API. The browser does not request a new HTML file. The JavaScript router intercepts navigation, updates the URL, and renders a different component in <router-outlet>.

Routes map URL paths to components. Define them in app.routes.ts as a Routes array. :paramName creates dynamic segments. The ** wildcard catches unmatched URLs.

<router-outlet> is the rendering placeholder. It lives in app.html and Angular renders the current route’s component inside it — without touching components outside the outlet (like NavBar and Toast).

RouterLink navigates without reloads. Use [routerLink]="['/path']" instead of href. Pass route parameters as array elements: [routerLink]="['/movies', movie.id]".

routerLinkActive highlights the current page’s link. Use [routerLinkActiveOptions]="{ exact: true }" on the root route to prevent it from always being active.

ActivatedRoute exposes the current route’s parameters. snapshot.paramMap.get('name') reads route params. queryParamMap (Observable) reads query string params.

Guards protect routes. A CanActivateFn runs before a route activates. Return true to allow, false to block, or router.createUrlTree() to redirect. Guards can inject services and trigger side effects.

CinemaVault’s complete route configuration

export const routes: Routes = [
  { path: '', component: Home },
  { path: 'browse', component: Browse },
  { path: 'search', component: SearchResults },
  { path: 'movies/:id', component: MovieDetail },
  { path: 'watchlist', component: Watchlist, canActivate: [watchlistGuard] },
  { path: '**', redirectTo: '' }
];

And the guard:

export const watchlistGuard: CanActivateFn = () => {
  const watchlist = inject(WatchlistService);
  const router = inject(Router);
  const toast = inject(ToastService);

  if (watchlist.count() > 0) return true;
  toast.show('Add a movie to your watchlist first.');
  return router.createUrlTree(['/browse']);
};

The guard demonstrates that Angular’s routing system is not just about navigation — it is a place to enforce business rules, show feedback, and control the user’s journey through the app.

Key terms

Term	What it means
Routes	The array type for the route configuration
<router-outlet>	Placeholder where Angular renders the matched component
RouterLink	Directive for SPA navigation without page reload
routerLinkActive	Directive that adds a CSS class when the linked route is active
ActivatedRoute	Service that exposes the current route’s parameters and query params
snapshot	The route state at component initialization — does not update
CanActivateFn	The type for a functional route guard
router.createUrlTree()	Creates a UrlTree for redirecting from a guard
inject()	DI function for use in guards and other non-class contexts

What is next

Module 05 — Services and Dependency Injection →

Module 05 covers Angular’s dependency injection system: what services are, how @Injectable works, how to create and inject services with inject(), how root-level services are singletons that share state across components, and how CinemaVault uses services to manage movies, the watchlist, and toast notifications.