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>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>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>
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>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>다음과 같은 방법으로 지시문을 호출할 수 있다:
- Element name(요소 이름)
- Attribute(속성)
- Class(클래스)
- Comment(주석)
아래의 예제도 같은 결과를 보일것이다.
Element name
<w3-test-directive></w3-test-directive>Attribute
<div w3-test-directive></div>Class
<div class="w3-test-directive"></div>Comment
<!-- directive: w3-test-directive -->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>"
};
});
제한되는 사항:
Efor Element nameAfor AttributeCfor ClassMfor Comment
기본적으로이 값은 요소 이름과 속성 이름 모두가 지시문을 호출 할 수 있음을 의미하는 EA이다.
'Coding > Etc' 카테고리의 다른 글
| E: Package 'php5-mysql' has no installation candidate 에러 해결방법 (0) | 2017.01.18 |
|---|---|
| Package 'php5' has no installation candidate 에러 해결방법 (0) | 2017.01.18 |
| [W3Schools AngularJS 한글강좌] Modules (0) | 2017.01.16 |
| [W3Schools AngularJS 한글강좌] Expressions (0) | 2017.01.16 |
| [W3Schools AngularJS 한글강좌] Intro (0) | 2017.01.16 |