앵귤러의 모듈에 대해서 알아보자
1) 개요
- 모든 애플리케이션에는 main이 있지만 Angular에는 main 이 없다. 애플리케이션이 시작할 때 정의한 모듈을 읽는다
- 모듈로 쪼개면 애플리케이션 이해가 쉽고 unit-testing이 수월하며 end-to-end testing도 가능하다
- 필요한 모듈은 언제든지 로딩해서 사용할 수 있다
- 3rd-party 라이브러리를 모듈로 만들어 사용할 수 있다
- 모듈 종류
+ Service Module
+ Directive Module
+ Filter Module
+ module 들에 의존하는 Application Module : <ng-app="ModuleName"> 으로 시작
- 모듈을 나누는 가장 큰 이유는 테스팅! 테스팅!
- 아름다운 코드를 보자
index.html
- <!doctype html>
- <html ng-app="xmpl">
- <head>
- <script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
- <script src="script.js"></script>
- </head>
- <body>
- <div ng-controller="XmplController">
- {{ greeting }}!
- </div>
- </body>
- </html>
script.js : service, directive, filter module => use xmpl application module
- angular.module('xmpl.service', []).
- value('greeter', {
- salutation: 'Hello',
- localize: function(localization) {
- this.salutation = localization.salutation;
- },
- greet: function(name) {
- return this.salutation + ' ' + name + '!';
- }
- }).
- value('user', {
- load: function(name) {
- this.name = name;
- }
- });
- angular.module('xmpl.directive', []);
- angular.module('xmpl.filter', []);
- <!-- ng-app="xmpl" 모듈이 다른 부가적인 모듈에 의존관계를 가지고 있다 -->
- angular.module('xmpl', ['xmpl.service', 'xmpl.directive', 'xmpl.filter']).
- run(function(greeter, user) {
- // This is effectively part of the main method initialization code
- greeter.localize({
- salutation: 'Bonjour'
- });
- user.load('World');
- })
- // A Controller for your app
- var XmplController = function($scope, greeter, user) {
- $scope.greeting = greeter.greet(user.name);
- }
2) 모듈 로딩과 의존관계
- 모듈은 초기화를 시작하여 애플리케이션에 적용되는 동안 Configuration & Run Block의 집합체이다
- Configuration Block
+ providers, constants 만 inject 된다
+ 의존관계있는 모듈을 inject 받는다
- angular.module('myModule', []).
- value('a', 123).
- factory('a', function() { return 123; }).
- directive('directiveName', ...).
- filter('filterName', ...);
- // is same as
- // config 펑션에 provider를 통하여 설정한다
- angular.module('myModule', []).
- config(function($provide, $compileProvider, $filterProvider) {
- $provide.value('a', 123);
- $provide.factory('a', function() { return 123; });
- $compileProvider.directive('directiveName', ...);
- $filterProvider.register('filterName', ...);
- });
- Run Block
+ instances, constants 만 inject 된다
+ 모듈의 main 메소드 격으로 보면된다
* Unit Test 다음에 추가
<참조>
- 원문 : Developer Guide - Module
'AngularJS > Concept' 카테고리의 다른 글
| [AngularJS] Think in AngularJS Way (0) | 2013.08.21 |
|---|---|
| [AngularJS] 웹 애플리케이션 견고하게 만드는 방법 (0) | 2013.04.27 |
| [AngularJS] 개발자 가이드 - 05. 지시자(Directives) (0) | 2013.04.11 |
| [AngularJS] 개발자 가이드 - 04. 개념 이해하기 (0) | 2013.04.10 |
| [AngularJS] 개발자 가이드 - 03. HTML 컴파일러 (0) | 2013.04.10 |