Angular Router inahusiana na njia za URL kwa vipengele, inayowezesha kusafiri katika programu ya ukurasa mmoja bila upya kamili wa ukurasa. Unabainisha safu ya usanidi wa njia ambayo inaghusiana na njia kwa vipengele.
{ } ;
: = [
{ : , : },
{ : , : },
{ : , : },
{ : , : ().( 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 inafanya navigation upande wa mteja (hakuna upya), na routerLinkActive inaongeza darasa la CSS wakati njia ya kiungo ni amilifu — inayofaa kwa kuonyesha navigation.
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 ndiyo inayobadilisha Angular kuwa SPA na mifumo mingi — navigation ya haraka upande wa mteja, kiolesura kinachosimamiwa na URL, na kurasa zenye kiungo kirefu.
Ufahamu wa usanidi wa njia, <router-outlet>, routerLink dhidi ya programmatic Router.navigate, na kusoma vigezo kupitia ActivatedRoute inakabidhi mahitaji ya kila siku ya routing ya programu yoyote ya Angular, na walinzi na kupakia vibaya inayojengwa juu ya msingi huu.