Angular qanday ishlaydi?

Angular yagona yagona bitta sahifa ilovalari (SPA) yaratish uchun framework sifatida ishlaydi. Uning asosiy komponentlari va tamoyillari:

• Modullik: Ilovalar modullardan quriladi. @NgModule qaysi komponentlar, xizmatlar va boshqa elementlar modulga tegishli ekanligini belgilaydi.
• Komponentlar: Angular ilovalarining asosiy qurilish bloklari. Har bir komponent shablondan (HTML), TypeScript sinfidan (mantiq) va uslublardan (CSS) iborat. Component dekoratori ularni bog'laydi.
• Ma'lumotlarni bog'lash (Data Binding): Angular komponent sinfidagi ma'lumotlar bilan shablondagi ko'rinish o'rtasida bog'lanishni ta'minlaydi. Bir tomonlama (property binding, interpolation) va ikki tomonlama (ngModel) bog'lanishlar mavjud.
• Direktivlar: DOM elementlarining xatti-harakatini yoki ko'rinishini o'zgartiradi. Strukturalik (*ngIf, *ngFor) yoki atributli (ngClass, ngStyle) bo'lishi mumkin.
• Xizmatlar: Bir nechta komponentlar tomonidan foydalaniladigan mantiqni o'z ichiga olgan sinflar. Ma'lumotlarni olish, biznes mantiqini bajarish uchun ishlatiladi.
• Qaramliklarni injektsiya qilish (Dependency Injection): Angular xizmatlarni komponentlarga yoki boshqa xizmatlarga taqdim etadigan mexanizm. Kodni yanada moslashuvchan va test qilish mumkin qiladi.
• Routing: Ilova ichida turli ko'rinishlar (komponentlar) o'rtasida navigatsiya qilish imkonini beradi. RouterModule va marshrutlar konfiguratsiyasi yordamida belgilangan.
• Komponentning hayot aylanishi (Component Lifecycle): Komponentning yaratilishidan o'limigacha bo'lgan voqealar ketma-ketligi. Angular ma'lum bosqichlarda harakat qilish uchun hooklar (metodlar) taqdim etadi (ngOnInit, ngOnDestroy).
• O'zgarishlarni aniqlash (Change Detection): Ilova ma'lumotlaridagi o'zgarishlarga asoslangan holda ko'rinishni (DOM) yangilashni belgilovchi mexanizm. Angular NgZone yordamida asinxron voqealarni kuzatadi va avtomatik o'zgarishlarni aniqlashni ishga tushiradi.
• Shablonlar (Templates): Angular bilan bog'langan HTML, direktivalar va ifodalar.
• RxJS: Angular asinxron ma'lumotlar va voqealar oqimlari bilan ishlash uchun RxJS kutubxonasidan faol foydalanadi.

Yuqori darajadagi ish jarayoni:

1. Yuklash: Brauzer index.html faylini yuklaydi.
2. Boshlash: Ilovaning ildizi odatda main.ts da boshlanadi.
3. Bootstrap: @NgModule asosiy modul uchun (odatda AppModule) platform-browser yordamida yuklanadi.
4. Render qilish: Angular ildizdan boshlab komponentlarni yaratadi va render qiladi.
5. Ma'lumotlarni bog'lash: Komponent sinflaridagi ma'lumotlar shablonlarga bog'lanadi.
6. O'zgarishlarni aniqlash: Angular ma'lumotlar o'zgarishlarini kuzatadi va ko'rinishni yangilaydi.
7. Routing: Ko'rinishlar o'rtasidagi o'tishlar router tomonidan boshqariladi.

// Oddiy komponent misoli
import { Component } from '@angular/core';

@Component({
  selector: 'app-greet', // Shablonda ishlatiladigan teg nomi
  template: `<p>{{ message }}</p>`, // Komponent shabloni
  styles: ['p { rang: blue; }'] // Komponent uslublari
})
export class GreetComponent {
  // Komponent mantiqi
  message = 'Salom Angulardan!';
}

// DI bilan xizmatdan foydalanish misoli
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Xizmat ildiz injektorida mavjud
})
export class DataService {
  getData(): string {
    return 'Xizmatdan ma'lumotlar';
  }
}

// Xizmatni ishlatadigan komponentda
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-show-data',
  template: `<p>{{ serviceData }}</p>`,
})
export class ShowDataComponent implements OnInit {
  serviceData: string = '';

  constructor(private dataService: DataService) { // Xizmatni injektsiya qilish
  }

  ngOnInit() {
    this.serviceData = this.dataService.getData();
  }
}

Angular TypeScript va HTML shablonlarini qurilish jarayonida JavaScriptga kompilyatsiya qiladi (standart AOT kompilyatsiya), bu esa ishlash tezligini oshiradi.