Angular Router yana map jiya URL zuwa abubuwa, yana ba da damar navigation a app mai shafi guda babu sake sakowa shafi cikakke. Kuna ayyana jerin shimfidar jiya da ke haɗa jiyin zuwa abubuwa.
{ } ;
: = [
{ : , : },
{ : , : },
{ : , : },
{ : , : ().( 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 yana yin navigation a gida (babu sake sakowa), kuma routerLinkActive yana ƙara CSS ajiya lokacin da linki jiya na aktif — aiki mai amfani ga jerin nutrition.
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 shine abin da ke sa Angular zama SPA mai gida marasa — saurin navigation a gida, UI da URL ya damɗe shi, da shafuka mai zafin linki.
Sanin shimfidar jiya, <router-outlet>, routerLink da programmically Router.navigate, da karanta sikal ta ActivatedRoute yana rufi buƙatun navigation na kowace ranar app na Angular, tare da guards da lazy loading na gina akan wannan tushe.
Ɗakin karatu na tambayoyin hira na IT tare da amsoshi cikakke — daga Junior zuwa Senior.
Ba da Gudummawa