31 Ekim 2013 Perşembe

AngularJS - Data Binding

Data binding, AngularJS'in öne çıkan özelliklerinden biridir. İki tür data binding yaklaşımı vardır:

  1. One-way data binding: Klasik template(ek markup ve directive'leri içeren, derlenmemiş HTML) sistemlerinde bu data binding türü kullanılmaktadır. Modelinizde yaptığınız bir değişikliğin sayfanızda da görünür kılınması için; gerekli senkronizasyon kodunu kendiniz yazmanız gerekir.
  2. Two-way data binding: Angular template sistemlerinde bu data binding türü kullanılmaktadır. Sayfanızda veya modelinizden herhangi birinde yaptığınız değişiklik diğerinde görünür olacaktır. Ekstra kod yazmadan Angular bu işi bizim yerimize nasıl yapıyor peki? Bunu yapmak için, modelinizin bir önceki değerini saklıyor ve modelde herhangi bir değişiklik yapıldığında, ilgili nesnenin change event'ini çağırıyor. Bu karşılaştırma basit bir "dirty-checking"dir ve bu işi Angular bizim için yürütüyor.
Data binding örneği:
Ön koşullar:
1. http://angularjs.org/'dan AngularJS'in minified sürümünü indirin.
2. İndirdiğiniz .js dosyası ile aynı dizinde bir html dosyası oluşturun ve örnekteki içeriği bu html sayfasına kopyalayıp test edin.
<html ng-app>
    
        
        Angular Test Page
        
    
    
        

Selam {{ name }}

</html>
Tabi tüm bu adımlarla uğraşmadan, html üzerinde oynama yapmak istiyorsanız, benzer kodda Plunker üzerinde burada çalışabilirsiniz.
Kodu inceleyecek olursak; hmtl etiketindeki ng-app directive'i, bu html'in bir Angular uygulaması olduğunu ifade ediyor ve auto bootstrap sağlıyor. Angular directive'leri ile ilgili daha sonra ayrıntılı yazacağım. ng-model="name" ise; ilgili input nesnesine property olarak "name" ismini veriyor. Artık bu model ismini(name) html içerisinde kullanan her nesne, bu model üzerinde yapılacak değişiklikten haberdar olacaktır. {{name}} kullanımı ile, "name" ismindeki model içeriğini html sayfamıza gömüyoruz. Angular'da data-binding {{model ismi}} şeklinde yapılır.
Aynı işi jQuery kullanarak yapmak için; html içerisinde bir script bloğu içerisinde, input nesnesine eriştikten sonra ona bir listener eklememiz gerekecekti. Angular kullanarak bu işi ne kadar kolay ve okunaklı bir şekilde yapıldığını test edebilirsiniz.

3 yorum:

Uğur Öztekin dedi ki...

süper anlatmışsın dostum işte bu ya.. sade, açıklaya açıklaya.. çok teşekkürler..

Cem Sönmez dedi ki...

umarim faydali olmustur, ben tesekkur ederim.

Cem Sönmez dedi ki...
Bu yorum yazar tarafından silindi.