모듈은 어플리케이션을 정의합니다. 모든 어플리케이션 제어는 모듈 내에 속해야 합니다.
모듈은 어플리케이션을 좀 더 가독성을 높혀주고, 전역 네임스페이스를 깔끔하게 해줍니다.
1. AngularJS Module Example
myApp.js는 어플리케이션 모듈 정의를 포함하고, myCtrl.js는 제어를 포함합니다:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> {{ firstName + " " + lastName }} </div> <script src="myApp.js"></script> <script src="myCtrl.js"></script> </body> </html> | cs |
2. Controllers Pollute the Global Namespace
모든 예제는 전역 값을 사용합니다.
전역 값(Global value)는 어플리케이션에서 피해야 합니다. 쉽게 덮어쓰여지거나, 다른 스크립트에 의해 파괴됩니다.
AngularJS모듈은 위 문제를 해결합니다.
3. A Controller Without a Module
이 어플리케이션은 이름을 갖지 않고, 제어 함수는 전역입니다:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html> <head> </head> <body> <div ng-app="" ng-controller="myCtrl"> {{ firstName + " " + lastName }} </div> <script> function myCtrl($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; } </script> </body> </html> | cs |
4. A Controller With a Module
아래 어플리케이션은 이름(ng-app="myApp")을 갖고, 제어는 모듈의 속성입니다:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html> <head> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> {{ firstName + " " + lastName }} </div> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; }); </script> </body> </html> | cs |
5. When to Load the Library?
HTML 어플리케이션에 대한 일반적 조언은 <body> 요소의 가장 바닥에 모든 스크립트를 위치시키는 것입니다.
그러나, 많은 AngularJS 예제에서, <head> 요소에 라이브러리가 보일 것 입니다.
angular.module이 호출되는 것이 라이브러리가 로드된 이 후에 컴파일이 되기 때문입니다.
다른 해법으로는 <body> 요소에서 AngularJS 라이브러리를 로드하는 것 입니다. 그러나, AngularJS 스크립트 전에 로드해야 합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html> <body> <div ng-app="myApp" ng-controller="myCtrl"> {{ firstName + " " + lastName }} </div> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; }); </script> </body> </html> | cs |
6. AngularJS Application Files
자신만의 어플리케이션 파일을 만들어 봅시다.
먼저 myApp.js 모듈 파일을 생성합니다.
1 | var app = angular.module("myApp", []); | cs |
* 모듈 정의 내의 [] 매개변수는 의존적인 모듈(dependent module)을 선언하기 위해 사용됩니다.
그 다음, 제어 파일을 만듭니다. myCtrl.js
| app.controller("myCtrl", function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; }); | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> {{ firstName + " " + lastName }} </div> <script src="myApp.js"></script> <script src="myCtrl.js"></script> </body> </html> | cs |
* 위 강좌는 W3Schools 를 참고하여 작성하였습니다.
