Introduction to Angular Routing

When creating single-page applications with Angular, one of the most important features you need to consider is routing. Routing lets you navigate between different views or components in an application without having to reload the entire page. It enhances user experience by providing seamless transitions and fast navigation.

Key Concepts of Angular Routing

1. RouterModule: This is an Angular module that contains all the functionalities needed for routing in your application.

2. Routes: A collection of route definitions that map URL paths to components.

3. Router Outlet: A directive that acts as a placeholder for the routed components.

Setting Up Angular Routing

To get started, you need to import the RouterModule and define your application routes.

Step 1: Install Angular Router

If you haven't set up Angular for routing yet, you can include Angular Router when creating a new application using the Angular CLI:

ng new my-app --routing

Step 2: Define Routes

Here's how you can configure a basic set of routes in your app-routing.module.ts file:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { NotFoundComponent } from './not-found/not-found.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '**', component: NotFoundComponent }
];

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

In this example:

• The empty path redirects to the HomeComponent.
• The ** route is a wildcard that catches unmatched routes, displaying a 404 Not Found page.

Step 3: Add Router Outlet

To display the routed components, you need to insert <router-outlet> in your main application template (app.component.html):

<nav>
  <a routerLink="/home">Home</a>
  <a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>

Step 4: Navigate Between Routes

You can navigate programmatically using the Router service. First, inject the Router in your component:

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

@Component({
  selector: 'app-navigation',
  template: `
    <button (click)="goToAbout()">Go to About</button>
  `
})
export class NavigationComponent {
  constructor(private router: Router) {}

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

Route Parameters

Sometimes, you need to pass parameters to your routes. Let's say you are working on a blog application, and you want to fetch a specific post by ID.

Defining Route with Parameters

You can define a route that accepts parameters like this:

{ path: 'post/:id', component: PostComponent }

Accessing Route Parameters

In your PostComponent, you can access the route parameter using the ActivatedRoute service:

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

@Component({
  selector: 'app-post',
  template: `<h2>Post ID: {{ postId }}</h2>`
})
export class PostComponent implements OnInit {
  postId: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.postId = params['id'];
    });
  }
}

Lazy Loading Modules

As applications grow, it's crucial to optimize their loading performance. Lazy loading helps you load feature modules on demand instead of at startup.

Setting Up Lazy Loading

Here’s how to implement lazy loading for a module named FeatureModule:

1. Create the module with its components:

ng generate module feature --route feature --module app.module

2. This command automatically adds the necessary lazy loading configuration to your routes. It would look similar to:

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

Creating the Feature Module

Define your feature module in feature.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureComponent } from './feature.component';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', component: FeatureComponent }
];

@NgModule({
  declarations: [FeatureComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ]
})
export class FeatureModule { }

Route Guards

Route guards allow you to control access to certain routes within your application. Common use cases include authentication checks and permission validations.

Implementing a Guard

1. Generate a guard:

ng generate guard auth

2. Implement the logic inside the guard:

import { Injectable } from '@angular/core';
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 {
    const isAuthenticated = false; // replace with actual authentication check

    if (!isAuthenticated) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

3. Use the guard in your routes:

{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }

Conclusion

Understanding Angular routing and navigation is not just an add-on; it’s a foundational skill for creating dynamic, responsive, and user-friendly applications. This guide covered the essential concepts of Angular routing, from setting up routes and lazy loading to implementing route parameters and guards. With these tools at your disposal, you can build robust Angular applications that cater to the needs of your users seamlessly. Happy coding!