-
[AngularJS] 3. 지시어(directives) - Angular JS 강좌Web/AngularJS 2015. 6. 12. 14:151. AngularJS Directives
AngularJS 지시어는 접두사 ng- 를 붙여 HTML 요소를 확장시킵니다.
ng-app은 AngularJS 어플리케이션을 초기화합니다.
ng-init은 어플리케이션 데이터를 초기화 합니다.
ng-model은 HTML 제어(input, select, textarea)의 값을 어플리케이션 데이터와 연결합니다.
123456<div ng-app="" ng-init="firstName='John'"><p>Name: <input type="text" ng-model="firstName"></p><p>You wrote: {{ firstName }}</p></div>cs 2. Data Binding
위 예제의 {{ firstName }} 식은 AngularJS 데이터 연결 식 입니다.
AngularJS에서 데이터 연결은, AngularJS 데이터를 AngularJS 식과 동기화 합니다.
{{ firstName }}은 ng=model="firstName"과 동기화 됩니다.
아래 예제는 두 개의 텍스트 필드가 두개의 ng-model 지시어와 동기화 되는 예제입니다:
123456789101112131415161718192021222324<!DOCTYPE html><html><head></head><body><div data-ng-app="" data-ng-init="quantity=1;price=5"><h2>Cost Calculator</h2>Quantity: <input type="number" ng-model="quantity">Price: <input type="number" ng-model="price"><p><b>Total in dollar:</b> {{quantity * price}}</p></div></body></html>cs Tip. ng-init을 사용하는 것은 매우 일반적이지 않습니다. 데이터를 초기화하는 방법에 대해서 제어부 관련 장에서 배우게 될 것입니다.
3. Repeating HTML Elements
ng-repeat 지시어는 HTML 요소를 반복합니다:
12345678<div ng-app="" ng-init="names=['Jani','Hege','Kai']"><ul><li ng-repeat="x in names">{{ x }}</li></ul></div>cs ng-repeat는 배열의 객체를 이용할 때 사용됩니다:
12345678910111213141516171819202122232425<!DOCTYPE html><html><head></head><body><div ng-app="" ng-init="names=[{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]"><p>Looping with objects:</p><ul><li ng-repeat="x in names">{{ x.name + ', ' + x.country }}</li></ul></div></body></html>cs * AngularJS는 데이터베이스 CRUD(Create Read Update Delete)를 위해 완벽한 어플리케이션입니다.
4. The ng-app Directive
ng-app 지시어는 AngularJS 어플리케이션의 루트 요소(root element)를 선언합니다.
ng-app은 웹 페이지가 로드될 때, 자동적으로 어플리케이션을 초기화 합니다.
5. The ng-init Directive
ng-init 지시어는 AngularJS 어플리케이션을 위한 초기화 값을 선언합니다.
일반적으로, ng-init은 사용되지 않습니다.
6. The ng-model Directive
ng-model 지시어는 HTML 제어의 값을 어플리케이션 데이터에 연결합니다.
ng-model은 또한 아래와 같은 작업을 합니다:
- 어플리케이션 데이터(number, email, required)에 대한 형 검사를 제공합니다.
- 어플리케이션 데이터(invalid, dirty, touched, error)에 대한 상태를 제공합니다.
- HTML 요소를 위한 CSS 클래스를 제공합니다.
- HTML 서식을 위한 HTML 요소를 연결합니다.
7. The ng-repeat Directive
ng-repeat 지시어는 HTML 요소를 각 집합에 대한 각각의 아이템을 한번 복사합니다.
* 위 강좌는 W3Schools 를 참고하여 작성하였습니다.
'Web > AngularJS' 카테고리의 다른 글
[AngularJS] 7. Table - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 6. Http - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 5. 필터(filter) - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 4. 제어(controller) - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 2. 식(expression) - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 1. 소개(Introduction) - Angular JS 강좌 (0) 2015.06.12
