AngularJS의 개발자 가이드를 요약해 본다.
1) 개요
- 데이터 바인딩에 {{}} 를 사용한다 : Data binding as in {{}}.
- HTML안에 directives를 설정하여 제어한다 : DOM control structures for repeating/hiding DOM fragments.
- 입력 폼에 대한 유효성 검사 : Support for forms and form validation.
- HTML에 코드넣기 : Attaching code-behind to DOM elements.
- 재사용가능 컴포넌트 형태의 HTML그룹핑 : Grouping of HTML into reusable components.
2) 적합성
- CRUD 시스템 개발에 잘 맞음
- 게임이나, DOM 조작이 많은 GUI Editor등에는 안맞을 수 있고 오히려 jQuery가 잘 맞을 수 있다
- DOM과 애플리케이션 로직을 분리하는데 최적 : MVC framework
- Real Browser 테스트를 위하여 최적 : Karma
- AJAX 통한 데이터 CRUD의 데이터 조작에 대한 반복코드 제거
- Guice 스타일의 필요한 모듈을 DI(Dependency Injection) 을 제공
3) 코드 이해
- <!doctype html>
- <html ng-app>
- <head>
- <script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
- <script src="script.js"></script>
- </head>
- <body>
- <div ng-controller="InvoiceCntl">
- <b>Invoice:</b>
- <br>
- <br>
- <table>
- <tr><td>Quantity</td><td>Cost</td></tr>
- <tr>
- <td><input type="integer" min="0" ng-model="qty" required ></td>
- <td><input type="number" ng-model="cost" required ></td>
- </tr>
- </table>
- <hr>
- <b>Total:</b> {{qty * cost | currency}}
- </div>
- </body>
- </html>
- ng-app : Angular가 애플리케이션을 자동 초기화 해주게 하는 지시자이다
- ng-model : 양방향 데이터 바인딩하고, 간단한 유효성검사도 수행 (유효하지 않으면 input 박스가 빨간색으로 변함)
- <script src="http://code.angularjs.org/xxx/angular.min.js"> 에서 angular.min.js 버전별 호출
- {{ expression | filter }} : 수식을 넣을 수 있고, | 를 이용하여 필터링 가능
<참조>
- 개발자 가이드 : 개요
'AngularJS > Concept' 카테고리의 다른 글
| [AngularJS] 개발자 가이드 - 03. HTML 컴파일러 (0) | 2013.04.10 |
|---|---|
| [AngularJS] 개발자 가이드 - 02. 시작하기 (0) | 2013.04.10 |
| [Directive Driven] 사용자 정의 컴포넌트 만들기 (0) | 2013.04.09 |
| [SPA] Bootstrap과 Node.js 이용해 만들기 (1) (0) | 2013.01.24 |
| [SPA] 기본개념 잡기 (0) | 2013.01.11 |