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.
রাউটার হল যা Angular কে একটি বহু-দৃশ্য SPA তে পরিণত করে — দ্রুত ক্লায়েন্ট-সাইড নেভিগেশন, URL-চালিত UI এবং গভীর-লিংকযোগ্য পৃষ্ঠা।
রুট কনফিগারেশন, <router-outlet>, routerLink বনাম প্রোগ্রামেটিক Router.navigate এবং ActivatedRoute এর মাধ্যমে প্যারামিটার পড়া জানা যেকোনো Angular অ্যাপ্লিকেশনের দৈনন্দিন রাউটিং প্রয়োজনীয়তা কভার করে, গার্ড এবং লেজি লোডিং এই ভিত্তির উপর তৈরি হয়।