Pipe’ler Genel Bakış
Angular’da pipe’ler, verilerin bileşen şablonlarında dönüştürülmesi ve biçimlendirilmesi için kullanılan güçlü araçlardır. Pipe’ler, bileşenlerin durumunu değiştirmeden verileri dönüştürmeye olanak sağlar ve uygulama mantığı ile sunum mantığını birbirinden ayırarak kodun okunabilirliğini ve sürdürülebilirliğini artırır. Pipe’ler, yerleşik (built-in) veya özel (custom) olarak kullanılabilir ve saf (pure) veya saf olmayan (impure) olarak sınıflandırılabilir; bu sınıflandırma pipe’in yaşam döngüsü ve performans üzerindeki etkisini belirler.
Pipe’ler Genel Bakış, Angular geliştirme sürecinde veri akışı, durum yönetimi ve bileşen yaşam döngüsü ile entegrasyonu anlamak için kritik bir konudur. Doğru şekilde kullanıldığında, pipe’ler gereksiz yeniden render işlemlerini önler, prop drilling sorunlarını azaltır ve uygulamaların performansını optimize eder. Bu eğitimde, hem temel hem de ileri seviye örneklerle pipe’lerin oluşturulması, uygulanması ve Angular projelerinde gerçek dünya senaryolarına entegrasyonu gösterilecektir. Ayrıca, yaygın hatalar ve performans optimizasyonları da ele alınacaktır. Öğrenenler, pipe’lerin pratik kullanımını, bileşenler arası veri yönetimini ve performans odaklı Angular geliştirme stratejilerini kavrayacaktır.
Temel Örnek
typescriptimport { Component, Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'uppercaseText' })
export class UppercaseTextPipe implements PipeTransform {
transform(value: string): string {
return value.toUpperCase();
}
}
@Component({
selector: 'app-pipe-demo',
template: ` <h2>Temel Pipe Örneği</h2> <p>Orijinal Metin: {{ text }}</p> <p>Dönüştürülmüş Metin: {{ text | uppercaseText }}</p>
`
})
export class PipeDemoComponent {
text: string = 'Angular öğreniyorum';
}Bu temel örnekte, UppercaseTextPipe adlı özel bir pipe tanımlanmıştır. PipeTransform arayüzünü implemente ederek transform() metodunu kullanır ve aldığı string değeri büyük harfe çevirir. Şablonda, pipe “|” operatörü ile uygulanmıştır. Bu sayede text değişkeni, bileşenin durumunu değiştirmeden görüntülenir.
Bu yaklaşım Angular’ın en iyi uygulamalarını takip eder: dönüşüm mantığı bileşenden ayrılmıştır, böylece yeniden kullanım kolaylaşır ve bakım kolaylığı sağlanır. Pipe saf (pure) olarak tanımlandığı için yalnızca giriş değeri değiştiğinde yeniden hesaplanır, gereksiz yeniden render işlemlerini önler. Örnek, pipe’lerin durum yönetimi ve bileşen yaşam döngüsü ile entegrasyonunu açık bir şekilde göstermektedir.
Pratik Örnek
typescriptimport { Component, Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'filterItems' })
export class FilterItemsPipe implements PipeTransform {
transform(items: string[], searchTerm: string): string[] {
if (!items || !searchTerm) return items;
return items.filter(item => item.toLowerCase().includes(searchTerm.toLowerCase()));
}
}
@Component({
selector: 'app-advanced-pipe-demo',
template: ` <h2>Liste Filtreleme Örneği</h2> <input [(ngModel)]="searchTerm" placeholder="Arama terimi girin"> <ul> <li *ngFor="let item of items | filterItems:searchTerm">{{ item }}</li> </ul>
`
})
export class AdvancedPipeDemoComponent {
items: string[] = ['Elma', 'Portakal', 'Muz', 'Üzüm', 'Armut'];
searchTerm: string = '';
}İleri seviye örnekte, FilterItemsPipe kullanıcı tarafından girilen arama terimine göre bir dizi stringi filtreler. Pipe, dizi ve arama terimini alır ve sadece eşleşen öğeleri döndürür. ngModel ile çift yönlü veri bağlama kullanılarak bileşenin durumu gerçek zamanlı olarak güncellenir. Pipe saf (pure) olarak tanımlandığı için performans optimize edilir ve yalnızca giriş değiştiğinde yeniden hesaplanır.
Bu yaklaşım büyük uygulamalarda modülerlik, yeniden kullanılabilirlik ve veri tutarlılığı sağlar. Dönüşüm mantığı bileşenden ayrılmıştır ve yaşam döngüsü ile entegrasyonu sağlamdır.
Pipe’ler için en iyi uygulamalar: saf pipe kullanarak performansı optimize edin, dönüşüm mantığını bileşenden ayırın ve pipe içinde doğrudan durum değişikliği yapmayın. Yaygın hatalar arasında gereksiz yeniden render ve prop drilling sorunları vardır. Angular DevTools ile pipe giriş ve çıkış değerlerini izleyin. Ağır hesaplamaları transform() içinde yapmaktan kaçının ve giriş verilerini doğrulayın. Bu yöntemlerle Angular SPA’larda pipe kullanımı güvenli, verimli ve sürdürülebilir olur.
📊 Referans Tablosu
| Angular Element/Concept | Description | Usage Example |
|---|---|---|
| Pipe | Bileşen durumunu değiştirmeden verileri şablonda dönüştürür | {{ text |
| Saf (Pure) Pipe | Sadece giriş değiştiğinde çalışır | @Pipe({ name: 'filterItems', pure: true }) |
| Özel Pipe | Kendi dönüşüm mantığınızı uygular | class FilterItemsPipe implements PipeTransform |
| Async Pipe | Observable veya Promise gibi asenkron verileri işler | {{ observableData |
| Yerleşik Pipe | Angular’ın hazır pipe’leri, örn: DatePipe, CurrencyPipe | {{ today |
Özet ve sonraki adımlar: Pipe’ler, verilerin etkili bir şekilde gösterilmesini, dönüşüm mantığının kapsüllenmesini ve bileşen bakımının kolaylaştırılmasını sağlar. Veri akışı ve durum yönetimi ile uyumlu olarak, Angular bileşenlerinin yaşam döngüsü ile entegre çalışır.
Bir sonraki adımlar olarak, saf olmayan (impure) pipe’leri, Async Pipe ile Observables/Promises kullanımını ve şablonlarda birden fazla pipe kombinasyonunu öğrenmek faydalıdır. Özel pipe’lerin birden fazla bileşende kullanımı performans ve yeniden kullanım açısından kritik öneme sahiptir.
🧠 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