Erudiax
Angular12 min read

Angular Routing: Navigation and Route Guards

Master Angular routing - navigation, route parameters, nested routes, and route guards. Learn how to build single-page applications with proper navigation. Essential for Angular development.

Lisa Anderson
December 18, 2025
0.0k0

Angular Router enables navigation between views in your application. Understanding routing is essential for building single-page applications. Let's learn how to set it up and use it effectively.

Setting Up Routing

Configure routes in your app using RouterModule. Define paths, components, and navigation rules. Angular Router handles URL changes and displays the right component.

Route Parameters

Pass data through routes using route parameters, query parameters, or route data. Access them in components to load specific data or configure views.

Nested Routes

Build complex navigation with nested routes. Child routes inherit parent route configuration, allowing you to create hierarchical navigation structures.

Route Guards

Guards control navigation - canActivate to check permissions, canDeactivate to prevent leaving unsaved changes, resolve to preload data. They're essential for secure and user-friendly apps.

Lazy Loading

Load modules on-demand with lazy loading. This reduces initial bundle size and improves app performance. Essential for large applications.

Navigation Programmatically

Navigate from code using Router service. Perfect for redirects, form submissions, and conditional navigation.

#Angular#Routing#Route Guards#Navigation

Common Questions & Answers

Q1

How do I set up routing in Angular?

A

Import RouterModule, define routes array with path and component, use RouterModule.forRoot() in app module, add <router-outlet> in template, use routerLink for navigation. Routes map URLs to components.

typescript
RunExplain
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'users', component: UsersComponent },
  { path: 'users/:id', component: UserDetailComponent },
  { path: '**', component: NotFoundComponent }  // Wildcard route
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

// In template
<a routerLink="/users">Users</a>
<a [routerLink]="['/users', userId]">User Detail</a>
<router-outlet></router-outlet>
Q2

What are route guards and how do I use them?

A

Route guards control navigation: canActivate (allow access), canDeactivate (prevent leaving), resolve (preload data), canLoad (lazy loading). Implement guard interface, return boolean or Observable, add to route configuration.

typescript
RunExplain
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}
  
  canActivate(): boolean {
    if (this.isLoggedIn()) {
      return true;
    }
    this.router.navigate(['/login']);
    return false;
  }
  
  private isLoggedIn(): boolean {
    // Check authentication
    return true;
  }
}

// Use in routes
const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard]  // Protect route
  }
];

More on Angular

Angular Interview Questions: 50 Essential Questions for Developers

45 min0.0k

Angular 21: What's New and Latest Features

12 min0.0k

Angular Components: Building Reusable UI

11 min0.0k