Angular necə işləyir?

Angular, tək səhifəli tətbiqlərin (SPA) yaradılması üçün çərçivə kimi işləyir. Əsas komponentləri və prinsipləri:

• Modularlıq: Tətbiqlər modullardan ibarətdir. @NgModule hansı komponentlərin, xidmətlərin və digər elementlərin modulə aid olduğunu müəyyən edir.
• Komponentlər: Angular tətbiqlərinin əsas tikinti bloklarıdır. Hər bir komponent şablondan (HTML), TypeScript sinifindən (məntiq) və stillərdən (CSS) ibarətdir. Component dekoratoru onları birləşdirir.
• Məlumatların bağlanması (Data Binding): Angular, komponent sinifindəki məlumatlar ilə şablondakı təqdimat arasında əlaqə təmin edir. Tək tərəfli (property binding, interpolation) və iki tərəfli (ngModel) bağlanma mövcuddur.
• Direktivlər: DOM elementlərinin davranışını və ya görünüşünü dəyişdirirlər. Strukturalar (*ngIf, *ngFor) və atributlar (ngClass, ngStyle).
• Xidmətlər: Bir neçə komponent tərəfindən istifadə oluna bilən məntiqi ehtiva edən siniflər. Məlumatların əldə edilməsi, biznes məntiqi və s. üçün istifadə olunur.
• Asılılıq İstifadəsi (Dependency Injection): Angular-ın xidmətləri komponentlərə və ya digər xidmətlərə təmin etdiyi mexanizm. Kodu daha çevik və test edilə bilən edir.
• Routing: Tətbiqin müxtəlif təqdimatları arasında naviqasiya etməyə imkan verir, səhifəni yeniləmədən. RouterModule və marşrut konfiqurasiyası ilə təyin olunur.
• Komponentin həyat dövrü: Komponentin yaradılmasından məhv olunmasına qədər baş verən hadisələr silsiləsidir. Angular, müəyyən mərhələlərdə əməliyyatlar həyata keçirmək üçün hook-lar (metodlar) təmin edir (ngOnInit, ngOnDestroy).
• Dəyişikliklərin aşkarlanması (Change Detection): Mecanizm, məlumatlarda dəyişikliklər əsasında təqdimatı (DOM) yeniləmək lazım olub-olmadığını müəyyən edir. Angular, asinxron hadisələri izləmək və dəyişiklikləri avtomatik olaraq başlatmaq üçün zonalar (NgZone) istifadə edir.
• Şablonlar (Templates): Angular ilə genişləndirilmiş HTML, məlumatların bağlanması, direktivlər və ifadələr üçün.
• RxJS: Angular, asinxron məlumatlar və hadisə axınları ilə işləmək üçün RxJS kitabxanasını aktiv şəkildə istifadə edir.

Yüksək səviyyəli iş prosesi:

1. Yükləmə: Brauzer index.html-i yükləyir.
2. Başlanğıc: Əsas tətbiq main.ts-də yerləşir və işə salınır.
3. Bootstrapping: Rəvayət modulu (adətən AppModule) platform-browser vasitəsilə yüklənir.
4. Render: Angular, kök komponentdən başlayaraq komponentləri yaradır və göstərir.
5. Məlumatların bağlanması: Komponent siniflərindən alınan məlumatlar şablonlara bağlanır.
6. Dəyişikliklərin aşkarlanması: Angular məlumatlarda dəyişiklikləri izləyir və təqdimatı yeniləyir.
7. Routing: Görünüşlər arasında keçid router tərəfindən idarə olunur.

// Sadə komponent nümunəsi
import { Component } from '@angular/core';

@Component({
  selector: 'app-greet', // Şablonda istifadə üçün təkli tərtib
  template: `<p>{{ message }}</p>`, // Komponent şablonu
  styles: ['p { color: blue; }'] // Komponent stilləri
})
export class GreetComponent {
  // Komponent məntiqi
  message = 'Salam Angular-dan!';
}

// Xidmətin DI ilə istifadəsi nümunəsi
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Xidmət kök injector-də mövcuddur
})
export class DataService {
  getData(): string {
    return 'Xidmət məlumatları';
  }
}

// Xidmət istifadə edən komponentdə
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) { // Xidmətin inject edilməsi
  }

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

Angular, TypeScript və HTML şablonlarını JavaScript-ə çevirmək üçün build zamanı (AOT compilation) istifadə edir ki, bu da performansı artırır.