AngularJS 입문 튜토리얼 - AngularJS 지침_AngularJS
- WBOY원래의
- 2016-05-16 15:05:031662검색
HTML에 익숙한 친구들은 HTML에 많은 속성이 있다는 것을 알고 있습니다. 예를 들어, 3499910bf9dac5ae3c52d5ede7383485 태그의 href 속성을 사용하여 링크의 URL 주소를 지정할 수 있으며, d5fd7aea971a85678ba271703566ebfd 태그의 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에 현재 dc6dce4a544fdca2df29d5ac0ea9906b 요소가 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 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>
위의 예는 다음과 같이 구문 분석됩니다.
4a249f0d628e2318394fd9b75b4636b1맞춤 지침!473f0a7621bec819994bb5020d29372a
다음 방법으로 지침을 호출할 수 있습니다.
요소 이름: 6864244c5133c8be482ad78135864b813c099c703ad56dc8c4d20f130b6633bb
속성:02c79dc5dd46135dbadedffe5f4640ac16b28748ea4df4d9c2150843fecfba68
클래스 이름:246c50ea82720d6a9056246ce10521a416b28748ea4df4d9c2150843fecfba68
댓글: 67bc7b3d996e2c929d1f9ae6e3c0182b
사용 제한
제한 값은 다음과 같습니다.
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 지침입니다. 모든 분들께 도움이 되었으면 좋겠습니다!