Course Progress 93%

Angular Router Configuration

← Angular Router Angular Route Parameters →

Angular Router Configuration routing system का brain होती है। यहीं पर यह define किया जाता है कि कौन सा URL किस component को load करेगा, routing behavior क्या होगा और navigation कैसे control होगी। Simple routing से लेकर complex enterprise-level navigation तक सब कुछ router configuration पर depend करता है।

इस chapter में हम Router Configuration को deep में समझेंगे, ताकि आगे के chapters जैसे Route Parameters, Lazy Loading और Guards आसानी से clear हो सकें।

Routes Array क्या होता है

Angular Router configuration एक Routes array के रूप में define की जाती है।

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

const routes: Routes = [];

यह array multiple route objects से बना होता है और Angular इसी array को देखकर navigation decide करता है।

Basic Route Object Structure

एक route object के main properties:

{
  path: 'home',
  component: HomeComponent
}
  • path: URL का हिस्सा
  • component: render होने वाला component

जब URL /home होगा, HomeComponent load होगा।

Multiple Routes Configuration

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

Angular top to bottom routes check करता है, जो पहले match होगा वही apply होगा।

Default Route Configuration

Empty path default route के लिए use होती है।

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

pathMatch: 'full' जरूरी है ताकि partial matching issues न आएं।

Wildcard Route (404 Page)

Unknown routes handle करने के लिए wildcard route use होती है।

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

Important rule:

  • Wildcard route हमेशा last में होनी चाहिए

यह 404 page के equivalent होती है।

Redirect Routes

Angular Router redirect routes support करता है।

{ path: 'old-path', redirectTo: 'new-path', pathMatch: 'full' }

Redirect route में component नहीं होता।

Router Configuration with Standalone API

Modern Angular में provideRouter use होता है।

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

यह NgModule-free routing approach है।

RouterModule.forRoot vs forChild

NgModule-based apps में:

RouterModule.forRoot(routes)

Feature modules में:

RouterModule.forChild(routes)

Rule:

  • AppModule में forRoot
  • Feature modules में forChild

Nested Routes Configuration

Angular Router nested routing support करता है।

{
  path: 'admin',
  component: AdminComponent,
  children: [
    { path: 'users', component: UsersComponent },
    { path: 'settings', component: SettingsComponent }
  ]
}

URL:

  • /admin/users
  • /admin/settings

Nested routes के लिए child component में <router-outlet> mandatory है।

Route Order का Importance

Angular Router first-match-wins principle follow करता है।

Wrong order:

{ path: ':id', component: UserComponent },
{ path: 'new', component: NewUserComponent }

Correct order:

{ path: 'new', component: NewUserComponent },
{ path: ':id', component: UserComponent }

Specific routes हमेशा generic routes से पहले रखनी चाहिए।

Route Data Configuration

Routes में static data pass किया जा सकता है।

{
  path: 'dashboard',
  component: DashboardComponent,
  data: { role: 'admin' }
}

यह data guards, resolvers और components में accessible होता है।

Accessing Route Data

this.route.snapshot.data['role'];

Route data configuration static metadata provide करता है।

Route Title Configuration

Angular Router page title set करने का built-in support देता है।

{
  path: 'home',
  component: HomeComponent,
  title: 'Home Page'
}

Navigation पर browser title automatically update हो जाता है।

Router Configuration Options

Router behavior customize करने के लिए options pass किए जा सकते हैं।

RouterModule.forRoot(routes, {
  scrollPositionRestoration: 'enabled',
  anchorScrolling: 'enabled'
})

Common options:

  • scrollPositionRestoration
  • anchorScrolling
  • useHash
  • enableTracing

Scroll Position Restoration

scrollPositionRestoration: 'enabled'

Navigation के बाद page top पर scroll automatically हो जाता है।

enableTracing (Debugging)

enableTracing: true

यह routing events console में log करता है, debugging के लिए useful है।

Router Events और Configuration Relation

Router configuration events trigger करती है जैसे:

  • NavigationStart
  • NavigationEnd
  • NavigationCancel
  • NavigationError

Advanced scenarios में इन events को listen किया जाता है।

Common Router Configuration Mistakes

  • Wildcard route गलत जगह रखना
  • pathMatch miss करना
  • children routes में router-outlet भूल जाना
  • forRoot और forChild confuse करना

Proper configuration routing bugs को काफी हद तक prevent कर देती है।

Real-World Router Configuration Usage

Router configuration extensively use होती है:

  • Multi-layout applications
  • Admin panels
  • Role-based navigation
  • Feature-based module loading

Router Configuration Angular routing system की foundation है। जब configuration clear होती है, तो advanced routing features naturally easy हो जाते हैं। अगले chapter में हम Route Parameters को detail में cover करेंगे, जहाँ dynamic URLs और data-driven navigation सीखेंगे।

← Angular Router Angular Route Parameters →
  • Home