HTML에 익숙한 친구들은 HTML에 많은 속성이 있다는 것을 알고 있습니다. 예를 들어, 태그의 href 속성을 사용하여 링크의 URL 주소를 지정할 수 있으며, 태그의 type 속성을 사용하여 입력 유형을 지정할 수 있습니다. AngularJS 지시문은 HTML 속성을 확장하여 AngularJS 애플리케이션에 기능을 추가합니다.
AngularJS 지시문은 HTML을 확장하는 데 사용됩니다. 이는 ng- 접두사로 시작하는 특수 속성입니다. 우리는 다음 지시문에 대해 논의할 것입니다:
일반적인 AngularJS 명령
ng-app 지시문은 AngularJS 애플리케이션을 초기화합니다.
ng-init 지시문은 애플리케이션 데이터를 초기화합니다.
ng-model 지시문은 요소 값(예: 입력 필드 값)을 애플리케이션에 바인딩합니다.
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="countries=[{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'},
{locale:'en-FR',name:'France'}]">
...
</div>ng-model 지시문
ng-model 지시문은 AngularJS 애플리케이션에 사용되는 모델/변수를 정의합니다. 아래 예에서는 "name"이라는 모델을 정의합니다.
<div ng-app=""> ... <p>Enter your Name: <input type="text" ng-model="name"></p> </div>
ng-반복 지시어
ng-repeat 지시어는 html 요소 모음의 각 항목을 반복합니다. 아래 예에서는 국가 배열을 반복했습니다.
<div ng-app="">
...
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat="country in countries">
{{ '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>你输入的为： {{ firstName }}</p>
</div> ng-app 지시문은 AngularJS에 현재
주목
웹페이지에는 다양한 요소에서 실행되는 여러 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 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'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>은 다음 HTML로 구문 분석됩니다.
<ul> <li>Jani, Norway</li> <li>Hege, Sweden</li> <li>Kai, Denmark</li> </ul>
맞춤 지침
AngularJS에 내장된 지시문 외에도 사용자 지정 지시문을 만들 수도 있습니다. .directive 함수를 사용하여 사용자 정의 지시어를 추가할 수 있습니다. 사용자 지정 지시문을 호출하려면 HTML 요소에 사용자 지정 지시문 이름을 추가해야 합니다. camelCase를 사용하여 지시문의 이름을 askh5Directive로 지정하지만 사용 시에는 askh5-directive
로 구분해야 합니다.
<body ng-app="myApp">
<askh5-directive></askh5-directive>
<script>
var app = angular.module("myApp", []);
app.directive("askh5Directive", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>위의 예는 다음과 같이 구문 분석됩니다.
다음 방법으로 지침을 호출할 수 있습니다.
요소 이름:
속성:
클래스 이름:
댓글:
사용 제한
제한 값은 다음과 같습니다.
E는 요소 이름에만 사용할 수 있습니다
속성에만 사용 가능
C는 클래스 이름에만 사용할 수 있습니다
M은 댓글만 가능
restrict의 기본값은 EA입니다. 즉, 요소 이름과 속성 이름을 통해 명령을 호출할 수 있습니다.
var app = angular.module("myApp", []);
app.directive("askh5Directive", function() {
return {
restrict : "A",
template : "<h1>自定义指令!</h1>"
};
});위의 AngularJS에서는 속성 호출만 허용됩니다.
관련 자료:
AngularJS 입문 튜토리얼 - AngularJS 표현식
위 내용은 편집자가 소개한 AngularJS 입문 튜토리얼의 AngularJS 지침입니다. 모든 분들께 도움이 되었으면 좋겠습니다!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
