AngularJS 모듈


모듈은 애플리케이션을 정의합니다.

모듈은 애플리케이션의 다양한 부분을 담는 컨테이너입니다.

모듈은 애플리케이션 컨트롤러를 위한 컨테이너입니다.

컨트롤러는 일반적으로 모듈에 속합니다.

모듈 만들기

AngularJS의 angular.module 기능을 통해 모듈을 만들 수 있습니다.

<div ng-app="myApp"> .. .</div>

<script>

var app = angle.module("myApp ", [ ]) "myApp" 매개변수는 애플리케이션을 실행하는 HTML 요소에 해당합니다.

이제 AngularJS 애플리케이션에 컨트롤러, 지시어, 필터 등을 추가할 수 있습니다.
컨트롤러 추가 ng-controller 명령을 사용하여 애플리케이션의 컨트롤러를 추가할 수 있습니다.
Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</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>

인스턴스 실행»

"인스턴스 실행" 버튼을 클릭하여 온라인 인스턴스를 확인하세요.

AngularJS 컨트롤러 장에서 컨트롤러에 대해 자세히 알아볼 수 있습니다.

지시문 추가

AngularJS는 애플리케이션에 기능을 추가하는 데 사용할 수 있는 다양한 내장 지시문을 제공합니다.
전체 지침 내용을 보려면 AngularJS 참조 매뉴얼을 참조하세요.
또한 모듈을 사용하여 애플리케이션에 자신만의 지시문을 추가할 수 있습니다.

Instances

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>

<div ng-app="myApp" php-directive></div>

<script>

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

app.directive("phpDirective", function() {
    return {
        template : "我在指令构造器中创建!"
    };
});
</script>

</body>
</html>

인스턴스 실행»

온라인 예제를 보려면 "인스턴스 실행" 버튼을 클릭하세요

찾을 수 있습니다 AngularJS 지시문 장에서 지시문에 대해 자세히 알아보세요.

모듈과 컨트롤러는 JS 파일에 포함됩니다.

일반적으로 AngularJS 애플리케이션에는 JavaScript 파일에 모듈과 컨트롤러가 포함됩니다.
다음 예에서 "myApp.js"에는 애플리케이션 모듈 정의 프로그램이 포함되어 있고 "myCtrl.js" 파일에는 컨트롤러가 포함되어 있습니다.
Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

</body>
</html>

Run Instance»

"Run Instance"를 클릭합니다. 온라인 예시를 보려면 " " 버튼을 누르세요

myApp.js

var app = angle.module("myApp", []);

Note모듈 정의에서 [] 매개변수는 다음의 종속성을 정의하는 데 사용됩니다. 모듈.
대괄호 []는 모듈에 종속성이 없음을 나타냅니다. 종속성이 있는 경우 종속 모듈 이름이 대괄호 안에 기록됩니다.

myCtrl.js

app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
} );

함수는 전역 네임스페이스에 영향을 미칩니다.

전역 함수는 JavaScript에서 피해야 합니다. 다른 스크립트 파일로 쉽게 덮어쓸 수 있기 때문입니다.

AngularJS 모듈은 모든 기능을 이 모듈 아래로 지정하여 이 문제를 방지합니다.

라이브러리는 언제 로드되나요?

Note이 예에서는 모든 AngularJS 라이브러리가 HTML 문서의 헤드에 로드됩니다.

HTML 애플리케이션의 경우 일반적으로 모든 스크립트를 <body> 요소의 맨 아래에 배치하는 것이 좋습니다.

HTML 로딩은 스크립트 로딩의 영향을 받지 않기 때문에 웹페이지 로딩 속도가 빨라집니다.

여러 AngularJS 인스턴스에서 AngularJS 라이브러리가 문서의 <head> 영역에 로드된 것을 볼 수 있습니다.

이 예에서 AngularJS는 <head> 요소에 로드됩니다. 왜냐하면angular.module에 대한 호출은 라이브러리가 로드된 후에만 이루어질 수 있기 때문입니다.

또 다른 해결책은 <body> 요소에 AngularJS 라이브러리를 로드하는 것이지만 이는 AngularJS 스크립트 앞에 배치되어야 합니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</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>

인스턴스 실행»

"인스턴스 실행"을 클릭하세요. 버튼 온라인 예시 보기