1. Home
  2. AngularJS와 모듈

최고의 AngularJS와 모듈 튜토리얼 2024년, 이 튜토리얼에서는 모듈을 만들고,컨트롤러 추가,예를 AngularJS와,지침에 추가,예를 AngularJS와,모듈 및 컨트롤러는 JS 파일에 포함,예를 AngularJS와,myApp.js,myCtrl.js,함수는 전역 네임 스페이스에 영향을 미칠 것,라이브러리를로드 할 때?,예를 AngularJS와,를 배울 수 있습니다.

AngularJS와 모듈

모듈 응용 프로그램을 정의합니다.

모듈은 응용 프로그램의 다른 부분의 컨테이너입니다.

컨트롤러 모듈은 컨테이너 애플리케이션이다.

제어기는 보통 모듈에 속한다.

모듈을 만들고

당신은angular.module 기능의 AngularJS와에 의해 모듈을 만들 수 있습니다 :

<사업부의 NG-응용 프로그램 = "을 myApp "> ko. </ DIV>

<스크립트>

var에 응용 = angular.module ( "을 myApp" , []);

</ 스크립트>

"MyApp를"파라미터는 애플리케이션 HTML 요소의 수행에 대응한다.

이제 컨트롤러를 AngularJS와 응용 프로그램에서 등 지침, 필터를 추가 할 수 있습니다.

컨트롤러 추가

당신은 응용 프로그램 컨트롤러를 추가 할 수NG 컨트롤러 지침을 사용할 수 있습니다 :

예를 AngularJS와

<사업부의 NG-응용 프로그램 = "을 myApp "NG 컨트롤러 = "myCtrl" >
{{FIRSTNAME + ""+이 lastName }}
</ DIV>

<스크립트>

var에 응용 = angular.module ( "을 myApp" , []);

app.controller ( "myCtrl", 기능 ( $ 범위) {
$ scope.firstName = "존";
$ scope.lastName = "미상";
});

</ 스크립트>

»시도

당신은 할 수 있습니다 AngularJS와 컨트롤러는 컨트롤러 섹션에 대한 자세한 지식을 배웁니다.

지침에 추가

AngularJS와는 응용 프로그램에 기능을 추가하는 데 사용할 수 있습니다, 많은 내장 명령을 제공합니다.

전체 지침의 내용에서 찾을 수 있습니다 AngularJS와 참조 설명서 .

또한, 당신은 자신의 명령 응용 프로그램을 추가하기 위해 모듈을 사용할 수 있습니다 :

예를 AngularJS와

<사업부의 NG-응용 프로그램 = "을 myApp "w3big-지시문> </ DIV>

<스크립트>

var에 응용 = angular.module ( "을 myApp" , []);

app.directive ( "w3bigDirective"함수 ( ) {
{반환
템플릿 : "나는 명령 생성자를 만들어!"
};
});
</ 스크립트>

»시도

당신은 할 수 있습니다 AngularJS와 지시어는 명령 섹션에 대한 자세한 지식을 배웁니다.

모듈 및 컨트롤러는 JS 파일에 포함

일반적으로 프로그램 모듈 AngularJS와 상기 제어부는 자바 스크립트 파일을 포함한다.

다음의 예에서, "myApp.js"는 프로그램 애플리케이션 모듈의 정의를 포함하고, "myCtrl.js"파일 컨트롤러를 포함

예를 AngularJS와

<! DOCTYPE html로>
<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

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

주의 모듈 정의에서 [] 파라미터 모듈 종속성을 정의하는 데 사용된다.
대괄호 [] 의존성이있는 경우 모듈이 괄호로 작성된 모듈 이름에 따라 달라집니다 다음에 의존하지 않음을 나타냅니다.

myCtrl.js

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

함수는 전역 네임 스페이스에 영향을 미칠 것

자바 스크립트는 전역 함수를 사용하지 않아야합니다. 이들은 쉽게 다른 스크립트 파일을 포함 할 수 있기 때문이다.

모듈의 모든 기능은, 이러한 문제를 방지 할 수 있도록 모듈 범위 AngularJS와.

라이브러리를로드 할 때?

주의 우리의 예에서, 모든 AngularJS와 HTML 문서 라이브러리는 머리에로드됩니다.

일반적으로 모든 스크립트에 추천 HTML 응용 프로그램의 <몸> 요소의 하단에 배치됩니다.

HTML로드 스크립트를 로딩 될 수 없기 때문에 이것은 페이지의 로딩 속도를 증가시킬 것이다.

우리의 여러 AngularJS와 예, 당신은 AngularJS와 라이브러리가 문서의 <head> 영역에로드되어 표시됩니다.

호출이 단지 라이브러리를 로딩의 완료 후에 수행 될 angular.module하기 때문에이 예에서는, <head> 요소 AngularJS와이로드된다.

또 다른 해결책은 AngularJS와 라이브러리 <몸> 요소를로드하는 것입니다,하지만 AngularJS와 스크립트의 전면에 배치해야합니다 :

예를 AngularJS와

<! DOCTYPE html로>
<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>

»시도

핫 튜토리얼

Contact US

AngularJS와 모듈
10/30