Bağımlılık Enjeksiyonu
Bağımlılık Enjeksiyonu (Dependency Injection, DI) Angular uygulamalarında bileşenler ve servisler arasındaki bağımlılıkları yönetmek için kullanılan kritik bir tasarım desenidir. DI, bir bileşenin ihtiyaç duyduğu servisleri kendisinin yaratmak yerine, Angular tarafından sağlanmasını sağlar. Bu yaklaşım, uygulamanın modülerliğini, bakımını ve test edilebilirliğini artırır. Özellikle modern tek sayfa uygulamalarda (SPA) bileşenler arası veri akışı, durum yönetimi ve yaşam döngüsü yönetimi açısından DI büyük önem taşır.
Angular’da DI, genellikle servislerin bileşenler aracılığıyla constructor içine enjekte edilmesiyle uygulanır. Bu sayede bir bileşen, bağımlılıklarıyla ilgili herhangi bir detaya sahip olmadan sadece bu servisleri kullanabilir. Bu yaklaşım, prop drilling ve gereksiz yeniden render sorunlarını önler ve bileşenlerin yalnızca kendi UI ve etkileşim mantığıyla ilgilenmesini sağlar.
Bu eğitimde, bağımlılık enjeksiyonunun temel kullanımından başlayarak, bileşenler arası veri akışı, durum yönetimi ve performans optimizasyonuna kadar ileri düzey örneklerle öğreneceksiniz. Ayrıca, Angular Lifecycle Hook’ları ve HTTP servisleriyle entegre DI kullanımı gösterilecektir. Eğitim sonunda, Angular projelerinde tekrar kullanılabilir bileşenler oluşturabilecek, DI ile verimli veri yönetimi sağlayabilecek ve uygulama performansını optimize edebileceksiniz.
Temel Örnek
typescriptimport { Injectable, Component } from '@angular/core';
// Basit bir veri servisi
@Injectable({
providedIn: 'root'
})
export class VeriServisi {
private mesaj: string = 'Merhaba Angular Servisinden!';
getMesaj(): string {
return this.mesaj;
}
setMesaj(yeniMesaj: string): void {
this.mesaj = yeniMesaj;
}
}
// Servisi kullanan bileşen
@Component({
selector: 'app-mesaj',
template: ` <div> <h2>{{ mesaj }}</h2> <input [(ngModel)]="yeniMesaj" placeholder="Yeni mesaj yazın" /> <button (click)="mesajiGuncelle()">Mesajı Güncelle</button> </div>
`
})
export class MesajComponent {
mesaj: string = '';
yeniMesaj: string = '';
constructor(private veriServisi: VeriServisi) {
this.mesaj = this.veriServisi.getMesaj();
}
mesajiGuncelle(): void {
this.veriServisi.setMesaj(this.yeniMesaj);
this.mesaj = this.veriServisi.getMesaj();
}
}Bu temel örnekte, VeriServisi bir mesaj durumunu yönetir. @Injectable({ providedIn: 'root' }) dekoratörü, servisin tüm uygulama genelinde tek bir örnek olarak kullanılmasını sağlar. MesajComponent ise constructor aracılığıyla servisi enjekte eder ve Angular bu servisin örneğini otomatik olarak sağlar.
MesajComponent içerisinde [(ngModel)] ve click eventi kullanımı, servis üzerinde yapılan değişikliklerin otomatik olarak bileşenin template’ine yansımasını gösterir. Bu yaklaşım, prop drilling sorununu önler ve bileşenlerin yalnızca UI ile ilgilenmesini sağlar. Ayrıca, DI sayesinde servisleri test etmek de kolaydır; servisler bağımsız olarak mocklanabilir.
Pratik Örnek
typescriptimport { Injectable, Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
// API veri servisi
@Injectable({
providedIn: 'root'
})
export class ApiServisi {
private apiUrl = '[https://jsonplaceholder.typicode.com/posts](https://jsonplaceholder.typicode.com/posts)';
constructor(private http: HttpClient) {}
verileriGetir(): Observable<any> {
return this.http.get(this.apiUrl);
}
}
// API servisini kullanan bileşen
@Component({
selector: 'app-postlar',
template: ` <div *ngIf="postlar.length; else yukleniyor"> <h3>Post Listesi:</h3> <ul> <li *ngFor="let post of postlar">{{ post.title }}</li> </ul> </div> <ng-template #yukleniyor> <p>Veriler yükleniyor...</p> </ng-template>
`
})
export class PostlarComponent implements OnInit {
postlar: any[] = [];
constructor(private apiServisi: ApiServisi) {}
ngOnInit(): void {
this.apiServisi.verileriGetir().subscribe({
next: (data) => (this.postlar = data),
error: (err) => console.error('Veri yükleme hatası', err)
});
}
}Bu ileri seviye örnek, DI’nin API verileri ile birlikte kullanımını gösterir. ApiServisi HttpClient ile verileri çeker ve Observable döndürür. PostlarComponent bu servisi constructor ile enjekte eder ve ngOnInit içinde verileri alır. Template ngFor ve ngIf kullanarak verileri gösterir veya yükleniyor mesajı verir.
Servislerin enjekte edilmesi, bileşenin verinin kaynağıyla ilgilenmemesini sağlar. Lifecycle Hook’ları ve Observables kullanımı, performans optimizasyonu ve hata yönetimi için en iyi uygulamalardır. DI sayesinde bileşenler yeniden kullanılabilir ve test edilebilir hale gelir.
Angular’da Bağımlılık Enjeksiyonu için en iyi uygulamalar: mantığı servislerde tutmak, bileşenleri yalnızca UI ve etkileşimle sınırlandırmak, providedIn kullanarak servis kapsamını belirlemek, constructor ile DI yapmak ve ChangeDetectionStrategy.OnPush ile performansı optimize etmek. Yaygın hatalar: bileşen içinde durum değiştirmek, prop drilling yapmak, Lifecycle Hook’larını ihmal etmek ve bir servisin birden fazla örneğini oluşturmak.
Debug ve optimizasyon için Angular DevTools kullanılabilir. Performansı artırmak için servislerin örneklerini minimumda tutmak, Observable aboneliklerini iptal etmek, Lazy Loading ve OnPush Change Detection uygulanabilir. Güvenlik açısından servislerden gelen veriler doğrulanmalı ve uygulama XSS/CSRF saldırılarına karşı korunmalıdır.
📊 Referans Tablosu
| Angular Element/Concept | Description | Usage Example |
|---|---|---|
| @Injectable | Servislerin enjekte edilebilir olmasını sağlar | @Injectable({ providedIn: 'root' }) |
| Constructor Injection | Bileşenlerde servisleri enjekte etme yöntemi | constructor(private veriServisi: VeriServisi) {} |
| ngOnInit | Bileşen başlatıldığında veri yükleme | ngOnInit(): void { this.verileriYukle(); } |
| HttpClient | HTTP istekleri yapmak için | this.http.get('url').subscribe(data => this.postlar = data) |
| Observable | Asenkron veri akışını yönetmek için | this.apiServisi.verileriGetir().subscribe(postlar => this.postlar = postlar) |
| ChangeDetectionStrategy.OnPush | Render performansını optimize eder | @Component({ changeDetection: ChangeDetectionStrategy.OnPush }) |
Bağımlılık Enjeksiyonu, bileşenlerin modüler, test edilebilir ve sürdürülebilir olmasını sağlar. Servisler ve bileşenler arasında sorumluluk ayrımı, veri tutarlılığını ve performansı artırır. Gelecek adımlar olarak NgRx ile ileri seviye durum yönetimi, Lazy-Loaded modüller, OnPush Change Detection ve ölçeklenebilir mimariyi öğrenmek önerilir. DI ile bileşenleri servislerle entegre ederek, test edilebilirliği ve tekrar kullanılabilirliği artırabilirsiniz. Kaynaklar: Angular resmi dokümantasyonu, GitHub örnekleri ve Angular DevTools.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek