5 Şubat 2014 Çarşamba

AngularJS - Controllers

Angular'da Controller,  MVC (Model-View-Controller) tasarım şablonunun gerçekleştiriminde çok önemli bir yere sahiptir. ngController directive'i ile kullanılırlar. View'a herhangi bir controller class'ı bağlamamızı sağlar. Böylece; view üzerinde kullandığımız model'ler üzerinde işlem yapabiliriz.
Angular'da MVC:

  • Model: Scope özellikleridir(properties) ve data binding ile DOM üzerinde erişim mümkündür.
  • View: Data binding'ler içeren HTML sayfasıdır(şablon-template olarak da adlandırılır) ve View'a dönüştürülür.
  • Controller:View'dan ngController directive'i ile çağırılan controller class'ıdır. Controller class'ı, scope property'ler üzerinde değişiklik yapabilmemize imkan sağlanyan function ve value'ları içerir.

Controller'lar ile ilgili örneğe buradan erişebilir ve kod üzerinde çalışabilirsiniz.

Ben burada sadece HTML kodu üzerinde duracağım. Ayrıntılı olarak .js ve .css'e yukarıdaki bağlantıdan göz atabilirsiniz.


<html ng-app>

  
  AngularJS Controller Ornegi
  
  
  
  
  
  



  

Kayıtlar

Kayıt sayısı : {{records.length}}
{{record.name}}
</html>


ng-controller ile ilgili etiket içerisinde kullanılacak controller class'ı belirtiliyor.{{records.length}} ile controller class'ında tanmlanmış olan records objesinin uzunluğunu yazdırıyoruz. ng-init="records" ile bu object'i ilgili blokta kullanıyoruz ve ng-repeat="record in records" ile her bir record üzerinde işlem yapabiliyoruz. ng-click="delRecord(record.name)" kullanarak controller class'ında bulunan delRecord fonksiyonu çağırılır. ng-submit="addRecord()" kullanımı ile form'u submit etmek için controller üzerinde addRecord fonksiyonu çağırılır.

Controller'larla ilgili detaylı bilgiye aşağıdaki bağlantılardan ulaşabilirsiniz. Aslına bakarsanız; AngularJS ile ilgili pek çok kaynağa ulaşabilirsiniz. Ben de bu kaynaklara başvuruyorum ve öğrenebildiğim kadarıyla burada paylaşmaya çalışıyorum. Blog'da bununla ilgili konuları tekrar paylaşmamın nedeni ise; hiçbir Türkçe kaynağa rastlamamış olmamdır.

  1. http://docs.angularjs.org/api/ng.directive:ngController
  2. http://blog.pluralsight.com/angularjs-step-by-step-controllers

Hiç yorum yok: