Angular2
触ってみた
tyfkda
2016/03/30 ng-sake
自己紹介
AngularJS1のあの機能を
Angular2で
基本的な項目
ng-show
myShow (impl)
import {Directive, ElementRef, Input} from ’angular2/core’�@Directive({selector: ’[myShow]’})�export class ShowDirective {� constructor(private elRef: ElementRef) {}� @Input() set myShow(cond: boolean) {� this.elRef.nativeElement.style.display =� cond ? ’’ : ’none’� }�}
$scope.$on(‘$destroy’, ...)
ng-transclude
親子コンポーネントの連携
例：タブコンポーネント
<tabs>� <tab tabTitle=”Tab 1”>blah blah</tab>�</tabs>
$scope.$digest()
constructor(private cdRef: ChangeDetectorRef) {}�� onSomethingHappened() {� this.cdRef.detectChanges()� }�
ng-template + ng-include
$timeout
ここがすごいよ
Angular2
CSSがコンポーネント単位で定義できる
Observable, async pipe
<input type=”text” [ngFormControl]=”term”>�term = new Control()�this.term.valueChanges...
items: Observable<Array<string>>�<li *ngFor=”#item of items | async”>
EventEmitter
import {EventEmitter, Output} from ‘angular2/core’
@Output() myEvent = new EventEmitter()
this.myEvent.emit(123)
<myComp [myEvent]=”foo($event)”></myComp>
デモ
Angular2 + Firebase
初期化
this.movesRef = new Firebase(url)
セルがクリックされたら
cellClicked(cell:{x:number, y:number}) {� const move = {x:cell.x, y:cell.y, stone:this.turn}� this.movesRef.push(move)�}
Firebase -> Observable
class FirebaseService {� on(ref:Firebase, eventType:string) {� return Rx.Observable.create(observer => {� const callback = snapshot => {� observer.next(snapshot)� }� ref.on(eventType, calllback)� return () => { ref.off(eventType, handler) }� })� }�}
Subscribe
this.subscription =� this.firebaseService.on(this.movesRef, ‘child_added’)� .map(snapshot => snapshot.val())� .subscribe(move => {� this.board.putStone(move.x, move.y, move.stone)� })
Unsubscribe
this.subscription.unsubscribe()
感想
触ってみた感想