-
[AngularJS] 11. 모듈(module) - Angular JS 강좌Web/AngularJS 2015. 6. 12. 14:22AngularJS Modules모듈은 어플리케이션을 정의합니다. 모든 어플리케이션 제어는 모듈 내에 속해야 합니다.모듈은 어플리케이션을 좀 더 가독성을 높혀주고, 전역 네임스페이스를 깔끔하게 해줍니다.1. AngularJS Module ExamplemyApp.js는 어플리케이션 모듈 정의를 포함하고, myCtrl.js는 제어를 포함합니다:123456789101112131415161718<!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이 어플리케이션은 이름을 갖지 않고, 제어 함수는 전역입니다:12345678910111213141516171819202122<!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")을 갖고, 제어는 모듈의 속성입니다:123456789101112131415161718192021222324<!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 스크립트 전에 로드해야 합니다.12345678910111213141516171819202122<!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 모듈 파일을 생성합니다.1var app = angular.module("myApp", []);cs * 모듈 정의 내의 [] 매개변수는 의존적인 모듈(dependent module)을 선언하기 위해 사용됩니다.그 다음, 제어 파일을 만듭니다. myCtrl.js1234app.controller("myCtrl", function($scope) {$scope.firstName = "John";$scope.lastName = "Doe";});cs 마지막으로, HTML 페이지를 만듭니다:123456789101112131415161718<!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 를 참고하여 작성하였습니다.'Web > AngularJS' 카테고리의 다른 글
[AngularJS] 14. Bootstrap- Angular JS 강좌 (0) 2015.06.12 [AngularJS] 13. 검사(Validations) - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 12. 서식(Forms) - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 10. HTML Event - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 9. HTML DOM - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 8. SQL - Angular JS 강좌 (0) 2015.06.12
