AngularJS 모듈
- 이전 페이지 AngularJS 표현식
- 다음 페이지 AngularJS 지시
AngularJS 모듈은 애플리케이션을 정의합니다.
모듈은 애플리케이션의 다른 부분의 컨테이너입니다.
모듈은 애플리케이션 컨트롤러의 컨테이너입니다.
컨트롤러는 항상 어떤 모듈에 속합니다.
모듈을 생성합니다
AngularJS 함수를 사용하여，angular.module 모듈을 생성하려면：
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
"myApp" 파라미터는 애플리케이션이 실행될 HTML 요소를 의미합니다.
이제 AngularJS 애플리케이션에 컨트롤러, 지시어, 필터 등을 추가할 수 있습니다.
컨트롤러 추가
컨트롤러를 애플리케이션에 추가하고, ng-controller 지시어는 이 컨트롤러를 참조합니다:
예제
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "Bill";
$scope.lastName = "Gates";
});
</script>
컨트롤러에 대해 더 많은 정보를 배울 수 있는 부분입니다.
지시어 추가
AngularJS는 애플리케이션에 기능을 추가할 수 있는 내장 지시어를 제공합니다.
완전한 참조를 원하면, AngularJS 지시어 참조를 방문하세요.
또한, 모듈을 사용하여 자신의 지시어를 애플리케이션에 추가할 수 있습니다:
예제
<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "I was made in a directive constructor!"
};
});
</script>
지시어에 대해 더 자세히 배울 수 있는 부분입니다.
파일에 있는 모듈과 컨트롤러
AngularJS 애플리케이션에서 모듈과 컨트롤러를 JavaScript 파일에 저장하는 것은 흔합니다.
이 예제에서, "myApp.js"은 애플리케이션 모듈 정의를 포함하고, "myCtrl.js"은 컨트롤러를 포함합니다:
예제
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>
myApp.js
var app = angular.module("myApp", []);
모듈 정의에서 [] 파라미터는 의존 모듈을 정의하는 데 사용될 수 있습니다.
[] 파라미터가 없다면, 새 모듈을 생성하는 것이 아니라 기존 모듈을 검색하고 있습니다.
myCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "Bill";
$scope.lastName= "Gates";
});
함수는 전역 이름 공간을 오염시킬 수 있습니다
JavaScript에서는 전역 함수를 피하는 것이 좋습니다. 다른 스크립트에 의해 덮거나 파괴될 가능성이 높습니다.
AngularJS 모듈은 모든 함수를 모듈 내로 유지하여 이 문제를 줄입니다.
라이브러리를 언제 로드할지
HTML 애플리케이션에서 스크립트를 추가하는 것은 <body> 요소의 끝에 script 요소를 추가하는 것은 흔하지만, 권장드립니다. <head> 또는 <body> 의 시작 부분에 AngularJS 라이브러리를 로드하세요.
이유는 라이브러리를 로드한 후에야 모듈을 컴파일할 수 있기 때문입니다. angular.module 의 호출.
예제
<!DOCTYPE html>
<html>
<body>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "Bill";
$scope.lastName = "Gates";
});
</script>
</body>
</html>
- 이전 페이지 AngularJS 표현식
- 다음 페이지 AngularJS 지시
