Yükleniyor...

Dekoratör Referansı

Dekoratör referansı, Angular uygulama geliştirme sürecinde kritik bir rol oynar ve komponent tabanlı mimarinin temel taşlarından biridir. Dekoratörler, sınıflara, metodlara veya özelliklere meta veriler ekleyerek Angular’ın bileşenleri, direktifleri, pipe’ları ve servisleri yönetmesini sağlar. Bu yapı, modern web uygulamalarında ve SPA’larda bileşenlerin tekrar kullanılabilir, sürdürülebilir ve optimize edilmiş şekilde geliştirilmesine olanak tanır.
Angular’da sık kullanılan dekoratörler arasında @Component, @Directive, @Pipe, @Injectable ve @NgModule bulunur. @Component bir UI bileşeni oluşturur, @Directive DOM manipülasyonu sağlar, @Pipe veri dönüşümleri gerçekleştirir, @Injectable bağımlılık enjeksiyonu için kullanılır ve @NgModule uygulama modüllerini organize eder. Ayrıca @Input ve @Output dekoratörleri, bileşenler arasında veri iletimini kolaylaştırırken @ViewChild ve @ContentChild, şablon ve içerik erişimini yönetir.
Bu referans, okuyucuya dekoratörlerin nasıl doğru ve verimli kullanılacağını öğretir, prop drilling ve gereksiz yeniden render gibi yaygın hatalardan kaçınmayı sağlar. Ayrıca veri akışı, state yönetimi ve lifecycle hook’larının etkin kullanımını göstererek Angular projelerinde yüksek performanslı ve bakımı kolay uygulamalar geliştirmeyi mümkün kılar.

Temel Örnek

typescript
TYPESCRIPT Code 
import { Component, Input } from '@angular/core';

@Component({
selector: 'app-user-card',
template: `     <div class="card">       <h2>{{ name }}</h2>       <p>Yaş: {{ age }}</p>     </div>
`,
styles: [`     .card {
padding: 16px;
border-radius: 8px;
background-color: #f5f5f5;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
text-align: center;
}
`]
})
export class UserCardComponent {
@Input() name!: string;
@Input() age!: number;
}

Yukarıdaki örnekte, @Component dekoratörü UserCardComponent sınıfını Angular bileşeni haline getirir. selector, HTML şablonunda bileşenin kullanılacağı etiketi belirtir; template ve styles ise görsel sunumu yönetir. @Input dekoratörleri, bileşenlerin ebeveynlerinden veri almasını sağlar ve prop drilling ihtiyacını ortadan kaldırır.
Angular, lifecycle hook’ları sayesinde bileşenin başlatılması, render edilmesi ve yok edilmesini otomatik yönetir. @Input ile işaretlenmiş özelliklerdeki değişiklikler, DOM’a otomatik yansır ve gereksiz yeniden render işlemleri engellenir. Bu örnek, dekoratörlerin veri akışı ve state yönetimini nasıl kolaylaştırdığını ve gerçek projelerde tekrar kullanılabilir bileşenler oluşturmayı nasıl desteklediğini gösterir.

Pratik Örnek

typescript
TYPESCRIPT Code 
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
selector: 'app-counter',
template: `     <div class="counter">       <h3>Sayaç: {{ count }}</h3>       <button (click)="increment()">+</button>       <button (click)="decrement()">-</button>     </div>
`,
styles: [`     .counter {
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
}
`]
})
export class CounterComponent {
@Input() count: number = 0;
@Output() countChange = new EventEmitter<number>();

increment() {
this.count++;
this.countChange.emit(this.count);
}

decrement() {
this.count--;
this.countChange.emit(this.count);
}
}

Advanced Angular Implementation

typescript
TYPESCRIPT Code 
import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';

@Component({
selector: 'app-smart-counter',
template: `     <div class="smart-counter">       <h3>Akıllı Sayaç: {{ value }}</h3>       <button (click)="increase()">+</button>       <button (click)="decrease()">-</button>     </div>
`,
styles: [`     .smart-counter {
background-color: #e0f7fa;
padding: 16px;
border-radius: 12px;
text-align: center;
}
`]
})
export class SmartCounterComponent implements OnInit, OnChanges {
@Input() value: number = 0;
@Output() valueChange = new EventEmitter<number>();

ngOnInit() {
console.log('SmartCounter başlatıldı, değer:', this.value);
}

ngOnChanges(changes: SimpleChanges) {
if (changes['value']) {
console.log('Değer değişti:', changes['value'].currentValue);
}
}

increase() {
this.value++;
this.valueChange.emit(this.value);
}

decrease() {
this.value--;
this.valueChange.emit(this.value);
}
}

SmartCounterComponent örneği, @Input, @Output ve lifecycle hook’ları olan OnInit ile OnChanges’i bir araya getirir. Bu yapı, state yönetimi ve veri akışının optimize edilmesini sağlar. Dekoratörler, bileşenlerin tekrar kullanılabilir olmasına ve gereksiz re-render işlemlerinin önlenmesine yardımcı olur. Gerçek projelerde bu yaklaşım, performanslı ve sürdürülebilir Angular uygulamaları geliştirmek için temel bir stratejidir.

En iyi uygulamalar, sadece gerekli veriler için @Input kullanmayı ve olaylar için @Output tanımlamayı içerir. State mutasyonlarından kaçınmak ve gereksiz prop drilling’i engellemek önemlidir. Performans optimizasyonu için ChangeDetectionStrategy.OnPush önerilir. Angular DevTools ile lifecycle ve EventEmitter yönetimi izlenebilir. Dekoratörlerin doğru kullanımı, güvenli, hızlı ve ölçeklenebilir Angular uygulamaları sağlar.

📊 Kapsamlı Referans

Angular Element/Method Description Syntax Example Notes
@Component Bileşen tanımlar @Component({...}) @Component({ selector:'app-demo', template:'...' }) Ana dekoratör
@Directive Direktif oluşturur @Directive({...}) @Directive({ selector:'[highlight]' }) DOM manipülasyonu
@Pipe Veri dönüştürür @Pipe({...}) @Pipe({name:'capitalize'}) Şablon veri dönüşümü
@NgModule Modül tanımlar @NgModule({...}) @NgModule({ declarations:[], imports:[] }) Uygulama modülleri
@Injectable DI için @Injectable({...}) @Injectable({ providedIn:'root' }) Bağımlılık enjeksiyonu
@Input Veri alır @Input() prop:type @Input() title:string Ebeveynden veri
@Output Olay gönderir @Output() event=new EventEmitter() @Output() clicked=new EventEmitter() Bileşenler arası iletişim
@HostListener DOM eventi dinler @HostListener('click') handler(){} @HostListener('window:scroll') onScroll() Etkinlik bağlama
@ViewChild Çocuk elemente erişim @ViewChild(ChildComponent) child!:ChildComponent Bileşen içi erişim
@ContentChild Projeksiyon içeriği @ContentChild(TemplateRef) tpl!:TemplateRef İçerik yönetimi
@HostBinding DOM property bağlama @HostBinding('class.active') isActive=true Dinamik sınıf/özellik

📊 Complete Angular Properties Reference

Property Values Default Description Angular Support
selector string none Bileşen seçici tüm sürümler
template string none Bileşen şablonu 2+
styles array string[] none CSS stilleri
providers array [] DI sağlayıcıları 2+
inputs array [] @Input listesi 4+
outputs array [] @Output listesi 4+
animations array [] Bileşen animasyonları 4+
changeDetection string 'Default' Change Detection stratejisi 5+
encapsulation string 'Emulated' CSS kapsülleme 2+
standalone boolean false Bağımsız bileşen 14+
imports array [] Modül importları 14+
schemas array [] Özel element izinleri 9+

Dekoratör referansını anlamak, yeniden kullanılabilir ve optimize edilmiş bileşenler geliştirmeyi sağlar. Veri akışı, state yönetimi ve lifecycle hook’larını kavramak, performanslı ve sürdürülebilir Angular uygulamalarının temelidir. İleri seviye konular olarak Dependency Injection, lifecycle hook’ları, Change Detection ve RxJS ile asenkron veri yönetimi üzerine çalışmak önerilir.

İlgili Arama Terimleri

Kullanıcılar bu içeriği bu terimlerle de araştırıyor:

Angular dekoratörleri dekoratör referansı Angular @Component Angular örnek Angular veri binding lifecycle hook Angular Angular bileşen geliştirme state yönetimi Angular performans optimizasyon Angular @Input @Output Angular Angular SPA geliştirme Angular DevTools kullanımı ileri seviye Angular bileşenler EventEmitter Angular ChangeDetection Angular Angular en iyi uygulamalar

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
3
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 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
Konu 1 / 1
Angular Ders