[W3Schools AngularJS 한글강좌] Directives

* ALL COPYRIGHTS are at w3schools. This article's purpose is only for study. *

AngularJS Directives

AngularJS directives are extended HTML attributes with the prefix ng-.

AngularJS를 사용하려면 ng- 라는 prefix를 붙여야 한다.

ng-app 는 AngularJS application을 초기화한다.

ng-init 은 application data를 초기화한다.

ng-model 은 INPUT, SELECT, TEXTAREA 등 HTML 요소들의 값을 binding한다.

Read about all AngularJS directives in our AngularJS directive reference.

Example

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

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

</div>

Try it Yourself »

ng-app 또한 <div> element가 AngularJS 라고 명시하는 것이다.

Data Binding

앞선 예제에서 {{ firstName }} 표현식은 AngularJS에서 쓰이는 data binding 표현식이다.

{{ firstName }}는 ng-model="firstName" 와 묶어서 사용해야 한다.

다음 예제를 보자. 두개의 text field가 2개의 ng-model 과 묶여있다.

Example

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

Try it Yourself »

ng-init 을 사용하는 것은 일반적이지 않다. controllers를 통해 데이터를 초기화하는 방법에 대해서 추후 배울것이다.

Repeating HTML Elements

ng-repeat 는 HTML 요소들을 반복한다.

Example

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

Try it Yourself »

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

ng-repeat 지시문은 객체 배열에 사용된다.

Example

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

Try it Yourself »

AngularJS 는 database CRUD 에 적합하다.

이 객체가 데이터베이스의 레코드인지 여부를 상상해보자.

The ng-app Directive

ng-app 은 AngularJS의 최상위 요소이다.

ng-app 은 웹 페이지가 로드될 때 application을 자동으로 초기화한다.

The ng-init Directive

ng-init 은 초기값을 설정한다.

일반적으로 ng-init은 사용하지 않는다. 나중에 배울 controller 또는 module을 주로 사용한다.

The ng-model Directive

ng-model 은 INPUT, SELECT, TEXTAREA 등 HTML 요소들의 값을 binding한다.

ng-model 은 또한 아래와 같은 일을 한다:

데이터에 대한 유효성 검사를 제공한다.(number, email, required)
application의 상태를 제공한다.(invalid, dirty, touched, error).
CSS 클래스를 제공한다.
HTML 요소를 HTML 폼에 바인딩한다.

Create New Directives

AngularJS에서는 내장 된 모든 지시문에 추가하여 지시문을 직접 만들 수 있습니다.

새 지시문은 .directive 함수를 사용하여 만든다.

새로운 지시문을 호출하려면 새 지시문과 동일한 태그 이름으로 HTML 요소를 만들어야 한다.

지시문의 이름을 지을때는 Camel Case를 이용해야한다. (ex. w3TestDirective) 그러나 호출할 땐 -를 사용하여 구분지어줘야 한다. (ex. w3-test-directive)

Example

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

Try it Yourself »

다음과 같은 방법으로 지시문을 호출할 수 있다:

Element name(요소 이름)
Attribute(속성)
Class(클래스)
Comment(주석)

아래의 예제도 같은 결과를 보일것이다.

Element name

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

Try it Yourself »

Attribute

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

Try it Yourself »

Class

<div class="w3-test-directive"></div>

Try it Yourself »

Comment

<!-- directive: w3-test-directive -->

Try it Yourself »

Restrictions

당신의 지시문을 특정한 메소드에서만 호출이 가능하도록 제한할 수 있다.

Example

By adding a restrict property with the value "A", the directive can only be invoked by attributes:

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

Try it Yourself »

제한되는 사항:

E for Element name
A for Attribute
C for Class
M for Comment

기본적으로이 값은 요소 이름과 속성 이름 모두가 지시문을 호출 할 수 있음을 의미하는 EA이다.

'Coding > HTML' 카테고리의 다른 글

동적으로 추가한 요소 이벤트 동작하지 않을때 해결방법 (0)	2017.04.06
Jquery empty() / remove() / detach() 차이점 (0)	2017.04.05
[W3Schools AngularJS 한글강좌] Modules (0)	2017.01.16
[W3Schools AngularJS 한글강좌] Expressions (0)	2017.01.16
[W3Schools AngularJS 한글강좌] Intro (0)	2017.01.16

Hide