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 అనువర్తనం యొక్క రోజువారీ రూటింగ్ అవసరాలను కవర్ చేస్తుంది, రక్షకులు మరియు సోమరి లోడింగ్ ఈ పునాదిపై నిర్మిస్తుంది.
జూనియర్ నుండి సీనియర్ వరకు వివరణాత్మక సమాధానాలతో IT ఇంటర్వ్యూ ప్రశ్నల లైబ్రరీ.
విరాళం