Angular Router

Router URL manzillarini ko‘rishlar bilan taqqoslaydi va foydalanuvchilarga ilovangizda harakat qilish imkonini beradi.

Router asoslari

URL-ga asoslangan UI: Router URL-ga asoslangan ko‘rinishlarni almashtiradi.
RouterOutlet: Faol marshrut komponenti ko‘rsatadigan joy ushlagichi.
routerLink: To‘liq sahifani qayta yuklamasdan navigatsiya qiling.
RouterLinkActive: Faol havolalarga classlar qo‘shadi (root uchun { exact: true } dan foydalaning).
Unumdorlik va nazorat: funksional bo‘limlarni kechiktirib yuklang (lazy loading); navigatsiyaga ruxsat berish yoki uni bloklash uchun guard’lardan foydalaning.

import { provideRouter, withHashLocation, RouterOutlet, RouterLink } from '@angular/router';

const routes = [
  { path: '', component: Home },
  { path: 'about', component: About }
];

bootstrapApplication(App, {
  providers: [provideRouter(routes, withHashLocation())]
});

// Template
// <a routerLink="/about">About</a>
// <router-outlet></router-outlet>

Eslatmalar:

Aloqador: Ko‘rinishlarni qurish uchun componentlar, Umumiy mantiq/qo‘riqchilar uchun xizmatlar va belgilash va ko‘rsatmalar uchun shablonlarga qarang.
Mustaqil ilovalar: RouterOutlet/RouterLink-ni import qiling va provideRouter() bilan marshrutlarni taqdim eting.
Sandboxlar/yuguruvchilar: withHashLocation() dan foydalaning, shuning uchun havolalar server konfiguratsiyasisiz ishlaydi (xesh URL manzillari /#/path kabi ko‘rinadi).

Router asoslari

Komponentlarga yo‘llarni ko‘rsatadigan routes massivini aniqlang.
Marshrutlarni provideRouter() bilan ta’minlang (qum qutilari uchun withHashLocation() dan foydalaning).
Navigatsiya uchun routerLink va ko‘rinishlarni ko‘rsatish uchun RouterOutlet dan foydalaning.

const routes = [ { path: '', component: Home }, { path: 'about', component: About } ];
// template
// <a routerLink="/about">About</a>
// <router-outlet></router-outlet>

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { provideRouter, RouterOutlet, RouterLink, withHashLocation } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLink],
  template: `
    <h3>Router</h3>
    <nav>
      <a routerLink="/">Home</a> |
      <a routerLink="/about">About</a>
    </nav>
    <router-outlet></router-outlet>
  `
})
export class App {}

@Component({
  standalone: true,
  template: `<p>Home works!</p>`
})
export class Home {}

@Component({
  standalone: true,
  template: `<p>About works!</p>`
})
export class About {}

const routes = [
  { path: '', component: Home },
  { path: 'about', component: About }
];

bootstrapApplication(App, {
  providers: [provideRouter(routes, withHashLocation())]
});

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

provideRouter(routes) : Ilova uchun marshrutlarni qayd qiladi.
RouterOutlet: Faol marshrut komponenti ko‘rsatadigan joy ushlagichi.
routerLink: Sahifani qayta yuklamasdan navigatsiya qiladi.
withHashLocation(): Xesh URL manzillaridan foydalanadi, shuning uchun havolalar server qayta yozilmasdan sinov muhitida ishlaydi.

Eslatmalar:

href emas, routerLink dan foydalaning: href sahifani qayta yuklaydi.
SPA navigatsiyasi uchun routerLink dan foydalaning.
Mustaqil importlar: RouterOutlet/RouterLink-ni import qiling va provideRouter() bilan marshrutlarni taqdim eting.

Router parametrlari

:id (masalan, /product/42 ) bilan yo‘llardagi o‘zgaruvchilarni yozib oling.
Read them via ActivatedRoute (snapshot or paramMap observable).

{ path: 'product/:id', component: Product }
// class Product {
//  id = '';
//  route = inject(ActivatedRoute);
//  ngOnInit() { this.id = this.route.snapshot.paramMap.get('id') ?? ''; }
// }

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, OnInit, inject } from '@angular/core';
import { provideRouter, RouterOutlet, RouterLink, RouterLinkActive, ActivatedRoute, withHashLocation } from '@angular/router';

@Component({
  selector: 'home-cmp',
  standalone: true,
  template: `<p>Home works!</p>`
})
export class Home {}

@Component({
  selector: 'product-cmp',
  standalone: true,
  template: `<p>Product ID: {{ id }}</p>`
})
export class Product implements OnInit {
  id = '';
  private route = inject(ActivatedRoute);
  ngOnInit() {
    this.id = this.route.snapshot.paramMap.get('id') ?? '';
  }
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
  template: `
    <h3>Router Params</h3>
    <nav>
      <a routerLink="/">Home</a> |
      <a routerLink="/product/1" routerLinkActive="active">Product 1</a> |
      <a routerLink="/product/2" routerLinkActive="active">Product 2</a>
    </nav>
    <router-outlet></router-outlet>
  `,
  styles: [`nav a { margin-right: 6px; } .active { font-weight: bold; }`]
})
export class App {}

const routes = [
  { path: '', component: Home },
  { path: 'product/:id', component: Product }
];

bootstrapApplication(App, {
  providers: [provideRouter(routes, withHashLocation())]
});

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

product/:id: id nomli yo‘l parametrini e’lon qiladi.
ActivatedRoute: ngOnInit-dagi snapshot.paramMap.get('id') dan identifikatorni o‘qiydi.
Havolalar: routerLink="/product/1" va /product/2 parametrlangan navigatsiyani namoyish etadi.

Paramlar bir komponentda yangilanadi: Agar bir xil yo‘nalish bo‘yicha turli parametrlar bilan harakatlanayotgan bo‘lsangiz, bir martalik snapshot ishlatish o‘rniga paramMap (yoki params ) ga obuna bo‘ling.

Faol havolalar

Havola mos kelganda classlarni almashtirish uchun routerLinkActive dan foydalaning.
/ kabi root havolalari uchun { exact: true } ni o‘rnating.

<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a>
<a routerLink="/about" routerLinkActive="active">About</a>

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { provideRouter, RouterOutlet, RouterLink, RouterLinkActive, withHashLocation } from '@angular/router';

@Component({
  standalone: true,
  template: `<p>Home works!</p>`
})
export class Home {}

@Component({
  standalone: true,
  template: `<p>About works!</p>`
})
export class About {}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
  styles: [`
    nav a { margin-right: 8px; text-decoration: none; }
    .active { font-weight: 600; color: seagreen; }
  `],
  template: `
    <h3>Active Links (routerLinkActive)</h3>
    <nav>
      <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a>
      <a routerLink="/about" routerLinkActive="active">About</a>
    </nav>
    <router-outlet></router-outlet>
  `
})
export class App {}

const routes = [
  { path: '', component: Home },
  { path: 'about', component: About }
];

bootstrapApplication(App, {
  providers: [provideRouter(routes, withHashLocation())]
});

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

routerLinkActive="active": Havola joriy URL manziliga mos kelganda faol classni qo‘shadi.
[routerLinkActiveOptions]="{ exact: true }" : Root uchun ( / ) faqat aniq mos kelganda faol deb belgilang.
RouterOutlet: Joriy marshrut uchun mos komponentni ko‘rsatadi.

Eslatmalar:

Root uchun aniq: / havolalar uchun { exact: true } ni o‘rnating, shunda ota-ona yo‘llari ularni faol ushlab turmaydi.
Konteynerlarda qo‘llash: havolalar guruhlarini uslublash uchun asosiy elementga routerLinkActive-ni qo‘ying.
Bir nechta classlar: Siz bir nechta classlarni qo‘shishingiz mumkin: routerLinkActive="active bold".

Kechiktirib yuklanadigan (lazy-loaded) komponent

loadComponent yoki loadChildren bilan navigatsiyagacha yuklash kodini kechiktiring.
To‘plamlarni bo‘lish orqali dastlabki yuklash vaqtini yaxshilaydi.

{ path: 'about', loadComponent: () => import('./about').then(m => m.About) }

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { provideRouter, RouterOutlet, RouterLink, withHashLocation } from '@angular/router';

@Component({
  standalone: true,
  template: `<p>Home works!</p>`
})
export class Home {}

@Component({
  standalone: true,
  template: `<p>About works (lazy)!</p>`
})
export class About {}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLink],
  styles: [`
    nav a { margin-right: 8px; text-decoration: none; }
  `],
  template: `
    <h3>Lazy-loaded Component (loadComponent)</h3>
    <nav>
      <a routerLink="/">Home</a>
      <a routerLink="/about">About (lazy)</a>
    </nav>
    <router-outlet></router-outlet>
  `
})
export class App {}

const routes = [
  { path: '', component: Home },
  // Use Promise.resolve to simulate lazy loading without dynamic imports
  { path: 'about', loadComponent: () => Promise.resolve(About) }
];

bootstrapApplication(App, {
  providers: [provideRouter(routes, withHashLocation())]
});

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

loadComponent: navigatsiyagacha marshrut komponentini yuklashni kechiktiradi (bu yerda Promise.resolve bilan simulyatsiya qilingan).
Marshrutlar: Home darhol (eager) yuklanadi; About esa kechiktirib (lazy) yuklanadi.
Navigatsiya: "About (lazy)" havolasini bosish komponentni talab bo‘yicha yuklaydi va render qiladi.

Eslatmalar:

Marshrut tartibi va joker belgilar: Boshqa marshrutlarni yutib yubormasliklari uchun barcha marshrutlarni oxirgi qilib qo‘ying.
Chuqur havolalarni yangilash: server qayta yozilmasdan, yangilanishlar 404-may.
Demo va sandbox muhitlarida withHashLocation()’dan foydalaning.

Marshrut qo‘riqchisi (canActivate)

Navigatsiyaga ruxsat yoki yo‘qligini soqchilar hal qiladi.
true (ruxsat berish), false / UrlTree (bloklash/yo‘naltirish) yoki asinxron ekvivalentlarini qaytaring.

export const authGuard = () => isLoggedIn ? true : inject(Router).createUrlTree(['/']);
{ path: 'protected', component: Protected, canActivate: [authGuard] }

Misol

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, inject } from '@angular/core';
import { provideRouter, RouterOutlet, RouterLink, withHashLocation, Router } from '@angular/router';

let loggedIn = false;

export const authGuard = () => {
  if (loggedIn) return true;
  const router = inject(Router);
  return router.createUrlTree(['/']);
};

@Component({
  standalone: true,
  template: `<p>Home (public).</p>
<p>Login to access protected route.</p>`
})
export class Home {}

@Component({
  standalone: true,
  template: `<p>Protected works! You are logged in.</p>`
})
export class Protected {}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLink],
  styles: [`
    nav a { margin-right: 8px; text-decoration: none; }
    .status { margin-left: 8px; font-weight: 600; }
  `],
  template: `
    <h3>Route Guard (canActivate)</h3>
    <div class="toolbar">
      <button (click)="toggle()">{{ loggedIn ? 'Log out' : 'Log in' }}</button>
      <span class="status">Status: {{ loggedIn ? 'Logged in' : 'Logged out' }}</span>
    </div>
    <nav>
      <a routerLink="/">Home</a>
      <a routerLink="/protected">Protected</a>
    </nav>
    <router-outlet></router-outlet>
  `
})
export class App {
  get loggedIn() { return loggedIn; }
  toggle() { loggedIn = !loggedIn; }
}

const routes = [
  { path: '', component: Home },
  { path: 'protected', component: Protected, canActivate: [authGuard] }
];

bootstrapApplication(App, {
  providers: [provideRouter(routes, withHashLocation())]
});

<app-root></app-root>

Misolni ishga tushirish »

Misol tushuntirildi

authGuard</code>: tizimga kirganingizda true qiymatini qaytaradi; aks holda / ga yo‘naltiruvchi UrlTree ni qaytaradi.
inject(Router): Himoya funksiyasi ichida UrlTree qayta yo‘naltiruvchisini yaratish uchun Routerga kiradi.
canActivate : /protected yo‘nalishiga qo‘riqchini qo‘llaydi.
O‘chirish: tugma ikkala filialni sinab ko‘rish uchun tizimga kirish holatini aylantiradi.

Guard qaytish turlari: Qaytish boolean, UrlTree yoki ularning kuzatilishi mumkin/Promise obyekti.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish