AngularJS 모듈
AngularJS 모듈은 응용프로그램을 정의를 합니다.
한마디로 모듈은 컨테이너라고할 수 있습니다.
여러가지를 담는 용도이죠.
예를 들어 컨트롤러, 필터 등등...
모듈을 만드는 방법에 대해서는 앞서 말했듯이
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
=> angular.module로 만들어줍니다.
=> myApp은 ng-app
모듈을 작성하였으니 컨트롤러를 추가해 봅시다.
컨트롤러는 앞서 잠깐 보여드렸습니다.
<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>
=> ng-controller로 myCtrl로 정의해주고
=> app.controller로 등록해줍니다.
또한 directive를 추가해줄 수 있습니다.
<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>
=> app.directive로 추가해줍니다.
보통 AngularJS는 자바스크립트 파일에 모듈과 컨트롤러를 넣어놓습니다.
앞서 모듈 등록하는 것과 컨트롤러를 정의하는 부분을 JS파일로 각각 myApp.js 와 myCtrl.js로 만들어 줍니다.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/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 = "John";
$scope.lastName= "Doe";
});라이브러리를 로드할 때는 <body> 시작부분 또는 <head>부분에 두는 것이 좋습니다.
왜냐하면 앵귤러 모듈이 라이브러리가 로드가 된 후에 컴파일이 됩니다.
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/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 = "John";
$scope.lastName = "Doe";
});
</script>
</body>
</html>
'웹 > AngularJS' 카테고리의 다른 글
| AngularJS 모델 (0) | 2019.02.20 |
|---|---|
| AngularJS directives (0) | 2019.02.19 |
| AngularJS 표현식 (0) | 2019.02.16 |
| AngularJS 소개 (0) | 2019.02.14 |
