Angular’da Binding İşlemleri

Angular güçlü bir SPA(single page application) framework’üdür. Çünkü Angular ile geliştirilen web sayfaları sürekli yüklenmeden, Angular’ın sahip olduğu özellikler sayesinde sayfadaki elementler değiştirilerek sayfa güncel tutulur. Bu desteği sağlayan en önemli yapısı component’lerdir. Çünkü component’ler kendi aralarında haberleşerek sayfayı sürekli güncel tutarlar. İşte bu haberleşme yöntemlerinden en önemli ve en güçlü olanı binding işlemidir.

Angular’da binding, uygulama içirisinde veri akışını yönetmenin temel bir yoludur. Binding, component’ler arasında veri akışını sağlamak için kullanılan bir mekanizmadır. Bu mekanizma sayesinde component’ler arasında veri değişiklikleri otomatik olarak senkronize edilir. Kullanıcı arayüzünde gerçek zamanlı güncellemeler sağlanır. Angular’da birden fazla türde binding bulunmaktadır. Ve her biri farklı senaryolara uygun olarak kullanılabilir. Bu makalede Angular’da kullanılan farklı binding türlerini, nasıl kullanılacaklarını ve hangi durumlarda tercih edileceklerini detaylı olarak ele alacağız.

Binding, kullanıcı arayüzünün bir kısmı(DOM öğesi, directive veya component) ile model (component sınıfının bir örneği ) arasında canlı bir bağlantı oluşturur. Bu bağlantı, kullanıcı arayüzünü ile modeli senkronize eder. Arayüzde bir olay(event) veya kullanıcı eylemi gerçekleştiğinde modeli bilgilendirir. Yada her ikisini birden yapmak için kullanılabilir. Angular’ın ‘change-detection’ algoritması, sürekli arayüzü ve modeli birbiri ile senkronize eder.

Angular’da binding türleri şunlardır:

• Text interpolations
• Property binding
• Event binding
• Two-way binding

Şimdi bunlara tek tek bakalım.

Text Interpolations:

Angular’da template ifadeleri(expression) aynı JavaScript ifadelerine benzer. Aşağıdaki istisnalar dışında, çoğu JavaScript ifadesi geçerli template ifadeleridir. Angular template’lerinde string interpolation uygulamak için “{{ expression }}” iç içe iki tane süslü parantez kullanılır. Bu parantezlerin içine yazılan JavaScript ifadelerinin sonuçları derleyici tarafından arayüze yansıtılır. Buradaki binding olayı tek yönlü(one-way) component sınıf örneğinden arayüze doğru gerçekleşmektedir.

Örnek: Component sınıfının elemanı olan “currentCustomer” string tipinde bir değer tutuyor. Bu değeri string interpolation ile arayüzde gösteriliyor.

/* app.componenet.ts */
currentCustomer = 'İsmail'; // Component sınıfında bir eleman

<!--app.component.html-->
<h3>Current customer: {{ currentCustomer }}</h3>

Text interpolation’da bazı JavaScript ifadeleri kullanılabiliyorken, aşağıdaki opertörler kullanılamaz.

• Atama operatörleri (=, +=, -=, ...)
• new, typeof, veya instanceof gibi operatörler
• İfade sonlandırıcılar; veya ,
• Artırma ve azaltma operatörleri ++ and --
• Bazı ES2015+ operatörleri

Property Bindings:

Angular’da property binding, HTML öğelerinin veya directive’lerinin özelliklerine ilişkin değerleri ayarlanmasına yardımcı olur. Aşağıdaki örnekte <img> etiketinin “src” property’sine “imgUrl” değişkeni bind edilmiştir. Buradaki binding olayı tek yönlü(one-way) component sınıf örneğinden arayüze doğru gerçekleşmektedir.

/* app.componenet.ts */

// Component sınıfında bir değişken
imgUrl= 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Mimus_polyglottos1.jpg/220px-Mimus_polyglottos1.jpg'; 

<!--app.component.html-->
<img [src]="imgUrl"> // imgUrl Component sınıfının içindeki değişken
<app-item-detail childItem="parentItem"></app-item-detail> // childItem property'sine direk string değer verilmiş.

Event Bindings:

Event binding, klavye girişleri, fare hareketleri, tıklamalar ve dokunmalar gibi kullanıcı eylemlerinin dinlenmesine ve bu olaylardan sonra işlem yapılmasına olanak tanır. Aşağıdaki örnekte bir “button” ve bu buton’un tıklama olayına ilişkili bağlanmış metot gösterilmektedir. Buradaki binding olayı tek yönlü(one-way) arayüzden component sınıf örneğine doğru gerçekleşmektedir.

/* app.componenet.ts */

onSave() // Component sınıfında bir metot
{
  console.log('kaydedildi');
}

<!--app.component.html-->

<!-- buradaki (click) tıklama olayını ifade eder.
 onSave() Component sınıfındaki metodu işaret eder. -->
<button (click)="onSave()">Save</button>

Two-Way Binding:

Angular two-way binding ile hem component sınıf örneğinden arayüze, hemde arayüzden component sınıf örneğine doğru veri akışı gerçekleştirir. Bunun içinde hem “property-binding” hemde “event-binding” aynı anda kullanılır. Yani, “property-binding” + “event-binding” = “two-way-binding” dir. Bunun içinde template içerisinde köşeli parantez içerisinde normal parantezler “[( event )]” ile bir olay bir değişkene bağlanır. Burada değişiklik nerede olursa olsun iki tarafa birden yansıtılır.

/* app.componenet.ts */

sayi=15 // Component sınıfında bir değişken

<!--app.component.html -->

<!-- buradaki (ngModel) 2 yönlü haberleşmeyi sağlayan model.
     sayi Component sınıfındaki değişkeni ifade eder. -->
<input [(ngModel)]="sayi" />

Eğer bir component ile iki yönlü haberleşme yapılacaksa, öncelikle o component içerisinde herhangi bir isimle bir “data-bound property” olan “@Input” tanımlanır. Daha sonra o isim ile “isimChange” olacak şekilde bir “data-bound property” olan “@Output” event emitter tanımlanır. Artık component iki yönlü haberleşmeye hazırdır. Aşağıdaki örneği inceleyebilirsiniz.

/* sizer.componenet.ts */

export class SizerComponent {

  @Input()  size: number | string;
  @Output() sizeChange = new EventEmitter<number>();

  dec() { this.resize(-1); }
  inc() { this.resize(+1); }

  resize(delta: number) {
    this.size = Math.min(40, Math.max(8, +this.size + delta));
    this.sizeChange.emit(this.size);
  }
}

<!--app.component.html-->

<!-- buradaki 'size' 2 yönlü haberleşmeyi sağlayan @Input'un adıdır.
     fontSizePx ise içinde çağırdığımız Component sınıfının elemaıdır. -->
<app-sizer [(size)]="fontSizePx"></app-sizer>

Angular binding, Angular uygulamalarının en temel, en güçlü özelliklerinden biridir. Uygulama geliştiricilerine yardımcı olan güçlü bir araçtır. Bu makalede, Angular’da binding kavramını anlamak için temel prensipleri inceledik. Veri bağlama yöntemlerinin çeşitliliği, Angular uygulamalarının dinamik ve etkileşimli olmasını sağlar. Bir veriyi component’ler arasında iletmek veya kullanıcı arayüzünü veri değişikliklerine göre güncellemek için farklı binding yöntemlerini kullanabilirsiniz.

Yazıyı, yeni başlayanlar veya İngilizcesi yeterli olmayanlar için mümkün olduğunca anlaşılır bir şekilde yazmaya çalıştım. Umarım faydalı olmuştur. Aklınıza takılan herhangi bir soruyu çekinmeden yorumlarda sorabilirsiniz.

Yaralanılan Kaynaklar:

Angular