AngularJS’ in başlangıç konusu data binding, türkçesiyle veriyi bağlamak. Bu konumuzda hem AngularJS’ i sıfırdan projemize dahil etmeyi, hemde data binding’ i işleyeceğiz. Fakat bundan önce isterseniz AngularJS’ in ana konseptini anlattığım http://angulartr.com/angular-baslangic/ AngularJS Başlangıç konumuzuda göz atabilirsiniz. 

“AngularJS’ i projemize dahil etmek”

  • Öncelikle boş bir HTML dosyası açıyoruz.
  • Head etiketinin içine aşağıdaki satırı ekliyoruz

    Farkettiyseniz, AngularJS Framework’ ünü Google’ ın kendi arşivinden ekledim. Siz isterseniz projenizin klasörüne indirip, yolunu verebilirsiniz.
  • HTML etiketime ng-app attribute(özellik) ekliyorum.

    Ve HTML dosyamın şuanki hali aşağıdaki gibi oluyor.

    Meraklıların Dikkatine : AngularJS’ i araştırken herhangi bazı uygulamaları incelemiş olabilirsiniz. Ve ng-app attribute’ ünün içine isim yazdığını görmüş olabilirsiniz. Burda niye yok demeyin. Henüz uygulamamızda controller vb. katmanları oluşturmadığımız için, uygulamamıza bir isim vermeye ihtiyacımız yok. Ama ileriki konularda bu isimlendirmeyi yapacağız.
  • Artık uygulamamızda AngularJS çalışabilir halde. Şimdi data bind yapmaya başlayabiliriz.

 

“AngularJS ile data binding”

AngularJS‘ te data binding yapmanın birkaç yolu var. Fakat bunları incelemeden önce, bağlayacağımız datayı elde etmemiz gerekiyor 🙂 Bunun için AngularJS’ in model katmanına ufaktan gireceğiz. Aslında model katmanını başlı başına bir konu olarak anlatıcam, ama hiç bilmesiniz bile burdaki örnekte anlayacaksınız.

Süslü parantez curly braces ile data bind

  • Sayfamıza bir input ekliyoruz ve ng-model attribute’ ünede, bu input’ un değerine erişmekte kullanacağımız bir isim ekliyoruz.
  • Alt satırına da aşağıdaki gibi p elementi ekliyoruz ve içinde süslü parantezler içinde, değerini basmak istediğimiz modelin ismini yazıyoruz.
  • Artık input’ a yazdığımız herşey anında, p elementinin içine basılacak. Bunu hemen aşağıya koyduğum widget ile deneyebilirsiniz. Output’ a bakın.


AngularJS Öğreniyorum on jsbin.com

Süslü parantezler içine yazdığımız şey aslında bir expression yani süslü parantezler içinde sınırlı olarak javascript işlemleri de yapabiliyoruz. Eğer sadece model ismi yazarsak, modeli basıyor ama 2 + 2 yi toplama gibi işlemlerde yapabiliriz. Aşağıdaki örneğini paylaştım.

AngularJS Öğreniyorum on jsbin.com

 

ng-bind attribute’ ü ile data-bind

Yukarıda data bind işlemini süslü parantezler ile yapmayı gördük. Lakin ng-bind ile yapmak daha performanslı ve işe yarardır.

Neden ?

Çünkü AngularJS ile yaptığınız uygulamayı internete koyduğunuzda, tüm dosyalar serverdan yüklenecek ve dolayısıyla yüklenmesi birkaç saniye zaman alabilecektir. Halbuki bilgisayarınıda direk diskten okuduğu için farkedemiyorsunuz bile. İşte Framework js dosyası serverdan yüklenmeyi beklerken ki geçen zamanda, sayfanızdaki tüm data bind yapılan yerlerde süslü parantezler görülecektir. Bu da kimi zaman çirkin bir görüntü olabiliyor. Halbuki ng-bind ile data bind yaparsanız, HTML’ de attribute’ e verilen değer sayfada gözükmediği için bu sorunu aşıyor olacaksınız. Ama pratikte süslü parantezler kullanılır. Çünkü süslü parantez ile yazsanızda, css ile bu sorunu çözebiliyoruz.

ng-bind ile aşağıdaki gibi bind ediyoruz.

JS Bin on jsbin.com

AngularJS ile One Time Binding

Şimdiye kadar yaptığımız örneklerin hepsinde, model yani data kaynağı değiştikçe (inputta), sürekli bind olmaktaydı. AngularJS, standart olarak tüm modeller için event kurar. Modellerin değeri değiştikçe bind eder. Lakin bu iş bedava olmuyor. AngularJS watcher adını verdiği bu eventler ile bu işlemi gerçekleştiriyor ve her yeni event tarayıcıya bir yük daha bindiriyor. Bu işleme two way data binding deniyor.

Sayfanızda belli bir yere kadar two way data bind edilen model bulunabilir. Lakin bununda bir sınırı var. Ama sınırı olmasa bile, değeri sadece bir kere belirlenen ve ardından hiç değişmeyecek bir değer için neden sanki değişecekmiş gibi event kurdurup tarayıcıyı zorlayalım ?, yavaşlatalım ?

İşte bu yüzden one time binding kullanıyoruz. Kullanımı çok basit. Bind edeceğimiz modelin başına :: 2 tane iki nokta üst üste koyuyoruz. Aşağıdaki örnekte one time binding örneği yapıcam. Burda ng-bind özelliğini kullanıcam, ng-bind özelliği ile uygulama çalışmaya başlarken bir modelin değerini belirleyebiliyoruz. ng-bind ile modelin ilk değerini belirliyorum ve modelin değerini değiştirsemde one time bind edilen yerlerde değer değişmiycek.

AngularJS Öğreniyorum on jsbin.com

AngularJS ile ilgili daha fazla bilgiye sahip olmak için http://angulartr.com/category/angular-dersleri/ AngularJS Dersleri kategorisini incelemeye devam edebilirsiniz.

Leave A Comment

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir