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 ક્લાસ ઉમેરે છે જ્યારે લિંકનું રૂટ સક્રિય હોય — nav હાઇલાઇટ કરવા માટે ઉપયોગી.
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 વર્સસ પ્રોગ્રામેટિક Router.navigate, અને ActivatedRoute દ્વારા પરિમાણો વાંચવા જાણવું કોઈ પણ Angular એપ્લિકેશનના દૈનિક નેવિગેશન જરૂરિયાતોને આવરી લે છે, ગાર્ડ્સ અને આળસુ લોડિંગ આ ভিતિ પર બનાવે છે.