AngularJS 지침
AngularJS는 지시문이라는 새로운 속성으로 HTML을 확장합니다.
AngularJS는 내장 지침을 통해 응용 프로그램에 기능을 추가합니다.
AngularJS를 사용하면 지침을 사용자 정의 할 수 있습니다.
AngularJS 지침
Angularjs 지시문은 접두사 ng-가있는 확장 된 HTML 속성입니다.
NG-APP 지시문은 AngularJS 응용 프로그램을 초기화합니다.
NG-Init 지시문은 응용 프로그램 데이터를 초기화합니다.
NG- 모델 지침은 요소 값 (예 : 입력 필드 값)을 응용 프로그램에 바인딩합니다.
전체 지침은 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> <lyg-app = "" "" ng-init = "firstName = 'john'"> <p> 입력 상자에 들어가십시오 : </p> <p> 이름 : <input type = "text"ng-model = "firstName"> </p> <p> 당신은 다음과 같이 입력했습니다 : {{firstName}} </p> </body> </html>실행 결과 :
입력 상자에 들어가십시오 :
이름:
당신이 입력 한 것은 John입니다
NG-APP 지시문은 AngularJS에 <div> 요소가 AngularJS 응용 프로그램의 "소유자"라고 말합니다.
참고 : 웹 페이지에는 다른 요소로 실행되는 여러 AngularJS 응용 프로그램이 포함될 수 있습니다.
데이터 바인딩
위의 예에서 {{firstName}} 표현식은 AngularJS 데이터 바인딩 표현식입니다.
AngularJS에서의 데이터 결합, AngularJS 표현식 및 AngularJS 데이터 동기화.
{{FirstName}}은 ng-model = "FirstName"에 의해 동기화됩니다.
다음 예에서 두 텍스트 필드는 두 개의 NG 모델 지시문으로 동기화됩니다.
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-papp = "" "" data-ng-init = "수량 = 1; price = 5"> 가격 계산기 수량 : <input type = "number"ng-model = "수량"> 가격 : <입력 유형 = "number"ng-model = "price"> <p> <b> 총 가격 : </b> {{Quantity * Price}} </p> </body> </html> </html>실행 결과 :
가격 계산기
수량: 가격:
총 가격 : 5
참고 : ng-init를 사용하는 것이 일반적이지 않습니다. 컨트롤러 장에서 데이터를 초기화하는 더 나은 방법을 배웁니다.
HTML 요소를 반복하십시오
NG- 반복 지시문은 HTML 요소를 반복합니다.
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-papp = "" "" data-ng-init = "names = [jani ','hege ','kai ']"> <p> ng-repeat를 루프 어레이에 사용합니다 </p> <ul> <li data-ng-repeat = "x in names"> {x}} </li> </ul> </body> </html>NG- 반복을 사용하여 배열을 루프하십시오
NG-Repeat 지침은 다양한 객체에 사용됩니다.
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> <lyg-app = "" "" ng-init = "names = [{name : 'jani', 컨트리 : '노르웨이'}, {name : 'hege', country : 'sweden'}, {name : 'kai', country : 'denmark'}]"> <p> 루프 객체 : </p> <ul> <li ng-repeat = "x in names"> {x.name + ',' + x. }} </li> </ul> </div> </body> </html>루프 객체 :
NoteangularJS는 데이터베이스 CRUD를 완벽하게 지원합니다 (생성, 읽기 읽기, 업데이트 업데이트, 삭제 삭제) 응용 프로그램.
인스턴스의 개체를 데이터베이스의 레코드로 생각하십시오.
NG-APP 명령
NG-APP 지시문은 AngularJS 응용 프로그램의 루트 요소를 정의합니다.
NG-APP 지시문은 웹 페이지가로드 될 때 응용 프로그램을 자동으로 부츠 (자동 지침 화)합니다.
나중에 NG-APP이 값 (예 : NG-App = "MyModule")을 통해 코드 모듈에 연결하는 방법을 배웁니다.
ng-init 지침
NG-Init 지시문은 AngularJS 응용 프로그램의 초기 값을 정의합니다.
일반적으로 NG-Init는 사용되지 않습니다. 대신 컨트롤러 나 모듈을 사용합니다.
나중에 컨트롤러 및 모듈에 대해 자세히 알아볼 수 있습니다.
ng- 모델 명령
NG 모델 지시문은 HTML 요소를 응용 프로그램 데이터에 바인딩합니다.
NG 모델 지시 사항은 다음과 같습니다.
응용 프로그램 데이터에 대한 유형 확인 (번호, 이메일, 필수)을 제공합니다.
응용 프로그램 데이터에 대한 상태 (무효, 더러운, 터치, 오류)를 제공합니다.
HTML 요소에 대한 CSS 클래스를 제공합니다.
HTML 요소를 HTML 형태에 바인딩하십시오.
NG- 반복 지시문
NG-Repeat Directive Clones는 컬렉션의 각 항목에 대해 HTML 요소 (배열).
사용자 정의 지시문을 만듭니다
AngularJS의 내장 지침 외에도 사용자 정의 지시문을 만들 수도 있습니다.
.Directive 기능을 사용하여 사용자 정의 지시문을 추가 할 수 있습니다.
사용자 정의 지시문을 호출하려면 HTML 요소에 사용자 정의 지시문 이름을 추가해야합니다.
Camel Method를 사용하여 지침, runoobdirective의 이름을 지정하지만이를 사용할 때는 분할, runoob-indibleation을 사용해야합니다.
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 ng-app = "myApp"> <Runoob-directive> </runoob-directive> <cript> var app = angular.module ( "myApp"); app.directive ( "runoobdirective", function () {템플릿 : "custom directive!"};}); </body> </body> </html>실행 결과 :
맞춤형 명령!
다음과 같은 방법으로 지침을 호출 할 수 있습니다.
요소 이름
재산
클래스 이름
의견
다음 예제는 동일한 결과를 출력 할 수 있습니다.
요소 이름
<! 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 ng-app = "myApp"> <Runoob-directive> </runoob-directive> <cript> var app = angular.module ( "myApp"); app.directive ( "runoobdirective", function () {템플릿 : "custom directive!"};}); </body> </body> </html>실행 결과 :
맞춤형 명령!
재산:
<! 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 ng-app = "myapp"> <div runoob-directive> </div> <cript> var app = angular.module ( "myapp", []); app.directive ( "runoobdirective", function () {return {template : "custom directive!"};}); </script> </body> </html>실행 결과 :
맞춤형 명령!
클래스 이름 :
<! 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 ng-app = "myapp"> Angular.Module ( "myApp", []); app.directive ( "runoobdirection", function () {return {resling : "c", 템플릿 : "c"! "};}); </script> <p> <strong> </strong> </b>의 값을 설정해야합니다. </p> </body> </html>맞춤형 명령!
참고 : 클래스 이름으로 지시문을 호출하려면 제한 값을 "C"로 설정해야합니다.
참고 :
<! 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 ng-app = "myapp"> <myapp "> -> <cript> var app = angular.module ( "myApp", []); app.directive ( "runoobdirection", function () {return {restrict : "m", "m", replace : template : "custom directive!"};}); </script> <p> <strong> note : </strong> attreation을 추가해야합니다. 보이는. </p> <p> <strong> 참고 : </strong> 주석을 통해 지시문을 호출하려면 <b> gotrict </b>의 값을 "m"으로 설정해야합니다. </p> </body> </html>실행 결과 :
맞춤형 명령!
참고 :이 인스턴스에 대체 속성을 추가해야합니다. 그렇지 않으면 주석이 표시되지 않습니다.
참고 : 주석을 통해 지침을 호출하려면 제한 값을 "m"으로 설정해야합니다.
제한된 사용
귀하는 특정 방식으로만 지시문을 호출하도록 제한 할 수 있습니다.
예
제한 속성을 추가하고 값 만 "a"로 설정함으로써 명령은 속성을 통해서만 호출 할 수 있습니다.
예제 코드 :
<! 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 ng-app = "myApp"> <Runoob-directive> </runoob-directive> <div runoob-directive> </div> <cript> var app = angular.module ( "myApp", []); App.Directive ( "runoobdirection", function () {return {retong : "emercol 지시자!" };}); </script> <p> <strong> 참고 : </strong> <strong> 제한 </strong> 속성 값을 "a"로 설정함으로써 HTML 요소의 속성을 통해서만 지시를 설정할 수 있습니다. </p> </body> </html>실행 결과 :
맞춤형 명령!
참고 : 제한 속성 값을 "A"로 설정하여 설정 명령을 호출 할 수 있습니다.
제한 값은 다음과 같습니다.
e 요소 이름 만 사용합니다
속성 만 사용할 수 있습니다
C 클래스 이름 만 사용합니다
M은 의견에만 사용할 수 있습니다
제한의 기본값은 EA입니다. 즉, 명령은 요소 이름과 속성 이름을 통해 호출 될 수 있습니다.
위는 AngularJS 명령 정보의 편집이며 나중에 계속 보충 될 것입니다.