AngularJS와 모듈은 응용 프로그램을 정의합니다.
모듈은 애플리케이션의 다른 부분에 대한 컨테이너이다.
이 모듈은 응용 프로그램 컨트롤러에 대한 컨테이너입니다.
컨트롤러는 항상 모듈에 속한다.
모듈 만들기
모듈은 AngularJS와 함수를 사용하여 만든 angular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>은 "을 myApp"매개 변수는 응용 프로그램이 실행되는 HTML 요소를 의미한다.
지금 당신은 당신의 AngularJS와 응용 프로그램, 컨트롤러, 지침, 필터 등을 추가 할 수 있습니다.
컨트롤러를 추가
응용 프로그램에 컨트롤러를 추가하고와 컨트롤러를 참조 ng-controller 지침 :
예
<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>
»그것을 자신을 시도 나중에이 튜토리얼의 컨트롤러에 대한 자세한 내용을 배울 것입니다.
지시문 추가
AngularJS와는 응용 프로그램에 기능을 추가하는 데 사용할 수있는 기본 지침의 집합이 있습니다.
전체 참고로, 우리의 방문 AngularJS와는 참조 지시어 .
또한 당신은 당신의 응용 프로그램에 자신의 지시문을 추가 모듈을 사용할 수 있습니다 :
예
<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> »그것을 자신을 시도 나중에이 튜토리얼에서 지침에 대한 자세한 내용을 배울 것입니다.
파일에서 모듈 및 컨트롤러
AngularJS와 응용 프로그램이 모듈과 자바 스크립트 파일의 컨트롤러를 넣어에서 일반적입니다.
"myCtrl.js"은 컨트롤러를 포함하는 동안,이 실시 예에서, "myApp.js"는 애플리케이션 모듈의 정의를 포함
예
<!DOCTYPE html>
<html>
<script src="http://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";
});
기능은 글로벌 네임 스페이스를 오염 수
전역 함수는 자바 스크립트를 피해야한다. 그들은 쉽게 덮어 쓰기 또는 다른 스크립트에 의해 파괴 될 수있다.
모듈이 모듈에 국부적으로 모든 기능을 유지함으로써 이러한 문제를 감소 AngularJS와.
때 라이브러리를로드하는 방법
는 말에 스크립트를 배치 HTML 응용 프로그램에서 일반적이지만 <body> 요소, 당신이에서 어느 AngularJS와 라이브러리를로드하는 것이 좋습니다 <head> 또는의 시작에 <body> .
호출 때문이다 angular.module 라이브러리가로드 된 후에 만 컴파일 될 수있다.
예
<!DOCTYPE html>
<html>
<body>
<script src="http://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>
»그것을 자신을 시도