HTML에 익숙한 친구들은 HTML에 많은 속성이 있다는 것을 알고 있습니다. 예를 들어, <a> 태그의 HREF 속성은 링크의 URL 주소를 지정할 수 있으며 <input> 태그의 유형 속성을 사용하여 입력 유형을 지정할 수 있습니다. AngularJS 지시문은 HTML 속성을 확장하여 AngularJS 응용 프로그램에 기능을 추가합니다.
AngularJS 지침은 HTML을 연장하는 데 사용됩니다. 이것들은 모두 ng- 접두사로 시작하는 특수 특성입니다. 우리는 다음 지침을 논의 할 것입니다.
일반적으로 사용되는 AngularJS 지침
NG-APP 지시문은 AngularJS 응용 프로그램을 초기화합니다.
NG-Init 지시문은 응용 프로그램 데이터를 초기화합니다.
NG- 모델 지침은 요소 값 (예 : 입력 필드 값)을 응용 프로그램에 바인딩합니다.
NG-APP 명령
NG-APP 지시문은 AngularJS 응용 프로그램을 시작합니다. 루트 요소를 정의합니다. AngularJS 응용 프로그램의 웹 페이지를로드하는 응용 프로그램을 자동으로 초기화하거나 시작합니다. 또한 다양한 AngularJS 모듈 AngularJS 응용 프로그램을로드하는 데 사용됩니다. 다음 예에서는 DIV 요소의 NG-APP 속성을 사용하여 기본 AngularJS 응용 프로그램을 정의합니다.
<div ng-app = ""> ... </div>
ng-init 지침
NG-Init 지시문은 AngularJS 응용 프로그램의 데이터를 초기화합니다. 변수를 사용하기 위해 응용 프로그램에 값을 넣는 데 사용됩니다. 다음 예에서는 국가 배열을 초기화합니다. JSON 구문을 사용하여 국가 배열을 정의하십시오.
<div ng-app = ""ng-init = "국가 = [{locale : 'en-us', 이름 : '미국'}, {locale : 'en-gb', 이름 : '영국'}, {locale : 'en-fr', 이름 : '프랑스'}]> ... </div>ng- 모델 명령
NG- 모델 지침은 AngularJS 응용 프로그램에 사용되는 모델/변수를 정의합니다. 다음 예에서는 "이름"이라는 모델을 정의합니다.
<div ng-app = ""> ... <p> 당신의 이름을 입력하십시오 : <input type = "text"ng-model = "name"> </p> </div>
NG- 반복 지시문
NG- 반복 지시문은 HTML 요소 컬렉션에서 각 항목을 반복합니다. 다음 예에서는 배열 국가를 반복했습니다.
<div ng-app = ""> ... <p> 로케일이있는 국가 목록 : </p> <ol> <li ng-repeat = "국가 국가"> {{ 'country :' + country.name + ', locale :' + country.locale}} </li> </ol> </div>AngularJS 지침 예
<div ng-app = ""ng-init = "firstName = 'John'"> <p> 입력 상자에 들어가십시오 : </p> <p> 이름 : <input type = "text"ng-model = "firstName"> </p> <p> 당신이 입력하는 것은 다음과 같습니다.
NG-APP 지시문은 AngularJS에 현재 <div> 요소가 AngularJS 응용 프로그램임을 알려줍니다. NG-Init 지시문은 데이터를 초기화하는 데 사용되며, 이는 JavaScript의 정의 변수와 동일합니다. AngularJS에서의 데이터 결합, AngularJS 표현식 및 AngularJS 데이터 동기화. {{FirstName}}은 ng-model = "FirstName"에 의해 동기화됩니다. 위의 예는 페이지의 입력 상자에 입력 한 컨텐츠를 동기화합니다.
알아채다
웹 페이지에는 다른 요소로 실행되는 여러 AngularJS 응용 프로그램이 포함될 수 있습니다.
ng-init를 사용하여 데이터를 초기화하는 것은 그다지 일반적이지 않습니다. 후속 장에서 데이터를 초기화하는 더 나은 방법을 배웁니다.
NG- 반복 지시문
NG-Repeat 지침은 HTML 요소를 반복하며,이 요소는 JavaScript의 각 루프와 동일합니다.
<div ng-app = ""ng-init = "Names = [ 'jani', 'hege', 'kai']> <p> ng-repeat를 루프 어레이에 사용하기 </p> <ul> <li ng-repeat ="x names in names "> {{x}} </li> </ul> div>위의 예는 다음 HTML로 구문 분석됩니다.
<ul> <li> Jani </li> <li> Hege </li> <li> Kai </li> </ul>
NG-Repeat는 객체 배열에서 작동합니다.
<div ng-app = ""ng-init = "names = [{name : 'jani', country : 'Norway'}, 'Norway'}, {name : 'hege', country : 'sweden'}, {name : 'kai', 'country :'denmark '}]" "> <p> loop object : </p> <ul> <li ng-repeat = x in names"x in in names " x.country}} </li> </ul> </div>다음 HTML로 구문 분석됩니다.
<ul> <li> 노르웨이 Jani </li> <li> 스웨덴 </li> <li> 덴마크, 덴마크 </li> </ul>
맞춤 명령
AngularJS의 내장 지침 외에도 사용자 정의 지시문을 만들 수도 있습니다. .Directive 기능을 사용하여 사용자 정의 지시문을 추가 할 수 있습니다. 사용자 정의 지시문을 호출하려면 HTML 요소에 사용자 정의 지시문 이름을 추가해야합니다. 낙타 방법을 사용하여 지시문, AskH5Directive를 지정하지만이를 사용하면 분할해야합니다.
<body ng-app = "myapp"> <askh5-direction> </askh5-directive> <cript> var app = angular.module ( "myApp"); app.directive ( "askH5directive", function () {return {템플릿 : "<H1> Custom Siftive! </h1>"}); </script>});위의 예는 다음과 같이 구문 분석됩니다.
<H1> 사용자 정의 명령! </h1>
명령은 다음과 같은 방식으로 호출 할 수 있습니다.
요소 이름 : <askh5-directive> </askh5-directive>
속성 : <div askh5-directive> </div>
클래스 이름 : <div> </div>
댓글 : <!-지침 : AskH5- 지정->
제한 사용을 제한합니다
제한 값은 다음과 같습니다.
e 요소 이름 만 사용합니다
속성 만 사용할 수 있습니다
C 클래스 이름 만 사용합니다
M은 의견에만 사용할 수 있습니다
제한의 기본값은 EA입니다. 즉, 명령은 요소 이름과 속성 이름을 통해 호출 될 수 있습니다.
var app = angular.module ( "myapp", []); app.directive ( "askh5directive", function () {return {restrict : "a", 템플릿 : "<h1> 사용자 정의 지시문! </h1>"};});위의 AngularJS는 속성 호출 만 허용합니다.
관련 판독 값 :
AngularJS 소개 자습서 : AngularJS 표현식
위의 내용은 편집자가 소개 한 AngularJS의 AngularJS 입문 자습서입니다. 나는 그것이 모두에게 도움이되기를 바랍니다!