Back Ground

Angular js [3] - 지시어 본문

Javascript/Angular

Angular js [3] - 지시어

Back 2016. 8. 25. 13:26

 

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><div ng-app="" ng-init="firstName='John'"> <p>Name: <input type="text" ng-model="firstName"></p><p>You wrote: {{ firstName }}</p> </div>

 

 

 

이런 식으로 Angular를 사용 할시 ng-app를 속성을 선언 해준다.

 

 

 

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
25
26
27

<!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><div ng-app="" ng-init="firstName='John'">

 

<p>Name: <input type="text" ng-model="firstName"></p>

<p>You wrote: {{ firstName }}</p>

 

</div><div ng-app="" ng-init="firstName='John'"> <p>Name: <input type="text" ng-model="firstName"></p><p>You wrote: {{ firstName }}</p> </div>

 

 

 

 

 

 

 

 Tip. ng-init을 사용하는 것은 매우 일반적이지 않습니다.

데이터를 초기화하는 방법에 대해서 제어부 관련 장에서 배우게 될 것입니다.

 

3. Repeating HTML Elements

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

 

 

 

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

 

 

  

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
<!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>







* 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 요소를 각 집합에 대한 각각의 아이템을 한번 복사합니다.




출처:http://palpit.tistory.com/99

'Javascript > Angular' 카테고리의 다른 글

꼭 알아야할 핵심 코드  (0) 2018.09.29
Angular - 원리  (0) 2018.09.15
Angular - 글로벌 환경  (0) 2018.09.15
Augular JS[2] - 살펴보기  (0) 2016.08.22
Angular JS[1] - 소개  (0) 2016.08.22
'Javascript/Angular' Related Articles more
Comments