Angular Routing

1. Setting Up Angular Routing

When creating a new Angular project, enable routing by running:

ng new my-angular-app --routing

This automatically creates a app-routing.module.ts file for handling routes.

If you already have an Angular project, you can manually add routing:

ng generate module app-routing --flat --module=app

2. Defining Routes

Routes are defined in app-routing.module.ts. Here’s an example of setting up basic routes:

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

const routes: Routes = [
  { path: '', component: HomeComponent }, // Default route
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
  { path: '**', redirectTo: '' } // Wildcard route for unknown paths
];

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

3. Adding Router Outlet in App Component

To display components based on the route, add <router-outlet> in app.component.html:

<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
  <a routerLink="/contact">Contact</a>
</nav>

<router-outlet></router-outlet>

4. Navigating Between Routes

Using RouterLink (Template-Based Navigation)

We can navigate between routes using routerLink:

<a routerLink="/about">Go to About</a>

Using Router Service (Programmatic Navigation)

We can navigate using the Router service inside a component:

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

@Component({
  selector: 'app-home',
  template: `<button (click)="goToContact()">Contact Us</button>`
})
export class HomeComponent {
  constructor(private router: Router) {}

  goToContact() {
    this.router.navigate(['/contact']);
  }
}

5. Route Parameters

We can pass parameters in the URL to display dynamic data.

Defining a Route with Parameters

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

Accessing Route Parameters in a Component

import { ActivatedRoute } from '@angular/router';

export class UserComponent {
  userId: string | null = '';

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.userId = this.route.snapshot.paramMap.get('id');
  }
}

Navigating with Parameters

<a routerLink="/user/123">View User 123</a>

. Lazy Loading Modules

To improve performance, we can lazy load modules when needed.

Setting Up Lazy Loading

Modify app-routing.module.ts:

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

This loads dashboard.module.ts only when the user visits the dashboard route, reducing the initial app load time.

7. Route Guards (Protecting Routes)

Angular Route Guards restrict access to certain routes based on conditions like authentication.

Creating an Auth Guard

ng generate guard auth

Applying Route Guards

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

Conclusion

✔ Angular Routing helps in building single-page applications (SPAs) by managing navigation without reloading pages.
✔ We define routes in app-routing.module.ts and use <router-outlet> to display components dynamically.
✔ Navigation can be done using routerLink (template-based) or Router (programmatic).
✔ Advanced features include route parameters, lazy loading, and route guards for security.

Mastering Angular Routing ensures a smooth user experience and efficient navigation in modern web applications. 🚀

ANGULAR