> For the complete documentation index, see [llms.txt](https://odilbeks-organization.gitbook.io/angular-ustoz-shogirt/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://odilbeks-organization.gitbook.io/angular-ustoz-shogirt/routing-va-navigation.md). # Routing va Navigation {% hint style="info" %} **Dars maqsadi** Ushbu darsda siz Angular Router yordamida ko'p sahifali (multi-page) ilova yaratishni, sahifalar o'rtasida navigatsiya qilishni, route parametrlarini ishlatishni va route guards bilan sahifalarni himoya qilishni o'rganasiz. {% endhint %} #### Mundarija 1. **Angular Router:** * Angular Router nima? * Routes konfiguratsiyasi * router-outlet * routerLink direktiva 2. **Navigation:** * Router.navigate() * ActivatedRoute * Route parametrlari * Query parametrlar 3. **Route Guards:** * CanActivate * CanDeactivate *** Routing va navigation bo’yicha boshlang’ich tushunchalar NEW: {% embed url="" %} ### 1. Angular Router #### 1.1 Angular Router nima? Angular Router — bu **Single Page Application (SPA)** ichida sahifalar (componentlar) orasida o‘tishni boshqaradigan mexanizm. ❌ Sahifa to‘liq yangilanmaydi (reload bo‘lmaydi) ✅ Faqat kerakli component almashadi ✅ Tez va qulay navigatsiya **Oddiy misol:** * `/login` → LoginComponent * `/dashboard` → DashboardComponent * `/profile` → ProfileComponent *** #### 1.2 Routes konfiguratsiyasi Angular routing `app.routes.ts` (yoki eski loyihalarda `app-routing.module.ts`) faylida yoziladi. **Oddiy route konfiguratsiyasi:** ```tsx import { Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { AboutComponent } from './about/about.component'; export const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }, ]; ``` 📌 **Muhim tushunchalar:** * `path` — URL qismi * `component` — ochiladigan component * `''` — bosh sahifa (root) *** #### 1.3 router-outlet `router-outlet` — **route orqali kelgan component chiqadigan joy**. Odatda `app.component.html` ichida bo‘ladi: ```html
Header
``` 📌 Route o‘zgarganda faqat `router-outlet` ichidagi qism almashadi. *** #### 1.4 routerLink direktivasi `routerLink` — HTML ichida navigatsiya qilish uchun ishlatiladi. ```html Home About ``` ❗ `routerLink` — `href` dan afzal, chunki SPA logikasini buzmaydi. *** ### 2. Navigation #### 2.1 Router.navigate() Component ichidan **programmatik navigatsiya** qilish. ```tsx import { Router } from '@angular/router'; constructor(private router: Router) {} openProfile() { this.router.navigate(['/profile']); } ``` Parametr bilan: ```tsx this.router.navigate(['/user', 10]); // /user/10 ``` *** #### 2.2 ActivatedRoute `ActivatedRoute` — **joriy route haqida ma’lumot** beradi. ```tsx import { ActivatedRoute } from '@angular/router'; constructor(private route: ActivatedRoute) {} ``` #### 2.2.1 URL param olish joyida **NEW** #### `/users/42` #### 📍 Routing ```tsx { path: 'users/:id', component: UserDetailComponent } ``` #### 📍 Component ```tsx import {ActivatedRoute }from'@angular/router'; @Component({...}) export class UserDetailComponent { constructor(privateroute:ActivatedRoute) {} ngOnInit() { this.route.params.subscribe(params => { console.log(params['id']);// 42 } } ``` ✅ **Qachon ishlatiladi?** * Id ga asoslanib biror ma’lumotni Backendan olib kelishda *** #### 2.2.2 Query param joyida **NEW** #### `/products?category=phone&page=2` #### 📍 Component ```tsx ngOnInit() { this.route.queryParams.subscribe(q => { console.log(q['category']);// phone console.log(q['page']);// 2 } ``` ✅ **Qachon?** * Qaysi ma’lumotlarga asoslanib Filter qilish kerakligini QueryParam dan olamiz * Pagination * Search *** #### 2.2.3 Route `data` joyida **NEW** Static datani route orqali uzatganda componentdan turib olishda ishlatamiz #### 📍 Routing ```tsx { path: 'dashboard', component: DashboardComponent, data: { title: 'Dashboard', role: 'admin' } } ``` #### 📍 Component ```tsx ngOnInit() { console.log(this.route.snapshot.data['title']);// Dashboard } ``` ✅ **Qachon?** * Page title * Role * Permission *** #### 2.3 Route parametrlari **Route:** ```tsx { path: 'user/:id', component: UserComponent } ``` **URL:** ``` /user/25 ``` **O‘qish:** ```tsx ngOnInit() { this.route.paramMap.subscribe(params => { const id = params.get('id'); console.log(id); }); } ``` 📌 `:id` — majburiy parametr *** #### 2.4 Query parametrlar **URL:** ``` /products?category=phone&page=2 ``` **O‘qish:** ```tsx this.route.queryParamMap.subscribe(params => { const category = params.get('category'); const page = params.get('page'); }); ``` **Yuborish:** ```tsx this.router.navigate(['/products'], { queryParams: { category: 'phone', page: 2 } }); ``` 📌 Query param — ixtiyoriy *** ### 3. Route Guards Route Guard — **route ochilishidan oldin tekshiruv**. *** #### 3.1 CanActivate **NEW** #### canActivate — *“Bu sahifaga kirishga ruxsat bormi?”* **degani** #### 📌 Nima qiladi? `canActivate` **route ochilishidan oldin** ishga tushadi. Agar `true` qaytarsa → sahifa ochiladi Agar `false` qaytarsa → sahifa ochilmaydi (redirect bo‘lishi mumkin) 📍 **Ko‘p ishlatiladigan joylar:** * Login bo‘lmagan foydalanuvchini `/dashboard` ga kiritmaslik * Rolga qarab sahifani yopish (admin, user) * To‘lov qilinmagan foydalanuvchini bloklash **Guard:** ```tsx import { CanActivateFn } from '@angular/router'; export const authGuard: CanActivateFn = () => { const isLoggedIn = !!localStorage.getItem('token'); return isLoggedIn; }; ``` **Route:** ```tsx { path: 'dashboard', component: DashboardComponent, canActivate: [authGuard] } ``` 📌 Agar `false` qaytsa — route ochilmaydi *** #### 3.2 CanDeactivate **NEW** #### canDeactivate — *“Bu sahifadan chiqish mumkinmi?”* degani #### 📌 Nima qiladi? `canDeactivate` **sahifadan chiqishdan oldin** ishga tushadi. 📍 **Ko‘p ishlatiladigan joylar:** * Form to‘ldirilgan, lekin saqlanmagan bo‘lsa * Muhim ma’lumot yo‘qolishining oldini olish * “Are you sure?” oynasi chiqarish **Interface:** ```tsx export interface CanDeactivateComponent { canDeactivate: () => boolean; } ``` **Guard:** ```tsx import { CanDeactivateFn } from '@angular/router'; import { CanDeactivateComponent } from './can-deactivate.interface'; export const unsavedChangesGuard: CanDeactivateFn = (component) => { return component.canDeactivate(); }; ``` **Component:** ```tsx @Component({...}) export class ProfileEditComponent implements CanDeactivateComponent { isSaved = false; canDeactivate(): boolean { return this.isSaved ? true : confirm('Saqlanmagan maʼlumotlar bor. Chiqasizmi?'); } } ``` **Route:** ```tsx { path: 'profile/edit', loadComponent: () => import('./profile-edit/profile-edit.component') .then(m => m.ProfileEditComponent), canDeactivate: [unsavedChangesGuard] } ``` *** #### Test **1. Angular Router nima uchun ishlatiladi?** A) HTTP so‘rov yuborish uchun B) Componentlar orasida SPA navigatsiya qilish uchun C) Forma validatsiyasi uchun D) State management uchun *** **2. `router-outlet` vazifasi nima?** A) URL ni o‘zgartiradi B) Componentlarni ro‘yxat qiladi C) Route orqali kelgan componentni ko‘rsatadi D) Guardlarni ishga tushiradi *** **3. Quyidagilardan qaysi biri bosh sahifa (root) route hisoblanadi?** A) `{ path: '/', component: HomeComponent }` B) `{ path: 'home', component: HomeComponent }` C) `{ path: '', component: HomeComponent }` D) `{ path: '**', component: HomeComponent }` *** **4. `routerLink` nima qiladi?** A) Backendga so‘rov yuboradi B) SPA ichida navigatsiya qiladi C) Sahifani reload qiladi D) HTML style beradi *** **5. Component ichidan navigatsiya qilish uchun qaysi servis ishlatiladi?** A) ActivatedRoute B) HttpClient C) Router D) Location *** **6. Quyidagi URLda `id` ning qiymati nechchi?** `/user/42` Route: `{ path: 'user/:id', component: UserComponent }` A) user B) :id C) 42 D) undefined *** **7. Route parametrlari qayerdan o‘qiladi?** A) Router B) HttpClient C) ActivatedRoute D) NgModule *** **8. Query parametr qaysi URLda to‘g‘ri ishlatilgan?** A) `/products/category=phone` B) `/products/phone?page=2` C) `/products?page=2&category=phone` D) `/products/page/2` *** **9. `CanActivate` guard qachon ishlaydi?** A) Component yuklangandan keyin B) Route ochilishidan oldin C) Sahifadan chiqishda D) HTTP so‘rovdan keyin *** **10. `CanDeactivate` qaysi holatda ishlatiladi?** A) Login tekshirishda B) Route param o‘zgarganda C) Componentdan chiqishda tasdiqlash uchun D) Query param o‘qishda #### Test [QuizBot](https://t.me/QuizBot?start=qpvZZ1uf) #### Savollar * Angular Router nega `href` o‘rniga `routerLink` ishlatishni tavsiya qiladi? * Route param va query param o‘rtasidagi farqni tushuntiring. * `ActivatedRoute` nima va u qachon kerak bo‘ladi? * `CanActivate` guard real loyihada qayerlarda ishlatiladi? * `CanDeactivate` guard foydalanuvchi tajribasini qanday yaxshilaydi? #### Topshiriq #### **Simple Users App** #### Vazifa: Oddiy foydalanuvchilar ro‘yxati va tafsilotlari bo‘lgan Angular ilova yarating. *** #### 1-qadam. Componentlar yarating * `HomeComponent` * `UsersComponent` * `UserDetailComponent` * `LoginComponent` *** #### 2-qadam. Route konfiguratsiyasi Quyidagi routelarni sozlang: * `/` → HomeComponent * `/login` → LoginComponent * `/users` → UsersComponent * `/users/:id` → UserDetailComponent (route param bilan) *** #### 3-qadam. Users sahifasi * 5 ta foydalanuvchi ro‘yxatini chiqaring (`id` va `name`) * Har bir user ustiga bosilganda `/users/:id` ga o‘tsin *** #### 4-qadam. UserDetail sahifasi * URL dan `id` ni o‘qing * Ekranga: **"Siz tanlagan foydalanuvchi ID: X"** deb chiqaring *** #### 5-qadam. Query parametr * `/users?role=admin` kabi query parametrni o‘qing * Agar `role=admin` bo‘lsa, ekranga **"Adminlar ro‘yxati"** yozuvi chiqsin *** #### 6-qadam. Guard qo‘shish * `/users` va `/users/:id` routelariga `CanActivate` guard qo‘shing * Agar `localStorage` da `token` bo‘lmasa → `/login` ga yo‘naltiring *** #### ⭐ Qo‘shimcha (ixtiyoriy): * `CanDeactivate` qo‘shing (`UserDetail` sahifadan chiqishda confirm) * 404 sahifa (`**` route) *** **Darsdan namuna (takrorlash uchun):** {% embed url="" %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://odilbeks-organization.gitbook.io/angular-ustoz-shogirt/routing-va-navigation.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.