AngularJS - Module ve Routing

Daha önceki blog girdisinde, oluşturulan sayfanın bir Angular uygulaması olduğunu belirtmek için ng-app directive'i kullanıdığından bahsetmiştim. O yazıda ng-app="" şeklinde kullanılıyordu. Bu şekilde kullanımda; uygulamamız "single page application"dan ibarettir ve Angular'ın çok önemli bir özelliği olan modülerlikten bahsedemeyiz.
Oluşturucağınız uygulama birden fazla modül içerecek ise; Angular altında bu modülleri oluşturduktan sonra ng-app="module1" gibi bir kullanım ile o sayfanın hangi modüle ait olduğunu belirtebilirsiniz. Her bir modülün kendine ait controller, view, factory, service, filter vs. nesneleri vardır. Farklı modüllerin, birbirlerine ait erişim izinlerini yönetebilirsiniz.
Module, controller, directive, routing gibi elemanların birbiriyle olan ilişkisi aşağıdaki görselden daha net bir şekilde anlaşılacaktır.

Javascript kodunda var module1 = angular.module('module1', []); gibi çok basit bir kullanımla bir modül oluşturabilir ve html sayfanızdan şeklinde bu modüle erişebilirsiniz. module metodundaki ikinci parametre([]) module1'in miras alacağı(bağımlı olduğu) modül veya modülleri içeren bir dizidir. Örneğin; var module1 = angular.module('module1', ['base']); şeklinde modülümüzü oluşturmamız, "module1" modülünün  "base" modülünü miras aldığı ve base'e ait olan her nesneye erişiminin mümkün olduğu anlamına gelir.
Ben burada modulün oluşturulmasında kullanılan javascript kodu üzerinde duracağım. Module ve routing ile ilgili örneğe buradan erişebilir ve kod üzerinde çalışabilirsiniz.

var module1 = angular.module('module1', []);

module1.controller('myController', function($scope) {
 $scope.test = function() {
  alert('controller1 : ' + $scope.name);
 };
});

module1.controller('myController2', function($scope) {
 $scope.test = function() {
  alert('controller2 : ' + $scope.name);
 };
});

module1.config(function($routeProvider) {
 $routeProvider.when('/view1', {
  controller : 'myController',
  templateUrl : 'view1.html'
 }).when('/view2', {
  controller : 'myController2',
  templateUrl : 'view2.html'
 }).otherwise({
  redirectTo : '/view1'
 });
});   

• angular.module('module1', []); ile module1 modülünü oluşturuyoruz. AngularJS 1.2.* sonrası sürümlerinde routing için  'ngRoute' modülünü miras almanız(var module1 = angular.module('module1', ['ngRoute']);) ve html kodunuzda import etmeniz gerekiyor.
• module1.controller('myController', function($scope) ile module1 üzerinde myController isminde bir controller oluşturuyoruz. $scope ise; view(html sayfamız) ve controller(myController)'ın birlikte çalışmasını sağlayan, arada köprü görevi gören nesnedir. Controller üzerinde oluşturulan fonksiyon ve attribute'lara $scope nesnesi üzerinden erişim sağlanır.
• module1.config(function($routeProvider) ile module1 üzerinde bir yönlendirme tanımlıyoruz. $routeProvider ise; yönlendirme yönetiminde kullanılan nesnedir. Kod bloğuna bakacak olursak; sayfa öntanımlı olarak view1.html'i myController ile birlikte çalışacak şekilde yüklenecektir. Daha sonra "/view2" şeklinde bir yönledirme isteği gelirse; view2.html myController2 ile birlikte çalışacak şekilde yüklenecektir. 

Referanslar:

1. AngularJS Fundamentals in 60 Minutes - Modules, Routes and Factories (video)
2. How to structure large angularJS applications
3. AngularAPI - ngApp 
4. AngularAPI - angular.module
5. AngularAPI - $route

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>

  
  
  
  
  
  
  
  



  

    

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