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 பயன்பாட்டின் தினசரி routing தேவைகளை உள்ளடக்குகிறது, பாதுகாப்பு மற்றும் நிதானமான ஏற்றம் இந்த அடிப்படையில் கட்டமைக்கப்பட்டுள்ளது.