Course Progress 91%

Angular Router

← Signals Performance Model Angular Router Configuration →

Angular Router Angular application में navigation और page-like behavior handle करने का core mechanism है। Single Page Application (SPA) में browser reload किए बिना different views दिखाने के लिए Angular Router use किया जाता है। यह URL को application state से map करता है और component-based navigation provide करता है।

इस chapter में हम Angular Router को beginner level से detail में समझेंगे, ताकि आगे आने वाले advanced routing concepts clear foundation पर build हों।

Angular Router क्या है

Angular Router एक official Angular library है जो:

  • URL और Component के बीच mapping करता है
  • SPA navigation manage करता है
  • Browser history को control करता है
  • Deep linking support करता है

Router user के URL change करने पर corresponding component render करता है।

Single Page Application में Routing

Traditional websites में:

  • Har page load पर server request
  • Full page refresh

Angular SPA में:

  • Initial page load ek baar
  • Subsequent navigation client-side
  • Fast user experience

Router इसी client-side navigation को possible बनाता है।

Angular Router कैसे काम करता है

Angular Router internally:

  • Browser URL observe करता है
  • Matching route खोजता है
  • Associated component load करता है
  • <router-outlet> में render करता है

यह process seamless और reload-free होता है।

Router Setup Basics

Angular Router use करने के लिए RouterModule import करना होता है।

Standalone application में:

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

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter([])
  ]
});

NgModule-based app में:

RouterModule.forRoot([])

Routes empty array से start होते हैं।

Router Outlet

<router-outlet> वह placeholder है जहाँ routed component render होता है।

<router-outlet></router-outlet>

Without router-outlet, routing काम नहीं करेगी।

एक application में multiple outlets भी हो सकते हैं।

First Route Example

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

जब URL /home होगा:

  • HomeComponent load होगा

जब /about होगा:

  • AboutComponent load होगा

Default Route

Default route तब load होती है जब path empty हो।

{ path: '', component: HomeComponent }

Application open होते ही HomeComponent दिखेगा।

Navigation Methods

Angular Router navigation के लिए multiple methods provide करता है।

Template Navigation

<a routerLink="/home">Home</a>

यह anchor tag की तरह behave करता है लेकिन page reload नहीं होता।

Programmatic Navigation

constructor(private router: Router) {}

goHome() {
  this.router.navigate(['/home']);
}

यह button clicks या logic-based navigation के लिए useful है।

RouterLink vs Href

href:

  • Page reload करता है
  • SPA experience break करता है

routerLink:

  • Angular Router use करता है
  • Fast navigation
  • State preserve रहता है

Angular app में हमेशा routerLink prefer करना चाहिए।

Active Route Styling

Active route को highlight करने के लिए:

<a routerLink="/home" routerLinkActive="active">Home</a>

active class automatically apply होती है।

Route Matching Strategy

Angular Router path matching करता है:

  • Left to right
  • First matching route wins

Exact matching के लिए:

{ path: '', component: HomeComponent, pathMatch: 'full' }

pathMatch: 'full' default route में important है।

Router Configuration Lifecycle

Routing lifecycle steps:

  • Navigation start
  • Route recognition
  • Guards check
  • Component activation
  • Navigation end

यह lifecycle advanced routing features की base है।

Router और Browser History

Angular Router:

  • Browser back/forward buttons support करता है
  • History API use करता है
  • URL sync maintain करता है

User manually URL change करे तब भी correct component load होता है।

Base Href का Role

Angular routing सही काम करे इसके लिए <base href="/"> जरूरी है।

<base href="/">

यह index.html में define होता है।

Hash Location Strategy

Default Angular Router:

  • HTML5 pushState use करता है

Optional hash-based routing:

RouterModule.forRoot(routes, { useHash: true })

URL example:

  • example.com/#/home

Hash strategy legacy servers पर useful होती है।

Router और SEO Perspective

Client-side routing SEO के लिए:

  • SSR या prerendering require करता है
  • Otherwise crawlers content miss कर सकते हैं

Angular Universal routing को SEO-friendly बनाता है।

Common Routing Mistakes

  • router-outlet भूल जाना
  • href का misuse
  • pathMatch गलत use करना
  • Routes order गलत रखना

Strong routing foundation future bugs avoid करता है।

When Angular Router Becomes Critical

Angular Router heavily use होता है:

  • Multi-page-like applications
  • Admin dashboards
  • Role-based access systems
  • Large-scale enterprise apps

Angular Router Angular application की navigation backbone है। अगले chapters में हम Router Configuration, Route Parameters, Lazy Loading और Guards को progressively deep में cover करेंगे, जिससे routing production-grade level तक पहुंचे।

← Signals Performance Model Angular Router Configuration →
  • Home