Angular Router URL paths کو components سے منسلک کرتا ہے، جو single-page app میں navigation کو فعال کرتا ہے مکمل صفحہ ریلوڈ کے بغیر۔ آپ ایک route configuration array کی تعریف کرتے ہیں جو paths کو 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 انجام دیتا ہے (کوئی reload نہیں)، اور routerLinkActive ایک CSS class شامل کرتا ہے جب 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 صفحات۔
Route config، <router-outlet>، routerLink بمقابلہ programmatic Router.navigate، اور ActivatedRoute کے ذریعے params پڑھنا سے واقفیت کسی بھی Angular application کی روزمرہ کی routing ضروریات کو پورا کرتی ہے، guards اور lazy loading اس بنیاد پر مزید خصوصیات فراہم کرتے ہیں۔