Tarayıcınız JavaScript! desteklememektedir.

Angular JS Expressions

Bir önceki makalemizde Angular JS Data Binding konusuna deginmistik.

Sira Angular Expressions'lara geldi. Daha önce  {{ }} küme parantezleri arasinda ya da ng-bind attribute'u ile bind ettigimiz verilerin kullanimini biraz daha detayli inceleme firsati bulacagiz.

Expressionslar(Ifadeler) her dil için farklilik gösterir. Ki Angular JS'in en çok karsilastirildigi jQuery ile bu konuda ciddi anlamda farkliliklari var. Bu arada dipnot olarak sunu belirtmekte fayda var, Angular ile jQuery'nin karsilastirilmasini dogru bulmuyorum. Her ikisinin de kullanildigi farkli alanlar var. Yaptiklari isleri düsünürsek birbirinden tamamen bagimsiz degiller; Ancak ikisininde ayni anda kullanildigi projeler fazlasiyla mevcut. Angular JS 2 TypeScript ile birlikte kullanilinca, jQuery TypeScript için library hazirladi. Yazilim ortaminda front-end back-end farketmeksizin, projemiz için en dogru teknolojiyi kullanmamiz, herhangi bir teknolojinin fanatikligini yapmaktan çok daha faydali diye düsünüyorum. Neyse lafi fazla uzatmadan Expressions'lara geçelim artik :)

Angular JS'i cazip kilan kullanimlardan biri oldugunu söylersek, yanlis birsey söylemis olmayiz diye düsünüyorum.

{{ }} küme parantezleri ve ng-bind attribute'u veri bind etmek için kullandigimiz arkadaslar. Bunlarla yalnizca string ifade yazdirmiyoruz, matematiksel, tarihsel islemler yapabiliyor, hatta angular table'lar olusturarak filtreleme islemleri dahi yaptirabiliyoruz. 

Örnegin, One Way Data Binding kullanarak belirttigimiz 2 sayiyi toplayan basit bir uygulama yazalim.

Yukaridaki örnegi inceledigimizde yeni bir direktifle tanisiyoruz. (ng-click) Angular JS olay tetikleme mantigi ile çalisan bir framework. $scope içerisindeki topla fonksiyonunu önce tanimlayip sonrasinda button'un click olayinda çagiriyoruz. 

Burada dikkat etmemiz gereken en önemli nokta su;

Angular JS'in bütün direktiflerinin basinda ng- yer alir. Yani button'un click olayinda ng-click degil de click attribute'unu kullanmis olsaydik, çalismayacakti!

Bu islem One Way Data Binding ile yapildi. Bir de aynisini Two Way Data Binding ile yapalim.

Dikkat etmemiz gereken en önemli nokta $scope alanlari. Eger $scope alaninin içerisinde degilse bind etmek istedigimiz degisken, uygulama çalismaz.

Bir örnek daha;