How to Set Up Angular Routing: A Step-by-Step Guide

In the last lesson, we explored Reactive Forms in Angular, which allowed us to build dynamic and responsive forms for user input. Now, we’re diving into Module 5: Routing and Navigation, where we’ll learn how to set up Angular routing. This is a key skill for building modern web apps that let users move between pages without reloading the entire app.

In this lesson, we’ll focus on Setting Up Angular Routing, which includes using RouterModule, handling route parameters, and implementing lazy loading. These features make your app faster and more user-friendly. Let’s get started!

Why Angular Routing Matters

When I first started building web apps with Angular, I faced a common problem: how to let users navigate between pages without reloading the app. For example, I built an e-commerce app where users needed to move from the product list to the product details page. Without routing, this would have required full page reloads, which slow down the app and hurt the user experience.

Angular routing solved this problem. By using RouterModule, I could define routes that load specific components when users click links or type URLs. This made the app feel faster and more seamless. If you’re building a web app with multiple views, routing is a must-have feature.

Setting Up RouterModule

The first step in setting up Angular routing is to import and configure RouterModule. Here’s how I did it:

1. Open your Angular project and navigate to the app.module.ts file.

2. Import RouterModule and Routes from @angular/router.

3. Define your routes using the Routes array.

Here’s an example:

import { RouterModule, Routes } from '@angular/router';  
import { HomeComponent } from './home/home.component';  
import { ProductListComponent } from './product-list/product-list.component';  
import { ProductDetailsComponent } from './product-details/product-details.component';  

const routes: Routes = [  
  { path: '', component: HomeComponent },  
  { path: 'products', component: ProductListComponent },  
  { path: 'products/:id', component: ProductDetailsComponent }  
];  

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

In this example, I defined three routes:

• The root path (”) loads the HomeComponent.

• The /products path loads the ProductListComponent.

• The /products/:id path loads the ProductDetailsComponent, where :id is a route parameter.

Handling Route Parameters

Route parameters let you pass data through URLs. For example, in the e-commerce app, I needed to show details for a specific product based on its ID. Here’s how I handled it:

1. Define a route with a parameter, like /products/:id.

2. Use ActivatedRoute in the component to get the parameter value.

Here’s the code for ProductDetailsComponent:

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

@Component({  
  selector: 'app-product-details',  
  template: `<h2>Product Details for ID: {{ productId }}</h2>`  
})  
export class ProductDetailsComponent implements OnInit {  
  productId: string;  

  constructor(private route: ActivatedRoute) { }  

  ngOnInit(): void {  
    this.productId = this.route.snapshot.paramMap.get('id');  
  }  
}  

In this example, the id parameter is extracted from the URL and displayed in the template.

Implementing Lazy Loading

Lazy loading is a technique that loads feature modules only when they’re needed. This reduces the initial load time of your app. Here’s how I implemented it:

1. Create a feature module, like ProductModule.

2. Define routes for the feature module in its own routing file.

3. Use loadChildren in the main routing file to lazy load the module.

Here’s an example:

// app-routing.module.ts  
const routes: Routes = [  
  { path: '', component: HomeComponent },  
  { path: 'products', loadChildren: () => import('./product/product.module').then(m => m.ProductModule) }  
];  

In this example, the ProductModule is loaded only when the user navigates to the /products path.

Conclusion

In this tutorial, we covered the basics of setting up Angular routing. We learned how to use RouterModule, handle route parameters, and implement lazy loading. These features are essential for building fast and user-friendly web apps.

If you’re ready to take your Angular skills to the next level, check out the next lesson on Protecting Routes with Guards. It’s a must-know topic for securing your app and controlling access to specific routes.