애귤러군은 HTML을 어떻게 컴파일할까 알아보자
1) 개요
- HTML element 또는 attribute를 확장할 수 있게 해준다. 즉, 사용자 정의하여 새로운 HTML syntax를 브라우징할 수 있게 한다
- Angular가 해석하는 Behavior Extension 을 directive 라고 한다
- Angular는 미리 번들링된 directives 들도 있지만 사용자가 만들 수도 있다
- 지시자의 해석은 서버에서도 미리 컴파일 되는 것도 아니다. 컴파일은 그냥 웹브라우저에서 수행한다
2) 컴파일러
- Compiler는 앵귤러 서비스이다
- 컴파일시 two phases
+ Compile : DOM/directives 해석
+ Link : scope를 가지고 directive를 결합시키고, 실시간 화면을 만든다. 모델이 변하면 뷰도 변하도록 바인딩한다
예) ng-repeat : 성능향상을 위해 복제된 템플릿은 한번의 Compile이 필요하고, 각 복제된 인스턴스별로 한번 Link된다
3) 지시자
- 컴파일 과정에서 HTML 생성시 정의한 것과 매칭시키기 위한 행위자(Behavior) 이다.
- element name, attribute, class name, comment 에 놓일 수 있다
- span 앨리먼트의 애트리뷰트로 사용한 draggable
- <!doctype html>
- <html ng-app="drag">
- <head>
- <script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
- <script src="script.js"></script>
- </head>
- <body>
- <span draggable>Drag ME</span>
- </body>
- </html>
4) 뷰와 모델 바인딩
- 일반적인 경우
+ 데이터 변화면 다시 template과 model을 합쳐서 DOM안의 innerHTML 로 보여줘야 함
- 앵귤러 경우
+ Angular compile가 지시자를 가지고 있는 DOM 을 템플릿으로 사용, linking function을 통해서 scope model 과 live view 바인딩을 해준다
+ 별도의 innerHTML 입력이나 이벤트 핸들링등의 코드가 전혀 필요없다
<참조>
'AngularJS > Concept' 카테고리의 다른 글
| [AngularJS] 개발자 가이드 - 05. 지시자(Directives) (0) | 2013.04.11 |
|---|---|
| [AngularJS] 개발자 가이드 - 04. 개념 이해하기 (0) | 2013.04.10 |
| [AngularJS] 개발자 가이드 - 02. 시작하기 (0) | 2013.04.10 |
| [AngularJS] 개발자 가이드 - 01. 개요 (0) | 2013.04.10 |
| [Directive Driven] 사용자 정의 컴포넌트 만들기 (0) | 2013.04.09 |