AngularJS’ te model, uygulamanızın datasının ta kendisidir. Uygulamanızda set ettiğiniz her değişken bir modeldir. Lakin modeller klasik javascript değişkenlerinden daha üstün çalışmaktadır. AngularJS’ in model konusu çok geniş olduğu için, bu konuyu giriş konusu olarak hazırladım. Model konusunu seri olarak yazılacaktır.

Neden ?

AngularJS’ te two way data binding özelliğini duymuşsunuzdur. En azından http://angulartr.com/angularjs-nedir/ konusunu okursanız, bilgi sahibi olacaksınız.

Two way data binding özelliği ile, uygulamanızda set ettiğiniz her model yani değişken, sürekli uygulama tarafından dinlenmektedir. Bu modeller iki taraflı olarak değiştirilebilir. Two way dediğimiz bu.

Two way den kasıt nedir ?

Bir model’ i Uygulamanızın controller’ ından da değiştirebilirsiniz. Aynı zamanda View dediğimiz HTML kısmından da değiştirebilirsiniz. Bunu hemen örnekliyoruz.

“Model Kullanımı”

Öncelikle mesaj adında bir modelimiz olacak ve bunu controller’ da set edeceğiz. Uygulamamızın view’ ında da bind edeceğiz.

AngularJS Controllers on jsbin.com

Gördüğünüz gibi, controllerda mesaj adında model oluşturup değerini set ledim ardından view’ da bind ettim. Bu bind işlemi controllerdan view’a bind edilmesidir.

Şimdi ise tam tersi View’ da modeli set edip, controller da ele alacağım.

Aşağıdaki örneği incelemeden önce bilmemiz gerekenleri gözden geçirelim.

  • AngularJS’ de view’ dan modellerin değerlerini almak için, input, select yada textarea elementlerini kullanabilirsiniz. Bu elementler adı üstünde input(giriş) elementleri oldukları için, modellerin değerlerini bu elementler ile girebilirsiniz. Tek yapmanız gereken bu elementlere ng-model attribute’ ü eklemeniz ve değerinide modelin ismi olarak girmeniz.
  • AngularJS’ de modellerin değerlerinin değişmesini izlemek için event kurmanız gerekmiyor. Jquery vb. kütüphaneleri kullanırken, inputlara onkeypress vb. eventler bağlar ve değerlerini kendimiz takip etmek zorunda kalırdık. Lakin AngularJS’ te buna ihtiyaç yok. ng-model ile bağladığımız için, herşey otomatik oluyor. Lakin bunu takip etmek isteyebilirsiniz. watch metodu ile de bunu yapabiliyoruz. bu metod newVal(modelin yeni değeri), oldVal(modelin bir önceki değeri) ni parametre olarak alıyor. Karşılaştırıp, değer değiştiyse, istediğinizi yapabilirsiniz.

AngularJS Controllers on jsbin.com

Yukarıdaki örnekte, değer giriniz alanına, bir değer girin, bu hemen algılanacak ve ekranda alert basılacaktır.

İşte two way data binding budur.

Artık AngularJS’ te model kavramını daha iyi anlamışsınızdır.

Modellerimiz o kadar gelişmiş ki, her birinin değeri anlık olarak dinleniyor. Hatta bu eventler özelleştirilebiliyor. Peki Nasıl ?

“ngModelOptions Kullanımı”

ng-model standart olarak, her değişikliği anında controller’ a aktarmaktadır. Lakin ihtiyaçlarımıza göre, bu aktarımı geciktirmek isteyebiliriz bu ve benzeri özellikleri ng-model-options ile uygulayabiliyoruz.

AngularJS’ in kendi dökümantasyonunda https://docs.angularjs.org/api/ng/directive/ngModelOptions gösterdiği örnekleri uyguluyoruz.

JS Bin on jsbin.com

Örneğimizi incelediğimizde, user.name modelini tutan inputun değerine her harf girdiğimizde anında sayfaya bind olması gerekirken olmadığını görüyoruz. Çünkü ng-model-options’ da updateOn değerine blur verdik. Yani input blur olduğu anda güncelleme yapılıyor. İnput a değer girip sayfada bir yere tıklayın, güncellendiğini göreceksiniz. Siz kendi ihtiyacınıza göre blur yerine istediğiniz event i yazabilirsiniz.

Bir diğer incelememiz gereken yer de ng-keyup directive’ idir. İnput’ a veri girerken, girmeyi bitirmeden ESC tuşuna basarsanız, model eski haline dönüyor. Nasıl oluyor ?

ng-keyup directive’ inin içine yazılan metod tetikleniyor. metod ne ? cancel, ayrıca metod gerçekleşen event’ i parametre olarak almış. Metodun içine baktığımızda, event’ i yakaladığı için, event’ in hangi tuş ile gerçekleştiğini görebiliyor. 27 yani ESC tuşu. Ardından $scope ta modelimizin $rollbackViewValue(); metodunu çalıştırıp, değerini geri alıyor.

Daha detaylı örnekleri AngularJS’ in kendi sayfasından bulabilirsiniz. Lakin görmemiz gereken nokta şu;

AngularJS’ in modelleri, klasik javascript değişkenleri değildir. Daha ötesidir.

AngularJS Model Serisinin diğer derslerinde görüşmek üzere.

1 Comment AngularJS Model | Model Options – Giriş

  1. ilhan

    Şimdiye kadar internette bulduğum en kapsamlı Türkçe AngularJS dersleri fakat jsbin pro account istiyor son örneği göremiyorum.

    Ciftslash.com’u bu işler için kullanabilirsiniz yerli yapım 🙂

    Kolay gelsin

    Reply

Leave A Comment

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