* ALL COPYRIGHTS are at w3schools. This article's purpose is only for study. *
AngularJS의 module은 application을 정의한다.
module은 application의 다른부분을 위한 컨테이너이다.
module은 application controllers를 위한 컨테이너이다.
Controllers는 항상 module에 속한다.
Creating a Module
module은 angular.module를 사용해서 생성할 수 있다.
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>"myApp"매개 변수는 응용 프로그램이 실행될 HTML 요소를 나타낸다.
Adding a Controller
controller를 추가하고 ng-controller를 통해 참조하도록 해보자.
Example
<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>controllers에 대한 자세한 내용은 나중에 배울것이다.
Adding a Directive
AngularJS에는 응용 프로그램에 기능을 추가하는 데 사용할 수 있는 내장 지시문 세트가 있다.
자세한 내용 -> AngularJS directive reference.
또한 module을 사용하여 직접 지시문을 추가할 수 있다.
Example
<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>Modules and Controllers in Files
AngularJS를 사용할 땐 module과 controllers를 Javascript 파일에 저장하는게 일반적이다.
아래의 예에서는 myApp.js에 module에 대한 정의가 들어있고 myCtrl.js에 controllers에 대한 정의가 들어있다.
Example
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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";
});Functions can Pollute the Global Namespace
Javascript 에서는 전역함수의 사용이 기피된다. 전역함수를 사용하면 다른 script를 덮어쓰거나 망가뜨릴 수 있기 때문이다.
AngularJS 모듈은 모든 기능을 로컬에 유지함으로써 이 문제를 해결한다.
When to Load the Library
<body> 요소의 끝 부분에 스크립트를 배치하는 것은 HTML 응용 프로그램에서 일반적이지만 <head> 또는 <body>의 시작 부분에 AngularJS 라이브러리를 로드하는 것이 좋다.
이는 angular.module에 대한 호출이 라이브러리가 로드 된 후에만 컴파일 될 수 있기 때문이다.
Example
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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>'Coding > Etc' 카테고리의 다른 글
| Package 'php5' has no installation candidate 에러 해결방법 (0) | 2017.01.18 |
|---|---|
| [W3Schools AngularJS 한글강좌] Directives (0) | 2017.01.16 |
| [W3Schools AngularJS 한글강좌] Expressions (0) | 2017.01.16 |
| [W3Schools AngularJS 한글강좌] Intro (0) | 2017.01.16 |
| PHP 파일업로드 (0) | 2017.01.15 |