Module
이전에 작성했던 예제들은 모두 전역으로 선언한 생성자 및 변수로 실제 애플리케이션에서는 사용을 지양하고있다.
전역으로 선언할 경우 예상치 못한 부분에서 변수의 값이 변경이 될 수 있으며 가독성 및 테스트용이성이 떨어지는 등 코드의 유지보수가 어려워진다.
AngularJS에는 'angular'라는 전역 네임스페이스가 정의되어있으며, 이 네임스페이스는 다양하고 편리한 유틸함수를 제공한다.
그 중 module은 AngularJS가 관리하는 객체(controller, service 등)의 컨테이너 역할을 한다.
Module을 통한 Controller 생성방법 비교
전역변수 선언방법 |
Module 생성방법 |
var HelloCtrl = function ($scope) { |
angular.module('hello', []) |
angular.module("모듈이름", [다른모듈과의 의존관계]).controller("컨트롤러 이름", 생성자함수); | |
모듈을 정의 후 사용하기위해서 ng-app 속성에 값으로 정의하여 AngularJS에 모듈을 등록하여야 한다.
[실행 결과]
[controller생성 - 전역변수]
위의 코드는 앞서 구현해보았던 전역변수를 통한 생성방식이다. 이 코드를 AngularJS의 module을 통한 생성방식으로 변경하면 다음과 같다.
[controller생성 - module]
ng-app 속성의 값으로 해당 화면에서 사용할 모듈이름을 AngularJS에 알려준다.
angular.module 메소드는 모듈을 생성하고, 생성한 모듈을 반환한다.
아래와 같이 모듈생성 후 반환되는 값을 받아서 재사용할 수 있다.
var module = angular.module('module_name', []) ; // module 생성 및 반환
다음과 같이 모듈생성과 생성과 생성된 모듈을 사용하는부분을 분리하여 구현할 수 있다.
angular.module('module_name', []); // module 생성
var module = angular.module('module_name'); // AngularJS 컨테이너에 module_name 이름으로 등록된 모듈을 얻어온다.
모듈에 여러개의 컨트롤러를 구현하기 위해서는 생성된 모듈을 변수로 가지고 이를 재사용해야한다. module.controller 메소드의 반환값이 module이 아니기때문에 2번째의 컨트롤러 함수 호출을 위해 module을 얻어야한다.
ng-app에는 1개의 모듈만 등록이 가능하다. 그러므로 여러개의 모듈을 사용하고싶다면 여러개의 모듈에 의존성을 갖는 최상위 모듈을 정의 후 의존성 모듈로 여러개의 모듈을 등록하여 사용할 수 있다.
angular.module('module1',[]); // module1 생성
angular.module('module2',[]); // module2 생성
angular.module('app', ['module1', 'module2']); // 최상위 모듈 app 생성 및 module1, module2 dependency 등록
<body ng-app='app'> // ng-app 속성에 최상위모듈 app 등록하면 의존성 모듈로 등록된 module1, module2 모두 사용 가능하다.
만약 module1과 module2에 동일한 이름의 controller를 생성한 경우 dependency에 마지막으로 등록한 module2의 값으로 덮어씌워져 화면에 노출된다.
'development > angularjs' 카테고리의 다른 글
| angularjs - $scope (0) | 2014.08.03 |
|---|---|
| angularjs - hello world (0) | 2014.08.03 |
