AngularJS와 모듈
모듈 응용 프로그램을 정의합니다.
모듈은 응용 프로그램의 다른 부분의 컨테이너입니다.
컨트롤러 모듈은 컨테이너 애플리케이션이다.
제어기는 보통 모듈에 속한다.
모듈을 만들고
당신은angular.module 기능의 AngularJS와에 의해 모듈을 만들 수 있습니다 :
<스크립트>
var에 응용 = angular.module ( "을 myApp" , []);
"MyApp를"파라미터는 애플리케이션 HTML 요소의 수행에 대응한다.
이제 컨트롤러를 AngularJS와 응용 프로그램에서 등 지침, 필터를 추가 할 수 있습니다.
컨트롤러 추가
당신은 응용 프로그램 컨트롤러를 추가 할 수NG 컨트롤러 지침을 사용할 수 있습니다 :
예를 AngularJS와
{{FIRSTNAME + ""+이 lastName }}
</ DIV>
<스크립트>
app.controller ( "myCtrl", 기능 ( $ 범위) {
$ scope.firstName = "존";
$ scope.lastName = "미상";
});
»시도
당신은 할 수 있습니다 AngularJS와 컨트롤러는 컨트롤러 섹션에 대한 자세한 지식을 배웁니다.
지침에 추가
AngularJS와는 응용 프로그램에 기능을 추가하는 데 사용할 수 있습니다, 많은 내장 명령을 제공합니다.
전체 지침의 내용에서 찾을 수 있습니다 AngularJS와 참조 설명서 .
또한, 당신은 자신의 명령 응용 프로그램을 추가하기 위해 모듈을 사용할 수 있습니다 :
예를 AngularJS와
<스크립트>
app.directive ( "w3bigDirective"함수 ( ) {
{반환
템플릿 : "나는 명령 생성자를 만들어!"
};
});
»시도
당신은 할 수 있습니다 AngularJS와 지시어는 명령 섹션에 대한 자세한 지식을 배웁니다.
모듈 및 컨트롤러는 JS 파일에 포함
일반적으로 프로그램 모듈 AngularJS와 상기 제어부는 자바 스크립트 파일을 포함한다.
다음의 예에서, "myApp.js"는 프로그램 애플리케이션 모듈의 정의를 포함하고, "myCtrl.js"파일 컨트롤러를 포함
예를 AngularJS와
<HTML>
<스크립트 SRC = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<바디>
<사업부의 NG-응용 프로그램 = "을 myApp "NG 컨트롤러 = "myCtrl">
{{FIRSTNAME + ""+이 lastName }}
</ DIV>
<스크립트 SRC = "myApp.js"> </ script>
<스크립트 SRC = "myCtrl.js"> </ script>
</ BODY>
</ HTML>
»시도
myApp.js
 | 모듈 정의에서 [] 파라미터 모듈 종속성을 정의하는 데 사용된다. 대괄호 [] 의존성이있는 경우 모듈이 괄호로 작성된 모듈 이름에 따라 달라집니다 다음에 의존하지 않음을 나타냅니다. |
|---|
myCtrl.js
$scope.firstName = "John";
$scope.lastName= "Doe";
});
함수는 전역 네임 스페이스에 영향을 미칠 것
자바 스크립트는 전역 함수를 사용하지 않아야합니다. 이들은 쉽게 다른 스크립트 파일을 포함 할 수 있기 때문이다.
모듈의 모든 기능은, 이러한 문제를 방지 할 수 있도록 모듈 범위 AngularJS와.
라이브러리를로드 할 때?
| 우리의 예에서, 모든 AngularJS와 HTML 문서 라이브러리는 머리에로드됩니다. |
|---|
일반적으로 모든 스크립트에 추천 HTML 응용 프로그램의 <몸> 요소의 하단에 배치됩니다.
HTML로드 스크립트를 로딩 될 수 없기 때문에 이것은 페이지의 로딩 속도를 증가시킬 것이다.
우리의 여러 AngularJS와 예, 당신은 AngularJS와 라이브러리가 문서의 <head> 영역에로드되어 표시됩니다.
호출이 단지 라이브러리를 로딩의 완료 후에 수행 될 angular.module하기 때문에이 예에서는, <head> 요소 AngularJS와이로드된다.
또 다른 해결책은 AngularJS와 라이브러리 <몸> 요소를로드하는 것입니다,하지만 AngularJS와 스크립트의 전면에 배치해야합니다 :
예를 AngularJS와
<HTML>
<헤드>
<메타 문자 집합 = "UTF-8 ">
<스크립트 SRC = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ 헤드>
<바디>
<사업부의 NG-응용 프로그램 = "을 myApp "NG 컨트롤러 = "myCtrl">
{{FIRSTNAME + ""+이 lastName }}
</ DIV>
<스크립트>
var에 응용 = angular.module ( "을 myApp", []);
app.controller ( "myCtrl", 기능 ($ 범위) {
$ Scope.firstName = "존";
$ Scope.lastName = "미상";
});
</ 스크립트>
</ BODY>
</ HTML>
»시도