Angular nasıl çalışır?

Angular, tek sayfa uygulamaları (SPA) oluşturmak için kullanılan bir çerçeve olarak çalışır. Ana bileşenleri ve ilkeleri:

• Modülerlik: Uygulamalar modüllerden oluşturulur. @NgModule, hangi bileşenlerin, servislerin ve diğer öğelerin modüle ait olduğunu tanımlar.
• Bileşenler: Angular uygulamalarının temel yapı taşlarıdır. Her bileşen, şablon (HTML), TypeScript sınıfı (mantık) ve stiller (CSS) içerir. Component dekoratörü bunları bir araya getirir.
• Veri Bağlama: Angular, bileşen sınıfındaki veriler ile şablondaki görünüm arasında bağlantı sağlar. Tek yönlü (property binding, interpolation) ve çift yönlü (ngModel) bağlamalar mevcuttur.
• Yönlendirmeler (Directives): DOM öğelerinin davranışını veya görünümünü değiştirirler. Yapısal (*ngIf, *ngFor) veya özniteliksel (ngClass, ngStyle) olabilirler.
• Servisler: Birden fazla bileşen tarafından kullanılabilen mantık içeren sınıflardır. Veri alma, iş mantığı gibi amaçlarla kullanılırlar.
• Bağımlılık Enjeksiyonu (Dependency Injection): Angular'ın servisleri bileşenlere veya diğer servislere sağladığı mekanizmadır. Kodu daha esnek ve test edilebilir kılar.
• Yönlendirme (Routing): Uygulama içindeki farklı görünümler (bileşenler) arasında sayfa yenilemeden gezinmeyi sağlar. RouterModule ve rota konfigürasyonu ile tanımlanır.
• Bileşen Yaşam Döngüsü (Component Lifecycle): Bileşenin oluşturulmasından yok edilmesine kadar geçen olaylar dizisidir. Angular, belirli aşamalarda işlem yapmak için kullanılabilen kancalar (metodlar) sağlar (ngOnInit, ngOnDestroy).
• Değişiklik Algılama (Change Detection): Uygulama verilerindeki değişikliklere göre görünümün (DOM) güncellenmesini belirleyen mekanizmadır. Angular, asenkron olayları izlemek ve otomatik değişiklik algılamayı tetiklemek için NgZone kullanır.
• Şablonlar (Templates): Angular veri bağlama, direktifler ve ifadeler içeren HTML.
• RxJS: Angular, asenkron veriler ve olay akışlarıyla çalışmak için RxJS kütüphanesini aktif olarak kullanır.

Yüksek seviyeli çalışma süreci:

1. Yükleme: Tarayıcı index.html dosyasını yükler.
2. Başlatma: Uygulamanın kökü, genellikle main.ts içinde başlatılır.
3. Bootstrap: Kök modül (genellikle AppModule) platform-browser kullanılarak yüklenir.
4. Render: Angular, kök bileşenden başlayarak bileşenleri oluşturur ve render eder.
5. Veri Bağlama: Bileşen sınıflarındaki veriler şablonlara bağlanır.
6. Değişiklik Algılama: Angular, verideki değişiklikleri izler ve görünümü günceller.
7. Yönlendirme: Görünümler arasındaki geçişler router tarafından yönetilir.

// Basit bir bileşen örneği
import { Component } from '@angular/core';

@Component({
  selector: 'app-greet', // Şablonda kullanılacak etiket adı
  template: `<p>{{ message }}</p>`, // Bileşen şablonu
  styles: ['p { color: blue; }'] // Bileşen stilleri
})
export class GreetComponent {
  // Bileşenin mantığı
  message = 'Angular’dan Merhaba!';
}

// DI ile servis kullanım örneği
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Servis kök enjeksiyonunda kullanılabilir
})
export class DataService {
  getData(): string {
    return 'Servisten gelen veriler';
  }
}

// Servisi kullanan bileşende
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) { // Servis enjeksiyonu
  }

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

Angular, TypeScript ve HTML şablonlarını derleme aşamasında JavaScript'e dönüştürür (varsayılan AOT derlemesi), bu da performansı artırır.