Angularjs module, controller

1. module
   angularjs에서 module은 Marionette에서의 Application과 Module을 합쳐놓은 느낌이다. Marionette의 Application 처럼 페이지당 하나의 module을 할당하는 것이 기본이고 controller나 directive, filter의 집합이 module에 정의되는것은 Marionette의 module 의 특성을 닮았다. 우선 module을 정의하는 코드를 보자

   // module을 정의하고 동시에 생성된 module에 대한 참조를 module 변수에 할당한다.
   var constructingModule = angular.module("myapp", []);
   // 이미 생성된 module을 생성시에 지정한 이름으로 로딩한다.
   var constructedModule = angular.module("myapp");
   

   위 코드에서 보듯이 모듈의 생성과 로딩은 동일하게 angular.module 메서드를 사용한다. 차이점이라면 메서드에 건네는 인자의 갯수인데 모듈 로딩은 정의된 모듈의 이름만 인자로 넘기고 모듈의 생성은 모듈의 이름과 모듈이 필요한 모듈의 목록배열을 넘긴다. 위 예제에서는 모듈에서 추가로 필요한 모듈의 목록을 정의하지 않았다.
   
   어떤 경우에는 한 페이지에 모듈이 두개 이상 로딩하여 사용할 필요가 있을 수 있다. angularjs는 모듈이 여러개 정의가 되어 있으면 가장 처음 정의된 ng-app 속성의 모듈만 로딩한다. 추가로 정의된 모듈들을 로딩하려면 아래 코드가 추가로 필요하다.

   // 모듈을 두개 생성한다.
   var module = angular.module("myapp", []);
   var module2 = angular.module("myapp2", []);
   // 페이지 로딩이 끝난 시점에서 두개의 모듈을 로딩한다.
   angular.element(document).ready(function() {
     angular.bootstrap(document, ['myapp', 'myapp2']);
   });
   

   angular.element(document).ready 는 $(document).ready와 동일하게 페이지 로딩이 끝난 시점에 호출되는 함수를 지정한다. 위 코드는 페이지 로딩이 끝난 시점에 angular.bootstrap 메서드로 미리 정의된 두개의 모듈을 로딩하는 코드다. 페이지에서 사용해야될 모듈만큼 배열의 갯수는 늘어난다.
2. controller
   일반 자바객체 또는 Object 클래스를 상속받아 정의하는 Marionette의 컨트롤러와는 달리 angular에서의 컨트롤러는 module에 딸려있는 부속 중 하나이다. module에 딸려있는 부속이기 때문에 정의하는 방법도 별도로 정해져 있는데 그 방법은 아래와 같다.

   var module = angular.module("myapp", []);
   module.controller("MyController", function($scope){
    $scope.clickHandler = function(){
     alert("test");
    }
   });
   // 위 코드는 아래 코드와 동일하다
   angular.module("myapp", []).controller("MyController", function($scope){
    $scope.clickHandler = function(){
     alert("test");
    }
   });
   

   module객체의 controller 함수를 호출해 컨트롤러 이름과 컨트롤러 핸들러를 인자로 넘기면 생성되는 모양이다. 핸들러 함수에서 첫번째 인자로 $scope를 받고있는데 이 $scope는 컨트롤러가 제어하는 영역 내에서 공유하는 변수이다. 이름 그대로 컨트롤러 영역 내의 네임스페이스 정도로 이해하면 될거 같다. 이렇게 정의한 코드는 html에서 사용하는 방법은 아래와 같다.

   ng-controller 속성에 컨트롤러의 이름을 정의하고 있다. 이렇게 정의하면 div 태그 내부는 MyController의 영역이 된다. div 내부의 button 태그에 ng-click속성으로 $scope에 할당한 clickHandler 함수를 호출하고 있다. html 기본 속성과 달리 함수의 호출을 의미하는 괄호까지 붙여줘야 핸들러가 호출이 된다.