-

Angular Js’de Module ve Controller Kavramları

Önceki yazımda Angular Js ile ilgili genel bilgiler paylaşarak küçük bir uygulama ile giriş yapmıştım. Bu yazıda module ve contoller kavramları üzerinde konuşarak yine basit bir uyglama ile pekişmesini sağlamayı hedefliyorum.

Uyglamanın Angular Js olarak derlenebilmesi için ng-app direktifinin eklenmesi gerektiğinden bahsetmiştim. Uygulamaya sadece ng-app yazarak Angular Js kodu geliştirebiliyoruz ancak yapabileceklerimiz sınırlı olacaktır. Fonksiyonel işler yapabilmek için module ve controller oluşturma ihtiyacı duyarız. Module dediğimiz aslında diğer uygulamalardan bildiğimiz Main() fonksiyonu gibidir.

Module aşağıdaki gibi tanımlayabiliriz;

var myApp=angular.module(‘nameApp’,[]);

Modülümüzün ismi nameApp, html tarafında ng-app=”nameApp” şeklinde kullanıyor olacağız.  Modül tanımındaki ikinci parametre array dir, dependency injection için kullanılabilir.Bir modülün başka bir modül ile bağımlılığı varsa bu alana yazılır, benim göstereceğim örnekte böyle bir durum olmadığından boş bırakıyorum.

Fonksiyonel işler yaptırmak için controller’a ihtiyacımız olacaktır, js tarafında bunun tanımını aşağıdaki gibi yapabiliriz;

myApp.controller(‘NameCtrl’,function($scope) {}

Böylece myApp modülünün controllerının NameCtrl olduğunu belirtmiş olduk, {} bloğu içerisine yapılmasını istediğimiz işleri yazıyoruz. $scope ise objemiz, bu objeye attribute lar atayabiliyoruz, örneğin aşağıdaki gibi names isminde bir array verebiliriz. names ise bizim modelimiz yani datamız olacaktır. Burada tanımladığımız özellikleri html tarafında kullanabiliyoruz. Tanımlanan NameCtrl ismindeki controller html tarafında ng-controller=”NameCtrl” şeklinde kullanılır. Controller ismi yanlış yazılırsa, controller’ı çağıramamış olur, console log a hata basar ve görüntülenmek istenen bilgileri yazıldığı gibi {{   }} içerisinde gösterir.

myApp.controller(‘NameCtrl’,function($scope) {

$scope.names=['Derya','Gunduz','Ozmen'];

});

Js Kodu;

angular1

Html kodu;

angular2

Html kodu içerisnde ng-repeat direktifi kullandım, bu direktif c# daki foreach gibidir, names ismindeki modelimiz içerisinde gezer ve her bir elemanı name olarak adlandırır, name elamanını ekrana liste şeklinde yazdırır. ng-repeat direktifi kullanarak oluşturduğumuz döngünün eleman indexlerini $index ile bulabiliriz, eğer nested, içiçe, döngü yaptıysanız üst indexi $parent.$index şeklinde bulabiliriz. Yani ng-repeat direktifi altında herhangi bir yere $index yazarsak elemanların indexini elde etmiş oluruz.

Çıktısı;

angular3

Göstermiş olduğum örneğin kodlarını aşağıdaki codepen linkinden inceleyebilirsiniz.

http://codepen.io/deryagunduzozmen/pen/ZeONvy

Kaynalar:

  1. https://github.com/curran/screencasts/tree/gh-pages/introToAngular
  2. https://angularjs.org
  3. https://www.youtube.com/playlist?list=PL6n9fhu94yhWKHkcL7RJmmXyxkuFB3KSl
  4. https://www.youtube.com/watch?v=ejBkOjEG6F0#t=34.11219
  5. http://csharp-video-tutorials.blogspot.com.tr/2015/11/angularjs-tutorial-for-beginners.html