AngularJS 입문 튜토리얼 - AngularJS 지침_AngularJS

WBOY

풀어 주다： 2016-05-16 15:05:03

원래의

1675명이 탐색했습니다.

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 지시문은 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>

로그인 후 복사

위의 예는 다음과 같이 구문 분석됩니다.

맞춤 지침!

다음 방법으로 지침을 호출할 수 있습니다.

요소 이름:

속성:

클래스 이름:

댓글:

사용 제한

제한 값은 다음과 같습니다.

E는 요소 이름에만 사용할 수 있습니다

속성에만 사용 가능

C는 클래스 이름에만 사용할 수 있습니다

M은 댓글만 가능

restrict의 기본값은 EA입니다. 즉, 요소 이름과 속성 이름을 통해 명령을 호출할 수 있습니다.

var app = angular.module("myApp", []);
app.directive("askh5Directive", function() {
return {
restrict : "A",
template : "<h1>自定义指令!</h1>"
};
});

로그인 후 복사

위의 AngularJS에서는 속성 호출만 허용됩니다.