AngularJS Gone Wild Day:3

Tahmini Okuma Süresi: 11 dakika

Misko sahaya üçlü çektir js camiasına

Bu yazıda serinin ikincisinde de yaptığım gibi kod blokları ile angularJS kavramlarını örneklendirmeye devam edeceğim. AngularJS’in tarihçesi hakkında birşeyler araştırmaya çalıştığımda karşıma gelen isim Misko Hevery. Misko kimmiş neymiş diye araştırıyım dediğimde ise ufak bir hayal kırıklığı olmadı değil. Linkedin profilinde yazılmış olan “i worked with Misko together falan filan project, he is bottom of man bla bla” şeklinde bir sürü referans yazısı beklerken tamamlanmamış bir profil ile karşılaştım. Adam “king” illa ki bir başarı hikayesi yazılmıştır hakkında derken yine umduğumu bulamadım. Bu soru işaretleri ile ekşisözlük’te “Angular’ın aslında o kadar da angular olmaması, Misko’nun abartılmış bir balon olması” şeklinde linç başlıkları var mı dedim, o da yok… Görünen o ki kendi halinde bir yazılımcı abimiz. Stackoverflow reputation’ına bakarak community katkısı olan bir vatandaş diyebilirim.

Misko Hevery - Stack Overflow

Google’a kapağı atmasından mütevellit tipik beyaz yakalı demek hakaret olur. “20k$ kendi alsa eşi de(evli mi bilmiyorum) 15k$ alsa sığlığıyla” angularjs tarihçesi girişimimi sonlandırıp angularJS ile ilgili aktarımlarıma devam edeyim. 

ng-repeat

Asp.net ile uğraşmış olanlarınız “repeater” kontrolünü hatırlayacaktır. Repeater kontrolü veri kümelerinin çıktı haline dönüşmesini sağlamak amacıyla tasarlanmış objedir. Bu veri kümeleri xml, data table, generic list, array, datalist vs olabilir. Repeater içerisinde tanımlanan template ile ön yüzde ifade edilir. İşte bu yapının angular tarafındaki karşılığı ng-repeat, iteratif yapıdaki veri modellerini view tarafında işleyen directive diyebiliriz. Bir önceki yazıda bahsetmiş olduğum ng-init directive’i ile uygulamada bir dizi listesi tanımlayıp bu listeyi  ng-repeat yardımıyla görüntülemek mümkündür.

Kodun ul ile başlayan kısmında statik bir tanımlama yapsaydık:

 Yukarıdaki gibi her bir liste elemanını yazmamız gerekirdi. Bunun yerine ng-init ile tanımlanan heroes dizisini ng-repeat içerisinde kullanıp listenin her bir elemanı için bir  {{hero}} expression’ı ile görüntülemek mümkündür. ng-repeat içerisinde scope’da tanımlanmış herhangi bir listeyi de bağlamak mümkündür.

ng-controller

Javascript fonksiyonlarının tanımlanıp, model ile view arasında veri akışını sağlayan directive’dir. Controller kullanımı için önerilen yöntem her controller’ın tek bir iş mantığını icra ediyor olmasıdır. Controller içerisinde yapılacak olan işleme göre built-in servisleri veyahut geliştiricinin kendi yazdığı servisleri “dependency injection” ile kullanmak iyi bir metottur.  Aşağıdaki koda baktığımızda mainCtrl isimli controller’ın testApp isimli uygulamaya tanımlandığı görülmektedir. Controller methodunun parametrelerine bakacak olursak ilk string literal’i controller ismini ifade ediyor. İkinci parametre olan anonim javascript methodu ise controller’ın iş mantığını icra ettiği alan. Anonim fonksiyonun almış olduğu $scope değişkenine dikkat edelim. Bu $scope değişkeni mainCtrl çağrıldığı zaman angular tarafından oluşturulan, controller ile view arasında veri bağlama işini yapacak olan objedir. Uygulamalarda birçok view olacağını düşünürsek birçok da controller olacaktır. Basit bir örnek için script tag’leri arasında implicit olarak tanımlayabileceğimiz controller’ların, sayısı arttığında explicit olarak tanımlanması daha doğru olacaktır. Projenin fiziksel dosya yapısının karmaşasının azaltmak adını bir takım yöntemler kullanılabilir. Bu konu “AngularJS Directory Structure” olarak karşınıza çıkacaktır. Bu konu ile ilgili linkte verdiğim yazıyı inceleyebilirsiniz: AngularJs Directory Structure

ng-click

Bir diğer sık kullanılan directive ng-click, scope içerisinde yazılan method’ların tıklanabilir tüm HTML elementlerine bağlanabilmesini sağlamaktadır.

Yukarıdaki kod bloğunu incelediğimizde eklenen button’a ng-click directive’i eklenerek, ShowMessage() methodunun çağrılması sağlanmıştır. ShowMethod’u bir parametre almaktadır. TextBox’a girilen bilgiyi model tarafında anlamlandırabilmek için ng-model=”message” ataması yapılmıştır. Bu message değişkeni de methoda parametre olarak verilerek controller’a taşınmıştır. View tarafında çağırmak istenilen ShowMessage fonksiyonu $scope.ShowMessage ile tanımlanarak methodun gövdesi anonim bir method ile icra edilmiştir. Bu kod parçası çalıştığında aşağıdaki bir çıktı üretiliyor.

ng-click demo

ng-show & ng-hide

ng-show ve ng-hide directive’leri benzer işleri yapmakta. Aralarındaki fark expression değerinin ters çalışması. Yani ng-show=true iken bir form sayfada görünürken, ng-hide=true ise görünmez.  Aşağıdaki örnekte form objesine ng-show directive’i eklenmiştir. İki tane de button eklenerek click event’iyle scope değişkeni olan showForm’un değerini değiştirerek formun görünürlüğü değiştirilmekte. ng-hide kullanmak için ya form içerisinde ng-hide=”‘!showForm” ataması yapmak gerekir. Yahut methodların içerisinde true-false atamalarının yerleri değiştirilmedir.

Yukardaki kod bloğu çalıştırıldığında ortaya şu şekilde bir görüntü ortaya  çıkıyor.

ng-show

Son Tahlil

Bu yazıda sık kullanılan angularJS directive’lerinden bahsedip, kod blokları ile örneklendirdim. Hemen hemen her angularJS uygulamasında kullanılacak olan bu kavramların pekiştirilmesi önemlidir.

tl;dr

 

  • ng-repeat: Liste şeklindeki verinin dom elementlerine bağlanabilmesini sağlayan directive
  • ng-show: DOM elementlerinin görünürlüğünün değiştirilmesi ile ilgili directive
  • ng-hide: DOM elementlerinin görünürlüğünün değiştirilmesi ile ilgili direvtive
  • ng-controller: view kısmına javascript objelerinin taşınmasını sağlayan directive.
  • ng-click: Tıklanabilir özellikli html elementlerine event bağlamayı sağlayan directive.

Bir sonraki yazıda angularJS objelerini tanıtmaya ve örneklendirmeye devam edeceğim. Sonraki yazıda görüşmek dileğiyle.

Leave a Reply

Your email address will not be published. Required fields are marked *