Angular Router URL पथांना घटकांशी जोडते, सिंगल-पेज अॅप्लिकेशनमध्ये नेव्हिगेशन सक्षम करते पूर्ण पृष्ठ रिलोडशिवाय. तुम्ही एक रूट कॉन्फिगरेशन अॅरे परिभाषित करता जो पथांना घटकांशी जोडते.
{ } ;
: = [
{ : , : },
{ : , : },
{ : , : },
{ : , : ().( 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 क्लायंट-साइड नेव्हिगेशन (रिलोडशिवाय) कार्यान्वित करते, आणि routerLinkActive जेव्हा लिंकचा मार्ग सक्रिय असतो तेव्हा CSS क्लास जोडते — नॅव्हिगेशन हाइलाइटिंगसाठी सुविधाजनक.
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 ला मल्टी-व्यू SPA मध्ये रूपांतरित करते — वेगवान क्लायंट-साइड नेव्हिगेशन, URL-चालित UI, आणि गहन-लिंकयोग्य पृष्ठे.
रूट कॉन्फिगरेशन, <router-outlet>, routerLink vs प्रोग्रामेटिक Router.navigate, आणि ActivatedRoute द्वारे पॅरामीटर वाचन यांचे ज्ञान कोणत्याही Angular अॅप्लिकेशनच्या दैनंदिन राउटिंग आवश्यकता पूर्ण करते, या पायावर गार्ड्स आणि लेजी लोडिंग बांधली जाते.