Why Use Angular Router

Angular is a powerful framework for building modern single-page applications (SPAs). One of its core features is the Angular Router, which plays a critical role in managing navigation, structuring applications, and maintaining a seamless user experience. In this post, we will explore why Angular Router is essential, how it works, and best practices for using it effectively.

Introduction to Angular Router
The Role of Routing in SPAs
Key Features of Angular Router
Setting Up Angular Router
Defining Routes in Angular
Navigating Between Routes
Route Parameters
Query Parameters and Fragments
Lazy Loading Modules
Route Guards for Security
Nested Routes and Child Routes
Route Events and Observables
Handling 404 Pages
Best Practices for Angular Routing
Conclusion

1. Introduction to Angular Router

Angular Router is a built-in service that enables navigation between different views or components in an Angular application without reloading the entire page. It allows developers to create SPAs where the URL dynamically reflects the current view, improving both user experience and SEO.

By using Angular Router, you can:

Organize your application into multiple, manageable views.
Enable dynamic navigation without page reloads.
Improve the maintainability of your Angular projects.

2. The Role of Routing in SPAs

Single-page applications (SPAs) load a single HTML page and dynamically update the content as users interact with the app. Without a routing mechanism, SPAs would struggle to manage URLs, browser history, and component rendering. Angular Router solves this problem by:

Mapping URLs to specific components.
Preserving browser history and enabling navigation with the back/forward buttons.
Allowing nested views and modular design.

3. Key Features of Angular Router

Angular Router provides several key features:

Route Mapping: Map a URL path to a specific component.
Nested Routes: Define child routes inside a parent route.
Route Guards: Control access to routes based on conditions.
Lazy Loading: Load modules only when needed to improve performance.
Query Parameters and Fragments: Pass dynamic data through URLs.
Route Events: Monitor route changes with observables.

4. Setting Up Angular Router

Before using Angular Router, you must import the RouterModule in your application. Here’s a step-by-step setup:

Create a new Angular project:

ng new angular-router-app
cd angular-router-app

Install Angular Router (already included with Angular CLI).
Import RouterModule in your app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

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

@NgModule({
  declarations: [
AppComponent,
HomeComponent,
AboutComponent  ],
  imports: [
BrowserModule,
RouterModule.forRoot(routes)  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. Defining Routes in Angular

Routes define which component should render for a given path. A route has a path and a component:

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

path: URL segment.
component: Component to render.

6. Navigating Between Routes

Angular provides several ways to navigate:

Using RouterLink

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

Using Router Service

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

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

  goToAbout() {
this.router.navigate(&#91;'/about']);  }
}

7. Route Parameters

Route parameters allow dynamic data in URLs:

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

Access route parameters in the component:

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

@Component({
  selector: 'app-user',
  template: &lt;h2&gt;User ID: {{ userId }}&lt;/h2&gt;
})
export class UserComponent implements OnInit {
  userId: string | null = '';

  constructor(private route: ActivatedRoute) {}

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

8. Query Parameters and Fragments

You can pass extra information through query parameters:

this.router.navigate(['/search'], { queryParams: { q: 'angular' }, fragment: 'results' });

Retrieve them in the component:

ngOnInit() {
  this.route.queryParams.subscribe(params => {
console.log(params&#91;'q']);  });

  this.route.fragment.subscribe(fragment => {
console.log(fragment);  });
}

9. Lazy Loading Modules

Lazy loading improves performance by loading modules only when needed:

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

10. Route Guards for Security

Route guards control access based on conditions. Example:

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 {
const loggedIn = false; // Example
if (!loggedIn) {
  this.router.navigate(&#91;'/login']);
  return false;
}
return true;  }
}

Usage:

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

11. Nested Routes and Child Routes

Child routes allow hierarchical views:

const routes: Routes = [
  {
path: 'products',
component: ProductsComponent,
children: &#91;
  { path: ':id', component: ProductDetailComponent }
]  }
];

12. Route Events and Observables

Angular Router emits events that you can subscribe to:

import { Router, NavigationStart, Event } from '@angular/router';

constructor(private router: Router) {
  this.router.events.subscribe((event: Event) => {
if (event instanceof NavigationStart) {
  console.log('Navigation started to', event.url);
}  });
}

13. Handling 404 Pages

Catch undefined routes with a wildcard:

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

14. Best Practices for Angular Routing

Use Lazy Loading for large modules.
Organize Routes logically by feature modules.
Use Route Guards to secure sensitive routes.
Prefer RouterLink over router.navigate() for templates.
Handle Wildcards for undefined paths.
Keep URLs Clean and meaningful.