Angular necə işləyir?

Angular MVC/MVVM memarlığı əsasında işləyir. O, qarşılıqlı əlaqəli veb tətbiqlər qurmaq üçün komponentlər, məlumatların bağlanması və asılılıqların injeksiyasını istifadə edir.

Əsas anlayışlar:

• Komponentlər: Tətbiqin tikinti bloklarıdır, şablon, sinif və üslublardan ibarətdir.
• Modullar (NgModules): Əlaqəli komponentləri, xidmətləri və digər elementləri qruplaşdırır.
• Məlumatların bağlanması: Model və görünüş arasında məlumatların sinxronizasiyası.
  • Tək tərəfli bağlanma: Məlumatlar bir istiqamətdə axır (məsələn, modeldən görünüşə).
  • İki tərəfli bağlanma [()]: Modeldəki dəyişikliklər görünüşə təsir edir və əksinə.
• Xidmətlər: Müxtəlif komponentlər tərəfindən istifadə oluna bilən funksionallıq təmin edir (məsələn, HTTP sorğuları ilə işləmək).
• Asılılıqların injeksiyası (DI): Asılılıqları (məsələn, xidmətləri) komponentlərə təmin edən mexanizm.
• Şablonlar: Angular sintaksisinin genişləndirmələri ilə HTML, məlumatların göstərilməsi və hadisələrin idarə olunması.
• Direktivlər: DOM elementlərinin davranışını və ya görünüşünü dəyişdirir.
  • Struktur: DOM elementləri əlavə edir, silir və ya manipulyasiya edir (*ngIf, *ngFor).
  • Atribut: Mövcud elementin görünüşünü və ya davranışını dəyişdirir ([ngClass], [ngStyle]).
• Komponentlərin həyat dövrü: Müxtəlif mərhələlərdə kod icra etməyə imkan verən hooklar.
• NgZone: Asinxron əməliyyatlar zamanı avtomatik dəyişikliklərin aşkarlanması və görünüşün yenilənməsini təmin edir.

İş prosesi:

1. Yükləmə: Tətbiq yüklənir, Bootstrap modulu əsas komponenti işə salır.
2. Render: Angular şablonları tərtib edir və DOM strukturunu yaradır.
3. Məlumatların bağlanması: Məlumatlar və görünüş arasında əlaqə qurulur.
4. Hadisələrin idarə olunması: Hadisə dinləyiciləri istifadəçi fəaliyyətlərinə cavab verir.
5. Dəyişikliklərin aşkarlanması: Zona asinxron əməliyyatları izləyir.
6. Görünüşün yenilənməsi: Dəyişikliklər aşkarlananda, Angular DOM-un müvafiq hissələrini yeniləyir.

İki tərəfli məlumatların bağlanması nümunəsi:

<!-- Şablonda -->
<input [(ngModel)]="userName">
<p>Salam, {{ userName }}!</p>

// Komponent sinifində
export class MyComponent {
  userName: string = '';
}