Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

nalaolla

[AngularJS] 11. 모듈(module) - Angular JS 강좌 본문

AngularJS_1

[AngularJS] 11. 모듈(module) - Angular JS 강좌

날아올라↗↗ 2016. 6. 14. 13:27
728x90
반응형

AngularJS Modules

 모듈은 어플리케이션을 정의합니다. 모든 어플리케이션 제어는 모듈 내에 속해야 합니다.

 모듈은 어플리케이션을 좀 더 가독성을 높혀주고, 전역 네임스페이스를 깔끔하게 해줍니다.

1. AngularJS Module Example
 myApp.js는 어플리케이션 모듈 정의를 포함하고, myCtrl.js는 제어를 포함합니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
 
<head>
</head>
 
<body>
 
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
 
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
 
</body>
</html>
cs



 


2. Controllers Pollute the Global Namespace
 모든 예제는 전역 값을 사용합니다.

 전역 값(Global value)는 어플리케이션에서 피해야 합니다. 쉽게 덮어쓰여지거나, 다른 스크립트에 의해 파괴됩니다.

 AngularJS모듈은 위 문제를 해결합니다.



3. A Controller Without a Module
 이 어플리케이션은 이름을 갖지 않고, 제어 함수는 전역입니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
 
<head>
</head>
 
<body>
 
<div ng-app="" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
 
<script>
function myCtrl($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
}
</script>
 
</body>
</html>
cs






4. A Controller With a Module
 아래 어플리케이션은 이름(ng-app="myApp")을 갖고, 제어는 모듈의 속성입니다:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
 
    <head>
    </head>
 
    <body>
 
    <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>
 
cs













5. When to Load the Library?
 HTML 어플리케이션에 대한 일반적 조언은 <body> 요소의 가장 바닥에 모든 스크립트를 위치시키는 것입니다.

 그러나, 많은 AngularJS 예제에서, <head> 요소에 라이브러리가 보일 것 입니다.

 angular.module이 호출되는 것이 라이브러리가 로드된 이 후에 컴파일이 되기 때문입니다.

 다른 해법으로는 <body> 요소에서 AngularJS 라이브러리를 로드하는 것 입니다. 그러나, AngularJS 스크립트 전에 로드해야 합니다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!DOCTYPE html>
<html>
<body>
 
<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>
cs


  




6. AngularJS Application Files
 자신만의 어플리케이션 파일을 만들어 봅시다.

 먼저 myApp.js 모듈 파일을 생성합니다.



1
var app = angular.module("myApp", []);
cs

 




 * 모듈 정의 내의 [] 매개변수는 의존적인 모듈(dependent module)을 선언하기 위해 사용됩니다.

  그 다음, 제어 파일을 만듭니다. myCtrl.js



 

1
2
3
4
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
cs


 


 마지막으로, HTML 페이지를 만듭니다:

 


 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
 
    <head>
    </head>
 
    <body>
 
    <div ng-app="myApp" ng-controller="myCtrl">
    {{ firstName + " " + lastName }}
    </div>
 
    <script src="myApp.js"></script>
    <script src="myCtrl.js"></script>
 
    </body>
</html>
cs





 










* 위 강좌는 W3Schools 를 참고하여 작성하였습니다.


728x90
반응형
저작자표시

'AngularJS_1' 카테고리의 다른 글

[AngularJS] 13. 검사(Validations) - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 12. 서식(Forms) - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 10. HTML Event - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 9. HTML DOM - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 8. SQL - Angular JS 강좌  (0) 2016.06.14
'AngularJS_1' Related Articles more