이번에는 앵귤러 컴포넌트가 어떻게 웹 컴포넌트가 될 수 있는지 보자. 본 내용은 앵귤러 2의 디자인 가이드 중 Web Components에 대한 내용을 바탕으로 한다. (디자인 문서는 초기 버전이고 최신 버전의 변경분 반영이 안될 수 있다. 말 그대로 초기 생각의 흔적으로만 보고, 정의한 것들이 확정되었다곤 생각하지 말자. 따라서 변경된 내역도 나중에 찾아 보아야 한다)
Angular Component as a Web Components
Angular Component가 Web Components가 되기위한 기본은 events, properties와 자바스크립트나 타 프레임워크에서 접근가능하고 Web Components에 적용되는 methods(API)를 갖는 DOM element를 만드는 것이다. Template 디자인 가이드에 나온 아래 그림을 보면 Template을 갖는 Component Directive로 만들면 Web Components로 Export할 수 있고, Import할 수 있다.
Publishing events, properties, methods
앵귤러로 컴포넌트를 만들어 보자.
@ComponentDirective({
selector: 'x-zippy'
template: ...
})
class ZippyComponent {
constructor(events) {
this.events;
}
@Property('title')
get title() ...;
set title(value) ...;
@Property('isOpen')
get isOpen() ...;
set isOpen(value) {
if (value != this.isOpen) this.toggle();
}
@Publish('open')
open() {
this.isOpen = truefalse;
this.events.fire('open');
}
@Publish('close')
close() {
this.isOpen = falsetrue;
this.events.fire('close');
}
@Publish('toggle')
toggle() {
value ? close() : open();
}
}
@Proptery 와 @Publish 에노테이션을 통해 앵귤러가 앵귤러 프레임워크없이도 엘러먼트 자체에 접근할 수 있는 properties/methods를 노출하고 있다. 사용예는 다음과 같다.
<x-zippy title="Hi YoungSik">
Some thing...
</x-zippy>
native 엘러먼트처럼 사용되어 지는 컴포넌트가 되기위해 다음과 같이 동작해야 한다.
var tab = _lookup_custom_element;
var log = null;
tab.addEventListener('open', function() { log = 'open'; })
tab.addEventListener('close', function() { log = 'close'; })
tab.close();
expect(tab.isOpen).toEqual(false);
expect(log).toEqual('close');
tab.toggle();
expect(tab.isOpen).toEqual(true);
expect(log).toEqual('open');
Custom Element 등록하기(Registering)
Angular Component가 Web Components가 되기 위한 마지막은 앵귤러의 스크프밖에서 인스턴스화 할 수 있어야 한다. 이를 위한 기본 생각은 다음과 같이 Angular가 customElementFactory를 registerElement API를 통해 등록하는 방식이다.
var injector = angular.createInjector(setOfModules);
var customElementFactory = injector.get(CustomElementFactory);
var Greeter = customElementFactory(GreeterDirective);
document.registerElement('x-greeter', { prototype: Greeter });
var div = document.createElement('div');
div.innerHTML = '<greeter>'; // trigger internal DOM parser.
var greeter = div.firstChild; // retrieve the greeter
// Notice that we are now instance of Greeter
expect(greeter instanceOf Greeter).toBe(true);
// Notice that it can be used just like any other DOM Element
greeter.name = 'world';
greeter.greet();
이후 디자인 가이드 내용이 갑작이 끝나버린 관계로 다른 문서들을 뒤적여 보기로 한다. To be continued...
<참조>
'Angular > Prototyping' 카테고리의 다른 글
[Web Components] Angular와 Web Components 관계 - 1 (0) | 2016.01.11 |
---|---|
[Polymer] 폴리머기반 웹 컴포넌트 만들기 (0) | 2015.01.03 |
[Web Components] 웹 컴포넌트 개념잡기 (0) | 2014.12.27 |
[Polymer] Dart로 시작하는 폴리머 (0) | 2014.12.26 |