[W3Schools AngularJS 한글강좌] Modules

* 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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

'Coding > HTML' 카테고리의 다른 글

동적으로 추가한 요소 이벤트 동작하지 않을때 해결방법 (0)	2017.04.06
Jquery empty() / remove() / detach() 차이점 (0)	2017.04.05
[W3Schools AngularJS 한글강좌] Directives (0)	2017.01.16
[W3Schools AngularJS 한글강좌] Expressions (0)	2017.01.16
[W3Schools AngularJS 한글강좌] Intro (0)	2017.01.16

Hide