Angular nasıl çalışır?

Angular, MVC/MVVM mimarisi temelinde çalışır. Etkileşimli web uygulamaları oluşturmak için bileşenler, veri bağlama ve bağımlılık enjeksiyonu kullanır.

Ana kavramlar:

• Bileşenler: Uygulamanın yapı taşlarıdır, şablon, sınıf ve stillerden oluşur.
• Modüller (NgModules): İlgili bileşenleri, servisleri ve diğer öğeleri gruplayan yapılar.
• Veri Bağlama: Model ile görünüm arasında veri senkronizasyonu sağlar.
  • Tek yönlü bağlama: Veriler tek yönde akar (örneğin, modelden görünüme).
  • İki yönlü bağlama [()]: Modeldeki değişiklikler görünümü etkiler ve tersi.
• Servisler: HTTP istekleri gibi farklı bileşenler tarafından kullanılabilen fonksiyonellik sağlar.
• Bağımlılık Enjeksiyonu (DI): Servisler gibi bağımlılıkların bileşenlere sağlanması mekanizması.
• Şablonlar: Angular sözdizimi genişletmeleri içeren HTML, veri gösterimi ve olay işleme için.
• Yönlendirmeler: DOM öğelerinin davranışını veya görünümünü değiştirir.
  • Yapısal: DOM öğeleri ekler, kaldırır veya manipüle eder (*ngIf, *ngFor).
  • Öznitelik: Mevcut bir öğenin görünümünü veya davranışını değiştirir ([ngClass], [ngStyle]).
• Bileşenlerin yaşam döngüsü: Bileşenin yaşamının farklı aşamalarında kod çalıştırmaya olanak tanıyan kancalar.
• NgZone: Asenkron işlemler sırasında otomatik değişiklik tespiti ve görünüm güncellemesi sağlar.

Çalışma süreci:

1. Yükleme: Uygulama yüklenir, Bootstrap modülü kök bileşeni başlatır.
2. Render: Angular şablonları derler ve DOM yapısını oluşturur.
3. Veri Bağlama: Veri ve görünüm arasında bağlantı kurulur.
4. Olay İşleme: Olay dinleyicileri kullanıcı eylemlerine yanıt verir.
5. Değişiklik Tespiti: Zone, asenkron işlemleri izler.
6. Görünüm Güncelleme: Değişiklikler tespit edildiğinde Angular DOM'un ilgili kısımlarını günceller.

İki yönlü veri bağlama örneği:

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

// Bileşen sınıfında
export class MyComponent {
  userName: string = '';
}