Tarayıcınız JavaScript! desteklememektedir.

Angular JS Data Binding Nedir? Nasil Kullanilir?

Angular JS Data Binding Nedir? Nasil Kullanilir?

Bir önceki makalemizde Angular JS direktiflerinden bahsetmistik.

Ek olarak sunu belirtmek istiyorum;

Angular JS bir JavaScript kütüphanesi oldugu için mutlaka projemize dahil etmemiz gerekiyor. Bunun için çesitli cdn kaynaklarindan ve AngularJS resmi sayfasindan faydalanabilirsiniz.

Angular JS Data Binding kavrami ile baslayalim;

Data Binding deyince aklimiza hemen veri baglama,veriye baglanma gibi islemler gelir, dogru da. Otomatik olarak belirlenen verilerin baglanmasi islemidir.

Her Angular JS uygulamasi ng-app attribute'u ile belirtilir. Onun içerisinde ng-controller attribute'u ile Controller belirtilir ve içerisinde ng-model attribute'u ile Model belirtilir. Içerisinde bind ettigimiz kisim ise View'dir.

Angular JS'de Data Binding islemi One Way Data Binding ve Two Way Data Binding olarak ikiye ayrilir. Bu ikisinin arasindaki tek fark, runtime esnasinda modelden alinan bilginin dinamik olarak bind edilmesidir. Kafamiz karismadan hemen incelemeye baslayalim;

1) One Way Data Binding

One Way Data Binding, adindan da anlasildigi üzere tek yönlü veri baglama islemidir. Uygulama runtime olmadan önce veri baglanir ve baglanan veri gösterilir. Çalisma esnasinda degistirilemez. 

Asagidaki örnegi inceleyelim;

Bind edilecek veri $scope içerisindeki isim degiskeni. Degiskenin aldigi deger "Umut" ve degismesi mümkün degil. Bu islem tek yönlü veri baglama islemi. (One Way Data Binding)

2) Two Way Data Binding

Two Way Data Binding, iki yönlü veri baglama islemine verilen addir. Hem runtime olmadan hemde runtime esnasinda bind edilen degiskenin aldigi deger degistirilebilir. Bundan dolayi iki yönlü veri baglama islemi olarak kabul edilir. One Way Data Binding arasindaki fark budur.

Asagidaki örnegi inceleyelim;

Bind edilecek veri "$scope.isim", runtime olmadan önce kod bölümünde degistirildi, ayni veri inputta ng-model="isim" olarak belirtildigi için, her iki bölümdede degisiklik islemleri gerçeklestirilmis oldu.

Dolayisi ile 2 yönlü olarak veri baglama islemi gerçeklestirilmis oldu.

Örnekler çogaltilabilir, ki çalisirken mutlaka örnek yapmanizi, internetten arastirmanizi tavsiye ederim.

 

 



Bu Makaleye Yapılan Yorum Sayısı : 0

Sende Yaz

Aşağıdaki bölümleri doldurarak bu makaleye yorum yapabilirsin.