Si funksionon rutimi në Angular?

Question

Accepted Answer

**Angular Router** harton shtegjet e URL-it në komponentë, duke mundësuar navigim në një aplikacion me një faqe të vetme **pa rifreskim të plotë të faqes**. Ju përcaktoni një grup konfigurimi rute që lidh shtegjet me komponente. ## Përcaktimi i rutave ```ts import { Routes } from "@angular/router"; export const routes: Routes = [ { path: "", component: HomeComponent }, { path: "users", component: UserListComponent }, { path: "users/:id", component: UserDetailComponent }, // route parameter { path: "admin", loadComponent: () => import("./admin.component").then(m => m.AdminComponent) }, // lazy { path: "**", component: NotFoundComponent }, // wildcard (404) ]; ``` ## Ku renderohet komponenta e rutuar ```html ``` ## Navigimi me lidhje ```html Users View {{ user.name }} ``` `routerLink` kryen navigim anësor të klientit (pa rifresh), dhe `routerLinkActive` shton një klasë CSS kur ruta e lidhjes është aktive — i dobishëm për theksimin e navigimit. ## Navigimi programor ```ts import { Router } from "@angular/router"; export class LoginComponent { constructor(private router: Router) {} onLogin() { this.router.navigate(["/dashboard"]); // navigate after an action } } ``` ## Leximi i parametrave të rrugës ```ts 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"); } } ``` ## Karakteristika të tjera ```text Nested/child routes, route guards (auth), resolvers (pre-fetch data), query params, and lazy loading of feature routes for code splitting. ``` ## Pse është e rëndësishme Router-i është ajo që e bën Angular-in një SPA me shumë këndvështrime — navigim i shpejtë anësor të klientit, ndërfaqe e drejtuar nga URL-ja, dhe faqe me lidhje të thella. Kuptimi i konfigurimit të rrugës, ``, `routerLink` kundrejt `Router.navigate` programor, dhe leximi i parametrave përmes `ActivatedRoute` mbulon nevojat e përditshme të rutimit të çdo aplikacioni Angular, me ruajtëse dhe ngarkimin e ngadalshëm që ndërtojnë mbi këtë bazë.