[W3Schools AngularJS 한글강좌] Modules :: Hide

[W3Schools AngularJS 한글강좌] Modules

Posted by Hide­
2017.01.16 19:15 Coding/HTML & Javascript

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




다른 사람들이 많이 읽은 글
이 댓글을 비밀 댓글로

티스토리 툴바