11 Şubat 2014 Salı

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

Hiç yorum yok: