Introduction

Angular Component Routing is a powerful feature that enables you to build single-page applications (SPAs) with multiple views, seamlessly switching between them without reloading the entire page. It plays a crucial role in creating user-friendly and dynamic web applications.

Routing Modules

In Angular, routing modules are responsible for configuring how your application routes requests to different components. Each application typically has a root routing module, and you can create additional routing modules for specific features or sections of your app.

Routing Configuration

You configure your application's routes within the routing module by using the RouterModule and defining routes using the Routes interface.

import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

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

This code defines two routes:

• / (root path): This route maps to the HomeComponent.
• /about: This route maps to the AboutComponent.

Navigating Between Components

To navigate between different routes, you can use the Router service within your components. This service provides methods like navigate() and navigateByUrl() to change the URL and display the corresponding component.

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  // ...
})
export class MyComponent {
  constructor(private router: Router) { }

  navigateToAbout() {
    this.router.navigate(['/about']);
  }
}

Route Parameters

Route parameters allow you to pass data through the URL to specific components. These parameters can be used to display dynamic content based on the URL.

const routes: Routes = [
  { path: 'user/:id', component: UserComponent }
];

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  // ...
})
export class UserComponent implements OnInit {
  userId: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.userId = params.get('id');
    });
  }
}

This code defines a route /user/:id and retrieves the id parameter from the URL using the ActivatedRoute service.

Route Guards

Route guards provide a mechanism to control access to specific routes. They are functions that execute before navigating to a route, allowing you to implement authentication, authorization, or other checks.

import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree | Promise | Observable {
    // Check if the user is authenticated
    if (this.isAuthenticated()) {
      return true;
    } else {
      // Redirect to the login page
      this.router.navigate(['/login']);
      return false;
    }
  }

  private isAuthenticated(): boolean {
    // ... implement authentication logic
  }
}

const routes: Routes = [
  { path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }
];

This code defines an AuthGuard that checks for user authentication and prevents access to the /admin route if the user is not logged in.

Lazy Loading Modules

Lazy loading is a powerful optimization technique that allows you to load modules only when they are needed. This can significantly improve initial loading times and reduce the overall bundle size of your application.

const routes: Routes = [
  { path: 'products', loadChildren: () => import('./products/products.module').then(m => m.ProductsModule) }
];

This code configures the /products route to lazily load the ProductsModule. This module will only be loaded when the user navigates to the /products route.

Summary

• Angular Component Routing allows you to create SPAs with multiple views.
• Routing modules configure how your application routes requests to different components.
• The RouterModule is used to define routes and map them to components.
• The Router service provides methods for navigating between routes.
• Route parameters allow you to pass data through the URL.
• Route guards control access to specific routes.
• Lazy loading modules improves application performance by loading modules only when needed.