Introduction to Angular Routing

Single Page Applications (SPAs) are modern web applications that load a single HTML page and dynamically update the content as the user interacts with the app. Unlike traditional multi-page applications, SPAs do not reload the entire page for each user action. Angular, one of the most popular frameworks for building SPAs, provides a robust mechanism called the Angular Router that allows developers to implement seamless navigation between different views within an application.

In this post, we will explore Angular Routing in detail. We will cover how to set up the router, define routes, navigate between pages, use route parameters, query parameters, and implement best practices for routing in Angular applications.

What is Angular Router?

The Angular Router is a core module that enables developers to manage navigation from one view to another in an Angular application. It allows you to map URL paths to components, handle dynamic parameters, and create a consistent user experience without full page reloads.

Routing is a critical part of any SPA because it gives users the impression that they are navigating between different pages, even though the application is actually updating the content dynamically on the same HTML page.

---

Key Benefits of Angular Routing

Angular Router provides several benefits:

1. SPA Navigation: Users can navigate through the application without refreshing the entire page, making the app feel faster and more responsive.
2. URL Management: The router maps URLs to components, allowing users to bookmark pages or share links.
3. Dynamic Parameters: Angular allows passing parameters through URLs, which can be accessed by components to display dynamic content.
4. Query Parameters: Additional information can be passed via query parameters to modify component behavior without changing the route.
5. Lazy Loading: Routes can be loaded on demand, improving application performance.
6. Route Guards: Angular provides route guards for authentication, authorization, and other checks before allowing navigation.

---

Setting Up Angular Router

Before you can use the Angular Router, you need to set it up in your application. Here’s a step-by-step guide:

Step 1: Install Angular CLI

If you haven’t already installed Angular CLI, you can do so using npm:

npm install -g @angular/cli

Step 2: Create a New Angular Application

Create a new Angular application using the CLI:

ng new angular-routing-demo
cd angular-routing-demo

Step 3: Import RouterModule

In the AppModule (app.module.ts), you need to import RouterModule and configure your routes.

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 { }

In the above example:

• RouterModule.forRoot(routes) sets up the router at the application’s root level.
• Each route in the routes array maps a URL path to a specific component.

---

Creating Components for Routes

For routing to work, you need components to display when a user navigates to a specific path.

Home Component

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

@Component({
  selector: 'app-home',
  template: <h1>Welcome to the Home Page</h1>
})
export class HomeComponent { }

About Component

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

@Component({
  selector: 'app-about',
  template: <h1>About Us</h1>
})
export class AboutComponent { }

These components will render content when the user navigates to their respective routes.

---

Adding Router Outlet

The router-outlet directive acts as a placeholder in your template where routed components will be displayed. Add it to app.component.html:

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

<router-outlet></router-outlet>

Now, when a user clicks the navigation links, the corresponding component will be displayed inside the router-outlet.

---

Navigating Between Pages

Angular provides two ways to navigate between routes:

1. Using routerLink in Templates

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

routerLink is the preferred method for navigation in templates.

2. Programmatic Navigation Using Router Service

You can navigate programmatically using the Router service:

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

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

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

This is useful when navigation depends on logic, such as after submitting a form or performing a check.

---

Route Parameters

Sometimes, you need dynamic data in the URL. For example, displaying a user profile by ID. Angular allows this through route parameters.

Defining a Route Parameter

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

Accessing Route Parameters in Component

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

@Component({
  selector: 'app-user',
  template: <h1>User ID: {{ userId }}</h1>
})
export class UserComponent implements OnInit {
  userId!: string;

  constructor(private route: ActivatedRoute) {}

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

Navigating to /user/123 will display User ID: 123.

---

Query Parameters

Query parameters allow sending additional information without changing the route.

Adding Query Parameters

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

The resulting URL will be /search?q=angular.

Reading Query Parameters

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

@Component({
  selector: 'app-search',
  template: <h1>Search Query: {{ query }}</h1>
})
export class SearchComponent implements OnInit {
  query!: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
this.route.queryParamMap.subscribe(params => {
  this.query = params.get('q')!;
});
  }
}

---

Wildcard Routes and 404 Pages

To handle unknown routes, Angular provides wildcard routes. It’s a best practice to show a 404 page when the user navigates to a non-existing URL.

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

---

Lazy Loading Routes

For large applications, loading all modules at once can slow down your app. Angular supports lazy loading to load modules only when needed.

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

---

Route Guards

Route guards help protect routes based on certain conditions, such as authentication.

Example: AuthGuard

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 isLoggedIn = false; // Replace with real logic
if (!isLoggedIn) {
  this.router.navigate(['/login']);
  return false;
}
return true;
  }
}

Apply it to a route:

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

---

Best Practices for Angular Routing

1. Always define a default route: Use path: '' to redirect users to a home or landing page.
2. Handle unknown routes: Use a wildcard route (path: '**') for 404 pages.
3. Use lazy loading: For large modules, lazy load to improve performance.
4. Keep route paths readable: Use descriptive names for URLs.
5. Use route guards wisely: Protect sensitive routes with authentication and authorization.
6. Avoid deeply nested routes: Deep nesting can make navigation confusing.
7. Consistently handle query and route parameters: For dynamic content, maintain a standard approach.