Angular Router URL पाथ को components के साथ मैप करता है, जो एक सिंगल-पेज ऐप में navigation को सक्षम करता है बिना पूरे पेज के रीलोड के। आप एक route configuration array को परिभाषित करते हैं जो पाथ को components से जोड़ता है।
{ } ;
: = [
{ : , : },
{ : , : },
{ : , : },
{ : , : ().( m.) },
{ : , : },
];
<!-- the router renders the matched component here -->
<router-outlet></router-outlet>
<a routerLink="/users" routerLinkActive="active">Users</a>
<a [routerLink]="['/users', user.id]">View {{ user.name }}</a> <!-- dynamic path -->
routerLink client-side navigation करता है (कोई रीलोड नहीं), और routerLinkActive एक CSS क्लास जोड़ता है जब link का route सक्रिय हो — nav highlighting के लिए उपयोगी।
import { Router } from "@angular/router";
export class LoginComponent {
constructor(private router: Router) {}
onLogin() {
this.router.navigate(["/dashboard"]); // navigate after an action
}
}
import { ActivatedRoute } from "@angular/router";
export class UserDetailComponent implements OnInit {
constructor(private route: ActivatedRoute) {}
ngOnInit() {
// read :id from the URL (params is an Observable, since it can change)
this.route.params.subscribe(p => this.userId = p["id"]);
// or snapshot for a one-time read:
const id = this.route.snapshot.paramMap.get("id");
}
}
Nested/child routes, route guards (auth), resolvers (pre-fetch data),
query params, and lazy loading of feature routes for code splitting.
Router वह है जो Angular को एक multi-view SPA में बदलता है — तेज़ client-side navigation, URL-driven UI, और deep-linkable pages।
Route config, <router-outlet>, routerLink बनाम programmatic Router.navigate, और ActivatedRoute के माध्यम से params को पढ़ना किसी भी Angular application की रोज़मर्रा की routing ज़रूरतों को cover करता है, guards और lazy loading इस foundation पर बनते हैं।