AngularJS에서 지시자(Directive)란
기존의 방식으로는 HTML의 DOM을 제어하기 위해 Javascript 혹은 JQuery를 사용함으로써 가능했다면, AngularJS에서는 기존 HTML을 확장하는 방식을 지시자를 통해 제공한다. 하나의 DOM에는 이와 연결되는 하나의 Directive를 만들어 해당 DOM을 조작할 수 있다.
data-ng-app, ng-app
ng-app으로만 사용해도 되나, 일부 HTML 편집기에서 오류가 발생하기 때문에 HTML표준 규칙을 맞춰주기 위해 data-ng-app으로 사용하곤 한다. 해당 부분부터 AngularJS를 사용하겠다는 의미로, 사용하고자 하는 모듈명을 작성하기도 한다.
<body data-ng-app="moduleName">
ng-init
자바스크립트 변수나 함수를 초기화한다.
<div ng-init="name:json">
ng-model
양방향 데이터 바인딩에 사용된다. HTML의 input, select, textarea 등의 입력 element(UI, View)의 값을 갱신하며 해당 변수(Model)의 값도 변경시킨다.
<div ng-model="name">
expression
ng-init이나 js파일의 컨트롤러에서 초기화한 변수(혹은 ng-model로 바인딩된 변수)를 가져오기 위해서는 아래와 같이 사용할 수 있다.
1. ng-init으로 초기화한 변수의 값을 사용하는 경우
<div ng-init="name='Jacop'">
<p>My name is {{name}}.</p>
</div>
==> My name is Jacop.
2. controller에서 초기화하는 경우(ng-model을 이용해 양방향 데이터 바인딩 역시 가능)
// name.js
var app = angular.module('moduleName', [dependencies]);
app.controller('controllerName', function($scope){
$scope.name='Jacop';
}//main.html
<body data-ng-app="moduleName">
<div data-ng-controller="controllerName">
<p>My name is {{name}}.</p>
</div>
</body>
==> My name is Jacop.
ng-show, ng-hide
expression과 함께 사용된다. ng-show는 expression이 true를 반환할 때 해당 블럭의 내용을 보여주며, ng-hide는 expression 결과가 거짓일 때 해당 내용을 보여준다. (display=none)
<div ng-show="name=='Jacop'">
<p>Hi, Jacop</p>
</div>
ng-if
ng-show와 마찬가지로 expression과 함께 사용되며, expression이 true를 반환할 때 해당 블럭의 내용을 보여준다.
cf. ng-if와 ng-show의 차이는 ng-if의 경우, 렌더링을 하지 않는다. 즉, 값이 거짓이면 DOM 자체를 생성하지 않지만 ng-show는 expression 결과에 상관없이 무조건 DOM을 생성하고 display 속성을 변경할 뿐이다.
ng-style
표현식에 따라 CSS를 적용한다.
// color.js
angular.module('colorModule', [])
.controller('colorCtrl', function($scope){
$scope.colorFx = function(){
return {"color":"red"}
}
});// main.html
<body data-ng-app="colorModule">
<div data-ng-controller="colorCtrl">
<p ng-style="colorFx()">Hi</p>
</div>
</body>
ng-submit
HTML Form에서 사용될 수 있는 앵귤러 폼(ngForm)이다. 일반 폼을 사용할 경우 js에서 해당 값들에 대한 유효성 검사를 일일히 해줘야 하는 수고로운 시간이 필요하다. 반면에, 앵귤러 폼을 사용하면 폼의 검증 로직을 해당 DOM에 추가할 수 있다.
<form name="angularFormEx" ng-submit="submit()">
<input type="text" name="username" required
ng-model="username" ng-minlength="2" ng-maxlength=20" ng-trim="true">
<input type="password" name="pwd" required
ng-minlength="6">
</form>
ng-repeat
배열 객체의 요소들을 하나씩 꺼내기를 반복한다.
<div ng-repeat="item in itmes">
<ul>
<li>{{item.name}}</li>
</ul>
</div>
ng-repeat에서는 일부 정해져 있는 키워드를 통해 특정 조건의 값일 때 해당 내용을 렌더링할 수 있다. 해당 키워드들은 아래와 같다.
- $first : 첫번째 요소면 true
- $middle : 중간 요소면 true
- $last : 마지막 요소면 true
- $index : 반복 요소의 offset(0 ~ length-1)
- even : 짝수번째 요소면 true
- odd : 홀수번째 요소면 true
cf. ng-repeat에서 상위 repeat의 $index에 접근하고자 할 때는 '$parent.$index'를 사용한다.
cf. ng-repeat은 키와 값의 형태로 반복할 수도 있다.
<div ng-repeat="(key, value) in array">
<ul>
<li>key : {{key}}, value : {{value}}</li>
</ul>
</div>
ng-repeat-start, ng-repeat-end
ng-repeat-end : 실제로 반복되는 구문이 해당 지시자 하위에 존재하며, 이 블럭에서 반복이 끝날 것이라는 의미를 가진다. 여러 계층의 객체 구조에서 최상위 객체의 요소가 모두 나올때까지 반복된다. 둘은 같은 단계의 DOM으로 존재해야 한다.
[{"name":"Object1",
"group":[{"name":"SubObject1"}, {"name":"SubObject2"}]
},
{"name":"Object2",
"group":[{"name":"SubObject3"}]
},
{"name":"Object3",
"group":[{"name":"SubObject4"}, {"name":"SubObject5"}, {"name":"SubObject6"}]
}
]<div ng-repeat-start="item in items">
<div ng-repeat-end="object in item">
<ul>
<li>{{object.name}}</li>
</ul>
</div>
위의 형태인 json파일을 데이터로 받아와 객체로 변환하고, 이를 ng-repeat에 의해 반복하면 다음과 같은 결과가 나올 것이다.
<div ng-repeat-start="item in items">
<div ng-repeat-end="object in item">
<ul>
<li>SubObject1</li>
<li>SubObject2</li>
<li>SubObject3</li>
<li>SubObject4</li>
<li>SubObject5</li>
<li>SubObject6</li>
</ul>
</div>
'Frontend > AngularJS' 카테고리의 다른 글
| AngularJS Error) Template for directive must have exactly one root element (0) | 2022.06.09 |
|---|---|
| AngularJS를 사용하며 따로 공부하지 않고도 알게 된 것들 (0) | 2022.02.12 |
| AngularJS) $digest() infinite loop Directive isolated scope object param (0) | 2021.10.24 |
| AngularJS 기본 문법 - 사용자 지정 디렉티브 (0) | 2021.06.21 |
| AngularJS 기본 특징 및 구조 (0) | 2021.06.12 |
