최신 웹 개발 튜토리얼
 

AngularJS지침

❮ 이전 다음 장 ❯

AngularJS와는 지침라는 새로운 속성으로 HTML을 확장 할 수 있습니다.

AngularJS와는 응용 프로그램에 기능을 제공하는 기본 지침의 집합이 있습니다.

AngularJS와는 당신이 당신의 자신의 지시를 정의 할 수 있습니다.

AngularJS와 지침

AngularJS와 지시어는 HTML이 접두사와 속성 확장된다 ng- .

ng-app 지시자는 AngularJS와 응용 프로그램을 초기화합니다.

ng-init 지침은 응용 프로그램 데이터를 초기화합니다.

ng-model 지시자는 애플리케이션 데이터에 HTML 컨트롤의 값 (입력 선택, 텍스트 영역)를 결합한다.

우리의 모든 AngularJS와 지침에 대한 읽기 AngularJS와 지시어 참조 .

예

<div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>

</div>
»그것을 자신을 시도

ng-app 지시어는 <div> 요소는 AngularJS와 응용 프로그램의 "소유자"입니다 AngularJS와 알려줍니다.

데이터 바인딩

{{ firstName }} 표현은, 위의 예에서, 표현을 바인딩 AngularJS와 데이터입니다.

AngularJS와 데이터 바인딩은 AngularJS와 데이터를 AngularJS와 식을 결합한다.

{{ firstName }} 함께 결합되어 ng-model="firstName" .

다음 예에서는 두 개의 텍스트 필드는 두 개의 NG 모델 지시어와 함께 결합되어 있습니다 :

예

<div ng-app="" ng-init="quantity=1;price=5">

Quantity: <input type="number" ng-model="quantity">
Costs:    <input type="number" ng-model="price">

Total in dollar: {{ quantity * price }}

</div>
»그것을 자신을 시도
노트 사용 ng-init 매우 일반적인 아닙니다. 당신은 컨트롤러에 대한 장에서 데이터를 초기화하는 방법을 배우게됩니다.

HTML 요소 반복

ng-repeat 지시자는 HTML 요소를 반복한다 :

예

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>
»그것을 자신을 시도

ng-repeat 지시자는 실제로 컬렉션의 각 항목에 대해 한 번 HTML 요소를 복제합니다.

ng-repeat 객체의 배열에서 사용 지침 :

예

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>
»그것을 자신을 시도
노트 AngularJS와 데이터베이스 CRUD (읽기 업데이트 삭제 만들기) 응용 프로그램에 적합합니다.
이러한 개체가 데이터베이스에서 레코드 있다면 그냥 상상.

NG-앱 지침

ng-app 지시자는 AngularJS와 응용 프로그램의 루트 요소를 정의합니다.

ng-app 웹 페이지가로드 될 때 지시문은 자동으로 부트 스트랩 응용 프로그램 (자동으로 초기화)됩니다.

NG-초기화 지침

ng-init 지시자는 AngularJS와 응용 프로그램에 대한 초기 값을 정의합니다.

일반적으로, 당신은 NG-초기화를 사용하지 않습니다. 대신 컨트롤러 또는 모듈을 사용합니다.

나중에 컨트롤러와 모듈에 대한 자세한 내용을 배울 것입니다.

NG 모델 지침

ng-model 지시자는 애플리케이션 데이터에 HTML 컨트롤의 값 (입력 선택, 텍스트 영역)를 결합한다.

ng-model 지시문 수도 있습니다 :

  • 응용 프로그램 데이터 (번호, 이메일, 필수)에 대한 입력 유효성 검사를 제공합니다.
  • 응용 프로그램 데이터의 상태 (잘못된, 더러운, 감동, 오류)를 제공합니다.
  • HTML 요소의 CSS 클래스를 제공합니다.
  • HTML 양식에 바인딩 HTML 요소입니다.

에 대한 자세한 읽기 ng-model 다음 장에서 지시문을.

새로운 지시어 만들기

모든 내장 AngularJS와 지시뿐만 아니라, 당신은 당신의 자신의 지시를 만들 수 있습니다.

새 지침은 사용하여 만든 .directive 기능을.

새로운 지시어를 호출하려면, 새로운 지침과 동일한 태그 이름을 가진 HTML 요소를 확인합니다.

지시문의 이름을 지정할 때, 당신은 낙타의 경우 이름을 사용해야합니다, w3TestDirective 그것을 호출 할 때,하지만, 당신은 사용해야합니다 - 분리 이름, w3-test-directive :

예

<body ng-app="myApp">

<w3-test-directive></w3-test-directive>

<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
    return {
        template : "<h1>Made by a directive!</h1>"
    };
});
</script>

</body>
»그것을 자신을 시도

당신은 사용하여 지시를 호출 할 수 있습니다 :

  • 요소 이름
  • 속성
  • 수업
  • 댓글

아래 예들은 모두 동일한 결과를 생성한다 :

요소 이름

<w3-test-directive></w3-test-directive>
»그것을 자신을 시도

속성

<div w3-test-directive></div>
»그것을 자신을 시도

수업

<div class="w3-test-directive"></div>
»그것을 자신을 시도

댓글

<!-- directive: w3-test-directive -->
»그것을 자신을 시도

제한

단지 몇 가지 방법에 의해 호출에 당신은 당신의 지시를 제한 할 수 있습니다.

예

추가하여 restrict 값과 속성을 "A" , 지시문은 속성으로 호출 할 수 있습니다 :

var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
    return {
        restrict : "A",
        template : "<h1>Made by a directive!</h1>"
    };
});
»그것을 자신을 시도

법적 제한 값은 다음과 같습니다

  • E 요소 이름
  • 속성에 대한
  • C 클래스에 대한
  • M 고객 피드백

디폴트 값은 EA 요소 이름 및 속성 이름 모두 문을 호출 할 수 있음을 의미한다.


❮ 이전 다음 장 ❯