디자인 가이드는 초기 버전의 생각이므로 현재(2015.1.15) beta 버전의 구문 형식과 틀릴 수도 있다는 것을 숙지하고 어떤 사상을 가지고 있는지 알아보는 것에 집중하자. 물고기가 아니라 물고기 잡는 그물에 집중하자는 이야기이다.
Expressions
Angular의 expression은 Angular1의 expression 과 유사하고 몇가지 더 추가되었다.
- Dirty Checking과 긴밀히 통합되어 expression의 prefix 또는 constant 부분에 대한 최적화를 수행한다.
좀 더 자세한 사항은 dirty checking 디자인 가이드를 참조한다.
- One time binding을 {{::foo}} 와 같이 최초 한번만 바인딩되고 이후 바뀌지 않도록 한다. Angular1에서 사용하던 방법
Directive API
Directive는 ES6 classes를 사용해 정의하고, Annotation을 사용해 meta data를 정의한다.
Class annotation
모든 Directive는 @DecoratorDirective, @TemplateDirective, @ComponentDirective 중 하나의 annotation을 갖는 ES6 class 이다. Annotations는 일반적인 properties를 갖는다.
- selector: directive가 적용될 element를 찾을 css selector이다. (string)
- events: directive가 template안에서 on-.. attribute를 사용해 발생시키는 이벤트 목록이다. (list of string)
- visibility: element의 subtree안의 directives들이 directive 인스턴스에 접근할 수 있도록 정의한다. ['local' | 'direct-children' | 'any-children']
- microsyntax: 특별한 properties 구문 형식과 이 properties가 다른 properties와 어떻게 맵핑하는지 정의한다 (string)
아래 예를 보면 NgShowDirective 생성을 통해 element에 ng-show attribute를 사용할 수 있게 한다. 즉, annotation은 툴이 element안에 directive를 인스턴스화하는 과정없이 그리고 코드를 실행하지 않고도 directives를 찾게한다.
import {ng} from '...';
@ng.DecoratorDirective(selector: '[ng-show]')
class NgShowDirective {}
Constructor 에 Denpendency Injection 하기
모든 directives는 Dependency Injection을 통해 contructor의 parameters 값을 갖는다. 즉, DI를 통해 다른 오브젝트 인스턴스틀 갖질 수 있는 것이다. 아래 예를 보면 @Inject annotation을 사용해 DI하고 있다.
import {ng} from '...';
@ng.DecoratorDirective(selector: '[ng-show]')
class NgShowDirective {
@Inject(window.HTMLElement, ng.Http, ng.SomeOtherDirective)
constructor(element, http, someOtherDirective) { ... }
}
Directive communication
http 갖은 것은 ui 오브젝트가 아니기 때문에 element의 subtree안의 모든 directives에 접근할 수 있도록 annotation에 visibility 을 사용할 수 있다. 예로 input element에서 user.value에 대해 NgInputDirective는 input 값의 변경을 Listening하고, NgModelDirective가 validation하며, NgFormDirective은 state를 유지하는 작업을 한다. 여기서 NgModelDirective는 <form> element에 있는 NgFormDirective에 접근할 필요가 있고, NgInputDirective는 같은 element에 있는 NgModelDirective에 접근할 필요가 있다. 이를 아래와 같이 visibility를 설정한다.
<form>
<input type="text" ng-model="user.value" required>
</form>
import {ng} from '...';
@ng.DecoratorDirective(
selector: 'form',
visibility: 'subtree'
)
class NgFormDirective {
constructor() { … }
}
@ng.DecoratorDirective(
selector: 'input[type=text]',
visibility: 'local'
)
class NgModelDirective {
@Inject(NgFormDirective)
constructor(ngForm) { … }
}
@ng.DecoratorDirective(selector: 'input[type=text]',)
class NgInputDirective {
@Inject(NgModelDirective)
constructor(ngModel) { … }
}
Bindable properties
Directives의 모든 properties는 데이터 바인딩을 사용할 수 있고, 이를 위해 set(write)에 대해 @ng.PropertySet annotation을 통해 환경설정을 한다. minification 후에도 property 명을 보존하고 directive의 properties에 데이터 바인딩을 쉽게 만들기 위함이다.
- 구문: @ng.PropertySet({trigger: ['reference' | 'collection' | 'deferred'], domOnly: [false|true] })
- trigger
+ reference: reference가 바뀌면 reference 안에서 전달 (default)
+ collection: collection의 entry가 바뀌면 collection 안에서 전달
+ deferred: directive가 수행할 수 있는 컴파일된 expression을 전달
- domOnly: DOM만 변경하고 watch하고 있는 다른 property는 제외함 (default: false)
예
import {ng} from '...';
@ng.DecoratorDirective {
selector: 'dialog'
}
class Dialog {
constructor() {
this._content = null;
}
get content(content) {
return this._content;
}
@ng.PropertySet({domOnly: true})
set content(content) {...}
}
<dialog content=”{{1+2}}”>
Properties를 위한 Microsyntax
directive가 여러 값을 다룰 필요가 있을 때 microsyntax로 설정을 한다. 예로 ng-repeat을 하면 track-by expression을 해야할 때. 구문은 다음과 같다.
- MICROSYNTAX=(VARIABLE|FIXED|OPTIONAL)+
- VARIABLE=$\w+
- FIXED=[^$\[\]]+
- OPTIONAL=\[MICROSYNTAX\]
ng-repeat을 위한 microsyntax 예를 보면 <div>에 ng-repeat-item-name, ng-repeat-collection, ng-repeat-track-by를 사용한다.
@TemplateDirective(
selector: '[ng-repeat]'
microsyntax: {
'ng-repeat': '$item-name in $collection [track by $track-by]'
})
class NgRepeat {
@ng.PropertySet({trigger: 'reference'})
set ngRepeatItemName() { … }
@ng.PropertySet({trigger: 'collection'})
set ngRepeatCollection() { … }
@ng.PropertySet({trigger: 'deferred'})
set ngRepeatTrackByFn;
}
<div ng-repeat="item in items track-by item.id">
<div ng-repeat-item-name="item" ng-repeat-collection="items" ng-repeat-track-by="item.id">
Lifecycle hooks
모든 directives는 아래 특별한 함수를 구현할 수 있다. 이유는 templates이 initialization과 finalization을 알수 있도록 허용하기 위해 lifecycle hook을 둔다.
- attach: templates 안에 바인딩이 된 후 한번만 호출된다.
- detach: directive의 element가 destroy될 때 호출된다.
Component directive는 특별히 아래 함수도 구현할 수 있다.
- templateLoaded: component의 template이 로딩되어 component element에 포함될 때 호출된다.
Events
Directives는 HTMLElement.dispatchEvent를 사용해 사용자 정의 events를 발생시킬 수 있고, HTMLElement.addEventListener를 통해 이벤트를 Listening할 수 있다. 이벤트는 tree를 타고 bubble up 된다. 설정은 아래 예와 같이 class annotation 안에 하고, event가 발생하면 dirty checking 스케쥴이 돌고 template안에 on-... attributes 를 validation한다.
@ng.DecoratorDirective(
selector: 'dialog',
events: ['close']
)
class Dialog {
@Inject(window.HTMLElement)
constructor(element) { ... }
close() {
var evt = new Event('close');
this.element.dispatchEvent(evt);
if (!evt.defaultPrevented()) {
// really close the dialog...
}
}
}
Directive 구현 예
Decorator: ng-show
import {ng} from '...';
@ng.DecoratorDirective(
selector: '[ng-show]'
)
class NgShow {
@Inject(window.HTMLElement)
constructor(element) {
this.element = element;
}
set ngShow(value) {
this.element.style.display = value ? 'block' : 'hidden';
}
}
Template Directive: ng-if
template 태그의 content를 사용하는 간단한 template directive 이다.
import {ng} from '...';
@ng.TemplateDirective(
selector: '[ng-if]'
)
class NgIf {
@Inject(ng.ViewHole, ng.ViewFactory, Injector)
constructor(viewHole, viewFactory, injector) {
this.viewFactory = viewFactory;
this.viewHole = viewHole;
this.injector = injector;
this.view = null;
}
set ngIf(value) {
if (this.view) {
this.viewHole.remove(this.view);
}
if (value) {
this.view = this.viewFactory(injector);
this.viewHole.add(this.view);
}
}
}
Template Direcive: ng-include
import {ng} from '...';
@ng.TemplateDirective(
selector: '[ng-include]'
)
class NgInclude {
@Inject(ng.ViewHole, ng.Compiler, ng.Http, ng.Directives,
Injector)
constructor(viewHole, compiler, http, directives, injector) {
this.viewHole = viewHole;
this.compiler = compiler;
this.directives = directives;
this.injector = injector;
this.view = null;
this.$http = http;
}
set ngInclude(value) {
var self = this;
this.$http(value).always(removeView).then(addView);
function removeView() {
if (self.view) {
self.viewHole.remove(self.view);
self.view = null;
}
}
function addView(templateString) {
var viewFactory =
this.compiler(templateString, this.directives);
this.view = viewFactory(injector);
this.viewHole.add(this.view);
}
}
}
Templat directive: ng-repeat
template directive는 새로운 execution context를 제공할 수 있고, 아래 간단한 예에서 variable을 injector안에 있는 현재 execution context에서 검증한다.
import {ng} from '...';
@ng.TemplateDirective(
selector: '[ng-repeat]'
microsyntax: {
'ng-repeat': '$item-name in $collection [track by $track-by]'
})
class NgRepeat {
@Inject(ng.ViewHole, ng.ViewFactory, Injector injector)
constructor(viewHole, viewFactory, injector) {
this.viewHole = viewHole;
this.viewFactory = viewFactory;
this.injector = injector;
this.views = [];
}
@ng.PropertySet({trigger: 'reference'})
set ngRepeatItemName(value) {
this.itemName = value;
this.update();
}
@ng.PropertySet({trigger: 'collection'})
set ngRepeatCollection(arrayChangeRecord:ArrayChangeRecord) {
this.arrayChangeRecord = arrayChangeRecord;
this.update();
}
@ng.PropertySet({trigger: 'deferred'})
set ngRepeatTrackByFn(value) {
this.trackByFn = value;
this.update();
}
update() {
…
// deleting a view
this.viewHole.remove(deletedView);
…
// creating a new view
var childContext = {
$index: index,
$odd: !!index%2,
$even: !index%2
};
childContext[this.itemName] = this.collection[index];
var view = this.viewFactory(injector, childContext);
viewHole.append(view);
}
...
}
}
Component Directive: pane
title이 있는 pane 구현 예
import {ng} from '...';
@ng.ComponentDirective(
select: 'pane',
template: ng.inline('<div>{{title}}</div><content/>'),
css: ng.url('pane.css'),
)
class sample.Pane {
constructor() {}
set title() { … }
}
다른 Web Component 프레임워크에 component를 publishing하거나 consuming하기
Custom Elements로 X-Tags, Polymer를 사용하는 프레임워크
Angular는 Custom element API가 유효한지 찾고 custom element로 컴포넌트를 자동 등록하고, component directive의 properties가 custom element의 인스턴스를 접근할 수 있게 한다.
- custom element로 Angular component를 export 할 경우
+ custom element API가 유효하면 Javascript 애플리케이션에서 Angular component를 DOM element 접근방식으로 event의 listen과 properties를 접근가능케 만든다.
- Angular 애플리케이션에서 custom element 사용할 경우
+ Angular는 native DOM element를 사용하듯이 custom elements를 사용할 수 있고, event도 listen할 수 있다.
<참조>
'Angular > Concept' 카테고리의 다른 글
| [Module System] Module Loader 와 Bundler에 대하여 - 2 (0) | 2016.02.19 |
|---|---|
| [Module System] Module Loader 와 Bundler에 대하여 - 1 (0) | 2016.02.18 |
| [Concept] Angular Templating 디자인 가이드 - 1 (0) | 2016.01.14 |
| [TypeScript] TypeScript를 위한 프로젝트 초기 Workflow (0) | 2015.11.14 |
| [Reactive] Reactive Programming 배우는 방법 (2) | 2015.07.14 |