[AngularJS] 3. 지시어(directives)

Notice

건강이 최우선입니다.

Recent Posts

Recent Comments

Link

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

nalaolla

[AngularJS] 3. 지시어(directives) - Angular JS 강좌 본문

AngularJS_1

[AngularJS] 3. 지시어(directives) - Angular JS 강좌

날아올라↗↗ 2016. 6. 14. 13:21

728x90

1. AngularJS Directives

AngularJS 지시어는 접두사 ng- 를 붙여 HTML 요소를 확장시킵니다.

ng-app은 AngularJS 어플리케이션을 초기화합니다.

ng-init은 어플리케이션 데이터를 초기화 합니다.

ng-model은 HTML 제어(input, select, textarea)의 값을 어플리케이션 데이터와 연결합니다.

1
2
3
4
5
6
<div ng-app="" ng-init="firstName='John'">
 
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
 
</div>
Colored by Color Scripter
cs

2. Data Binding

위 예제의 {{ firstName }} 식은 AngularJS 데이터 연결 식 입니다.

AngularJS에서 데이터 연결은, AngularJS 데이터를 AngularJS 식과 동기화 합니다.

{{ firstName }}은 ng=model="firstName"과 동기화 됩니다.

아래 예제는 두 개의 텍스트 필드가 두개의 ng-model 지시어와 동기화 되는 예제입니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<!DOCTYPE html>
<html>
 
    <head>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    </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>
 
Colored by Color Scripter
cs

Tip. ng-init을 사용하는 것은 매우 일반적이지 않습니다. 데이터를 초기화하는 방법에 대해서 제어부 관련 장에서 배우게 될 것입니다.

3. Repeating HTML Elements

ng-repeat 지시어는 HTML 요소를 반복합니다:

1
2
3
4
5
6
7
8
 
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>
Colored by Color Scripter
cs

ng-repeat는 배열의 객체를 이용할 때 사용됩니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
 
    <head>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    </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>
 
Colored by Color Scripter
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 를 참고하여 작성하였습니다.