Angular Router URL ਪਾਥਾਂ ਨੂੰ ਕੰਪੋਨੈਂਟਸ ਨਾਲ ਮੈਪ ਕਰਦਾ ਹੈ, ਜੋ ਪੂਰੇ ਪੰਨੇ ਨੂੰ ਦੁਬਾਰਾ ਲੋਡ ਕੀਤੇ ਬਿਨਾਂ single-page app ਵਿੱਚ ਨੇਵੀਗੇਸ਼ਨ ਨੂੰ ਸਮਰਥ ਬਣਾਉਂਦਾ ਹੈ। ਤੁਸੀਂ ਪਾਥਾਂ ਨੂੰ ਕੰਪੋਨੈਂਟਸ ਨਾਲ ਜੋੜਨ ਵਾਲੀ ਰਾਊਟ ਕੌਨਫਿਗਰੇਸ਼ਨ ਐਰੇ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੇ ਹੋ।
{ } ;
: = [
{ : , : },
{ : , : },
{ : , : },
{ : , : ().( 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 ਨੂੰ multi-view SPA ਵਿੱਚ ਬਦਲਦਾ ਹੈ — ਤੇਜ਼ ਕਲਾਇੰਟ-ਸਾਈਡ ਨੇਵੀਗੇਸ਼ਨ, URL-ਚਾਲਿਤ UI, ਅਤੇ ਡੀਪ-ਲਿੰਕੇਬਲ ਪੰਨੇ।
Raout config, <router-outlet>, routerLink ਬਨਾਮ programmatic Router.navigate, ਅਤੇ ActivatedRoute ਦੁਆਰਾ params ਨੂੰ ਪੜ੍ਹਨਾ ਕਿਸੇ ਵੀ Angular application ਦੀਆਂ ਰੋਜ਼ਾਨਾ ਦੀਆਂ ਰਾਊਟਿੰਗ ਜरुरਤਾਂ ਨੂੰ ਪੂਰਾ ਕਰਦਾ ਹੈ, ਜਿੱਥੇ guards ਅਤੇ lazy loading ਇਸ ਬੁਨਿਆਦ ਉੱਤੇ ਬਣਦੇ ਹਨ।