AngularJS 모듈
모듈은 응용 프로그램을 정의합니다.
모듈은 응용 프로그램의 다른 부분을위한 컨테이너입니다.
모듈은 애플리케이션 컨트롤러 용 컨테이너입니다.
컨트롤러는 일반적으로 모듈에 속합니다.
모듈을 만듭니다
Angular.Module 함수를 통해 모듈을 만들 수 있습니다.
<div ng-app = "myapp"> ... </div> <cript> var app = angular.module ( "myapp", []); </스크립트>
"MyApp"매개 변수는 응용 프로그램을 실행하는 HTML 요소에 해당합니다.
이제 AngularJS 응용 프로그램에 컨트롤러, 지침, 필터 등을 추가 할 수 있습니다.
컨트롤러를 추가하십시오
NG-Controller Directive를 사용하여 응용 프로그램의 컨트롤러를 추가 할 수 있습니다.
AngularJS 인스턴스
<! 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> <cript> var app = angular.Module ( "myApp", []); App.Controller ( "myctrl", function ($ scope) {$ scope.firstname = "$ scope.lastname" "doe";}); </script> </body> </html>실행 효과 :
존 도
AngularJS 컨트롤러 장에서 컨트롤러에 대해 자세히 알아볼 수 있습니다.
명령을 추가하십시오
AngularJS는 응용 프로그램에 기능을 추가하는 데 사용할 수있는 많은 내장 지침을 제공합니다.
전체 지침은 AngularJS 참조 설명서를 참조하십시오.
또한 모듈을 사용하여 응용 프로그램에 대한 고유 한 지침을 추가 할 수 있습니다.
AngularJS 인스턴스
<! 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" runoob-directive> </div> <cript> var app = angular.module ( "myapp", []); app.directive ( "runoobdirective", function () {return {template : "지침 생성자에서 그것을 만들었습니다! </script> </body> </html>실행 결과 :
지침 생성자로 만들었습니다!
AngularJS Directives 장에서 지침에 대해 자세히 알아볼 수 있습니다.
모듈 및 컨트롤러는 JS 파일에 포함되어 있습니다
일반적으로 AngularJS 응용 프로그램에는 JavaScript 파일의 모듈 및 컨트롤러가 포함됩니다.
다음 예에서 "myapp.js"는 응용 프로그램 모듈의 정의기를 포함하고 "myctrl.js"파일에는 컨트롤러가 포함되어 있습니다.
AngularJS 인스턴스
<! 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>실행 결과 :
존 도
myapp.js
var app = angular.module ( "myapp", []);
참고 모듈 정의에서 [] 매개 변수는 모듈의 종속성을 정의하는 데 사용됩니다.
브래킷 []는 모듈에 종속성이 없음을 나타냅니다. 종속성이있는 경우 종속성의 이름이 괄호 안에 기록됩니다.
myctrl.js
app.controller ( "myctrl", function ($ scope) {$ scope.firstname = "john"; $ scope.lastname = "doe";});기능은 글로벌 네임 스페이스에 영향을 미칩니다
글로벌 기능은 JavaScript에서 피해야합니다. 다른 스크립트 파일에서 쉽게 덮어 쓰기 때문입니다.
AngularJS 모듈을 사용하면 모든 기능 이이 모듈에서 범위를 지정 하여이 문제를 피할 수 있습니다.
라이브러리는 언제로드됩니까?
참고 :이 경우 모든 AngularJS 라이브러리는 HTML 문서의 헤드에로드됩니다.
HTML 애플리케이션의 경우 일반적으로 <body> 요소 하단에 모든 스크립트를 배치하는 것이 좋습니다.
HTML로드에는 스크립트로드가 적용되지 않기 때문에 웹 페이지로드 속도가 증가합니다.
여러 AngularJS 인스턴스에서 AngularJS 라이브러리가 문서의 <head> 영역에로드되어 있음을 알 수 있습니다.
우리의 예에서는 AngularJS가 <head> 요소에로드됩니다. angular에 대한 호출은 라이브러리가로드 된 후에 만 만들 수 있기 때문입니다.
또 다른 해결책은 <body> 요소에 AngularJS 라이브러리를로드하는 것이지만 AngularJS 스크립트 앞에 배치해야합니다.
AngularJS 인스턴스
<! 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> <cript> var app = angular.Module ( "myApp", []); App.Controller ( "myctrl", function ($ scope) {$ scope.firstname = "$ scope.lastname" "doe";}); </script> </body> </html>실행 결과 :
존 도
위의 것은 AngularJS 모듈 정보를 편집 한 것이며 나중에 계속 추가 할 것입니다. 친구를 프로그래밍하는 데 도움이되기를 바랍니다.