Routing in Angular – A Beginner’s Guide

In Angular applications, routing allows you to navigate between different views or pages without reloading the entire application. Angular provides a built-in Router module that maps URL paths to components—just like pages in a traditional website.

1. What Is Routing in Angular?

Angular routing enables:

Navigation between different components

A single-page application (SPA) experience

Browser-like URL navigation (Back, Forward)

Deep-linking (shareable URLs)

Lazy loading of modules

Instead of loading separate HTML pages, Angular dynamically loads components based on the current URL.

2. Basic Routing Setup

Step 1: Enable Routing When Creating a New App

When creating a project:

ng new my-app

✔ Would you like to add Angular routing? Yes

Angular automatically creates:

app-routing.module.ts

3. Example: Simple Routes

Let’s assume you have two components:

ng generate component home

ng generate component about

Add Routes in app-routing.module.ts:

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

import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';

import { AboutComponent } from './about/about.component';

const routes: Routes = [

{ path: '', component: HomeComponent },

{ path: 'about', component: AboutComponent }

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

What this means

Path Component

/ HomeComponent

/about AboutComponent

4. Add the Router Outlet

Angular needs a place to render the selected component.

Add this to app.component.html:

<router-outlet></router-outlet>

This is where routed components will appear.

5. Creating Navigation Links

Add links using the routerLink directive:

<nav>

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

</nav>

6. Wildcard / 404 Page

Create a 404 component:

ng generate component not-found

Add this route last:

{ path: '**', component: NotFoundComponent }

This catches all unknown URLs.

7. Route Parameters (Dynamic Routing)

Example: /product/10

Routes

{ path: 'product/:id', component: ProductComponent }

Read the parameter in the component

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {

const id = this.route.snapshot.paramMap.get('id');

console.log(id);

}

8. Lazy Loading (Advanced but Useful)

Lazy loading improves performance by loading modules only when needed.

Folder structure:

/admin

admin.module.ts

admin-routing.module.ts

App routing with lazy loading:

{

path: 'admin',

loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)

}

Angular loads the admin module only when the user visits /admin.

9. Route Guards (For Authentication)

Protect routes using guards.

Create a guard:

ng generate guard auth

Add to routes:

{

path: 'dashboard',

component: DashboardComponent,

canActivate: [AuthGuard]

}

10. Summary of Angular Routing Concepts

Concept Description

RouterModule Enables routing

Routes URL → component mappings

routerLink Navigation links

router-outlet Where pages load

Wildcard route 404 pages

Params Dynamic URLs

Lazy loading Load modules on demand

Guards Secure routes

Conclusion

Angular routing transforms your application into a single-page application (SPA), enabling smooth, fast navigation without full page reloads. By mastering routing, you control how users move through your app, how components are loaded, and how pages are secured.

Learn Full Stack JAVA Course in Hyderabad

Read More

Building a Simple Todo App in React

State Management in React: useState and useEffect

React vs Angular: Which One to Learn?

Angular Basics for Full Stack Java Developers

Visit Our Quality Thought Institute in Hyderabad

Get Directions

November 15, 2025