AngularJS directives
AngularJS directives는 HTML을 새로운 요소들로 확장시켜주는 것입니다.
앞서 봐왔던 ng-로 시작하는 것들 모두를 뜻합니다.
ng-app은 AngularJS application을 초기화시킵니다.
ng-init은 application data를 초기화시킵니다.
ng-model은 input이나 textArea같은 값들을 application data로 바인딩 합니다.
앞서 보여드렸지만 간단한 예시로
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
=> ng-init으로 firstName을 John으로 초기화 시키고 ng-model로 input의 값을 바인딩 시킵니다.
=> 표현식으로 값을 출력해줍니다.
=> 따라서 input에 넣는 값에따라 값이 바뀌겠죠.
즉 {{ }} 표현식은 ng-model로 인해 바인딩 됩니다.
그리고 ng-init으로 초기화하는 형태는 흔히 사용하지 않습니다. 컨트롤러나 모듈에 의해 초기화를 시킵니다.
만약에 반복하고 싶다면 ng-repeat을 이용하면 됩니다.
예를 들어
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
=> names에 Jani Hege Kai로 초기화 시켜 이를 반복해서 출력해주기 위해서 ng-repeat을 이용합니다.
=> ng-repeat으로 마치 for문처럼 비슷하게 쓰입니다.
=> x에 출력할 담길 변수 names는 반복하여 꺼낼 변수입니다.
좀더 응용해보면 이렇게도 쓰이겠죠. names라는 변수에
names=[{name:'Jani',country:'Korea'},{name:'Kai',country:'UK'}] 처럼말이죠
이때는 출력 변수 x가 있으면 .연산자로 해당 값을 참조해줍니다.
예를 들어서
<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>
=> ng-repeat으로 x에 담고 이를 .연산자로 값을 참조합니다.
또한 사용자 여러분들이 직접 directive를 정의 할 수 있습니다.
즉 app.directive 로 이용하면 됩니다.
단 조건이 있습니다.
- 새로운 directive를 호출하기 위해선 새로운 diretcive이름과 동일하게 HTML 요소를 만듭니다.
- directive이름을 지정할 경우 낙타표기법을 사용하지만 이를 사용하기위해선 ' - ' 를 붙여주어 표시합니다.
<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>
=> 을 이용합니다.
이를 사용하기 위한 방법은 총 4가지가 있습니다. 아래와 같습니다.
<아래의 출처는 w3school>
<w3-test-directive></w3-test-directive>Attribute
<div w3-test-directive></div>Class
<div class="w3-test-directive"></div>Comment
<!-- directive: w3-test-directive -->'웹 > AngularJS' 카테고리의 다른 글
| AngularJS 모델 (0) | 2019.02.20 |
|---|---|
| AngularJS 모듈 (0) | 2019.02.18 |
| AngularJS 표현식 (0) | 2019.02.16 |
| AngularJS 소개 (0) | 2019.02.14 |
