Chapter 6.1☕ 15 min read

Basic Routing Setup

Navigate between different pages without a full page reload. Angular Router handles it all.

01What is Routing

Routing lets you show different pages/components without reloading the browser. The URL changes, the component changes, but the browser never refreshes.

"Routing = TSRTC bus system — URL bus number, component destination."

Single Page Application (SPA) means one HTML file that can show multiple "views" — the router swaps components in and out as the user navigates.

Without routing: clicking a link reloads the entire page, loses all state, shows a flash of white.

With routing: clicking a link changes the URL, swaps the component smoothly, keeps the header/footer, preserves state.

02Setting Up Routes

Routes are defined in an array and provided to the app via provideRouter().

// app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { MenuComponent } from './menu/menu.component';
import { AboutComponent } from './about/about.component';

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

// app.config.ts
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    // other providers...
  ]
};

"Routes array = bus route chart — kahan se kahan jana hai."

Each route has a path (URL segment) and a component (what to show when that URL matches).

03RouterOutlet — Where Pages Appear

<router-outlet> is the placeholder where Angular inserts the matched component.

// app.component.html
<header>
  <h1>BiryaniHub</h1>
  <nav>
    <a routerLink="/menu">Menu</a>
    <a routerLink="/about">About</a>
  </nav>
</header>

<!-- Router outlet — component swaps here -->
<router-outlet />

<footer>
  <p>© 2025 BiryaniHub</p>
</footer>

"RouterOutlet = bus stand — jo bhi bus aaye, yahan khada hoga."

Everything around <router-outlet> (header, footer, sidebar) stays constant. Only the content inside the outlet changes when the route changes.

04RouterLink — Navigate Without Reload

routerLink is the Angular way to navigate — it changes the URL without reloading the page.

<!-- Declarative navigation -->
<a routerLink="/menu">Menu</a>

<!-- With params (array syntax) -->
<a [routerLink]="['/menu', biryaniId]">Details</a>

<!-- Active link highlighting -->
<a routerLink="/menu" routerLinkActive="active"
   [routerLinkActiveOptions]="{ exact: true }">Menu</a>

"routerLink = bus ticket — URL change karo bina page reload kiye."

NEVER use href="/menu" for internal navigation — that reloads the whole page and defeats the SPA purpose. Always use routerLink.

routerLinkActive adds a CSS class when the current URL matches the link — perfect for highlighting the active nav item.

05Programmatic Navigation

Sometimes you need to navigate from code (after form submit, after login, etc.). Use the Router service.

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

@Component({...})
export class LoginComponent {
  private router = inject(Router);

  login() {
    // After successful login
    this.router.navigate(['/dashboard']);
  }

  goBack() {
    this.router.navigateByUrl('/menu');
  }

  search(sortBy: string) {
    this.router.navigate(['/menu'], {
      queryParams: { sort: sortBy }
    });
  }
}

"Programmatic = driver bolke bhejna — code se route change karo."

navigate() takes an array of path segments (like ['/menu', '42'] for /menu/42). navigateByUrl() takes a full URL string.

Key Takeaways

✅ Routing swaps components based on URL without page reload (SPA)
✅ Routes are defined in an array and provided with provideRouter(routes)
✅ <router-outlet> is the placeholder where matched components render
✅ routerLink navigates without reload; routerLinkActive highlights active link
✅ Use inject(Router).navigate([...]) for programmatic navigation from code

Previous5.5 — Environment Config 📋 All Chapters Next Chapter6.2 — Route Parameters →