Angular JS intro
Angular JS는 javascript 프레임워크로 javascript로 쓰여진 라이브러리이다. 지시자(Directives)를 이용하여 HTML attribute를 확장하고 표현식(Expressions)를 사용해 HTML에 데이터를 binding한다. Angular JS를 사용하기 위해서는 아래와 같은 줄을 추가하여 Angular JS 라이브러리를 추가해주면 된다. Angular JS는 MVW(Model - View - Whatever) 패턴에 특화 되어 view와 controller를 를 분리하여 DOM을 구성하는 HTML과 controller를 구성하는 JS를 이원화했다. 그리고 scope를 통해 model의 변화를 감지하여 DOM에 반영할 수 있도록 구현되어 있어 개발 시, 편리함을 가져다 준다.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
Angular JS Expressions
Angular JS는 Expressions을 통해 HTML에 값을 넣을 수 있다. Expressions은 중괄호 둘을 겹쳐서 Expression을 둘러 싸는 모양으로 사용된다. 양식은 아래와 같다. 단, "ng-app"이라는 directive가 표시되어 있어야만 사용가능하다. 그 이유는 "ng-app"이라는 directive를 통해 angular의 application의 경계를 확인하고 런타임 환경을 구성하여 angular가 동작하도록 하기 때문이다.
{{expression}}
<!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="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Angular JS Directives
Angular JS는 Directives라고 불리는 새로운 attribute를 사용해 HTML을 확장해서 사용가능하다. angular에서 사용하는 direvctive는 "ng-"라는 접두사가 붙는다. 기본적인 directive 3가지를 먼저 소개한다. "ng-app"은 Angular JS application의 경계를 알려주어 angular가 사용될 수 있는 환경을 구성한다. "ng-init"은 application 데이터를 초기화 해준다. "ng-model"은 HTML controls(input, select, textarea 등)의 값을 application data에 binding 해준다. 사용하는 모습은 아래의 예제와 같다.
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
directive를 하나 더 알아보자면 배열 같은 collection을 순회 하면서 element에 접근할 수 있는 "ng-repeat"가 있다. 사용법은 아래와 같다.
<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>
'WEB > Javascript' 카테고리의 다른 글
| [Angular JS] Controllers (0) | 2014.10.29 |
|---|---|
| [jQuery] AJAX (Asynchronous Javascript And XML) (0) | 2014.10.29 |
| [jQuery] add/remove HTML element (0) | 2014.10.22 |
| [jQuery] get/set HTML content/attribute (0) | 2014.10.22 |
| [jQuery] callback & chaining (0) | 2014.10.22 |