Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular 2 最新リリースを試してみた

2bedb1eb8f841cd3c3ae584600b016e0?s=47 OKUNOKENTARO
November 22, 2015

Angular 2 最新リリースを試してみた

ng-kyoto Angular Meetup #3 にて発表した資料です。

2bedb1eb8f841cd3c3ae584600b016e0?s=128

OKUNOKENTARO

November 22, 2015
Tweet

Transcript

  1. Angular 2 最新リリースを試してみた ng-kyoto Angular Meetup #3 / Nov 22,

    2015
  2. • 奥野 賢太郎 はちさん • 京都市出身 • ng-kyoto代表 •  

    armorik83
  3. Angular 2の進捗どうですか

  4. • beta 0リリースまでのマイルストーン • 52% (2015/11/22現在) • だいぶAPIは安定した • と思いきや、細部はまだBreaking

    Changesある • 大枠は、ほぼ決着 Angular 2 alpha.46
  5. • Custom Elementsを作るもの • @Directive • @Component • Custom Elementsのインタフェースを定義するもの

    • @Input • @Output 主要API
  6. その前に前提知識

  7. • Angular 2はTypeScriptからの利用を想定して
 設計されている (ES6, ES5でも書けるように作られてる) • Decorators構文を多用 • Decorators構文については過去の登壇資料を参照


    https://speakerdeck.com/armorik83/es7-decorators TypeScript & Decolators
  8. @Directive

  9. • Custom Elementsを作る • AngularJSのDirectiveに相当 • restrict: 'AE'と指定したときのDirective • AngularJSでのDirective名の指定から2ではselector宣言と


    なり、要素名・属性名を記述しやすくなった @Directive
  10. AngularJS 1.4 Directive DMBTT"UUSJCVUF/BNF$POUSPMMFS\ 㹋鄲 ^ BOHVMBSNPEVMF "11 EJSFDUJWF BUUSJCVUF/BNF

     \ SFUVSO\ SFTUSJDU"  DPOUSPMMFS"UUSJCVUF/BNF$POUSPMMFS ^ ^  JO)5.- EJWBUUSJCVUFOBNFEJW 要素名 実装
  11. Angular 2 Directive !%JSFDUJWF \ TFMFDUPS<BUUSJCVUFOBNF> ^  DMBTT"UUSJCVUF/BNF%JSFDUJWF\ 㹋鄲

    ^ JO)5.- EJWBUUSJCVUFOBNFOBNF 要素名(セレクタ指定なので属性なら[ ]でくくる)
  12. @Component

  13. • @Directiveと同じくCustom Elementsを作る • templateかtemplateUrlが必須 • テンプレートを持つDirectiveを作るなら
 @Componentを使えばよい • ng-controllerは廃止

    • 基本的には、いくつものComponentの組み合わせで
 アプリケーションを構築していく @Component
  14. AngularJS 1.4 Directive (with template) DMBTT&MFNFOU/BNF$POUSPMMFS\ 㹋鄲 ^ BOHVMBSNPEVMF "11

    EJSFDUJWF FMFNFOU/BNF  \ SFUVSO\ SFTUSJDU&  UFNQMBUFQIFMMPQ  DPOUSPMMFS&MFNFOU/BNF$POUSPMMFS ^ ^  JO)5.- FMFNFOUOBNFFMFNFOUOBNF 要素名 内包するテンプレート 実装
  15. Angular 2 Component !$PNQPOFOU \ TFMFDUPSFMFNFOUOBNF UFNQMBUFA QIFMMPQ A ^

     DMBTT&MFNFOU/BNF$PNQPOFOU\ 㹋鄲 ^ JO)5.- FMFNFOUOBNFFMFNFOUOBNF 要素名 内包するテンプレート
  16. @Input

  17. • Custom Elementsに入力インタフェースを提供する • つまり独自要素に属性を追加できる • AngularJSでいうisolatedScopeやbindToControllerに相当 • @Inputアノテーションを使えば記述が簡単 @Input

  18. AngularJS 1.4 bindToController DMBTT4PNF$POUSPMMFS\ DPOTUSVDUPS \ UIJTWBMVFGPP ^ ^ BOHVMBSNPEVMF

    "11 EJSFDUJWF TPNF  \ SFUVSO\ SFTUSJDU&  UFNQMBUFQ\\4PNFWBMVF^^Q  DPOUSPMMFS4PNF$POUSPMMFS  DPOUSPMMFS"T4PNF  TDPQF\^  CJOE5P$POUSPMMFS\WBMVF!^ ^ ^  JO)5.- TPNFWBMVFGPPTPNF 入力の定義
  19. Angular 2 Input !$PNQPOFOU \ TFMFDUPSTPNF UFNQMBUFA Q\\WBMVF^^Q A ^

     DMBTT4PNF$PNQPOFOU\ !*OQVU WBMVFTUSJOH PO*OJU WPJE\ UIJTWBMVFGPP ^ ^ JO)5.- TPNFWBMVFGPPTPNF 入力、およびプロパティの定義
  20. @Output

  21. • Custom Elementsに出力インタフェースを提供する • 独自要素から発するイベントを自由に定義できる • Angular 2の目玉であり個人的に一番気になってるAPI • AngularJSの$broadcast,

    $emitは廃止 • @Outputアノテーションで記述 @Output
  22. Angular 2 Output !$PNQPOFOU \ TFMFDUPSUPEP UFNQMBUFA CVUUPO DMJDL PO$MJDL

    FWFOU $PNQMFUFCVUUPO A ^  DMBTT5PEP$PNQPOFOU\ !0VUQVU DPNQMFUFOFX&WFOU&NJUUFS  PO$MJDL NPVTF&WFOU WPJE\ UIJTDPNQMFUFOFYU NPVTF&WFOU  ^ ^ JO)5.- UPEP DPNQMFUF PO$PNQMFUF FWFOU UPEP 出力の定義 出力に対する受け取り
  23. • カレンダー、ダイアログボックス、ポップアップといった
 UIパーツ毎の細々とした制御の実装に • $scope.$emitより構造変更に強く、Fluxに組み込むには
 大袈裟すぎる場面で、パーツ内で完結させたい場合に有用 • MouseEvent, KeyboardEventなどを、一旦扱いやすい
 インタフェースに整えてから外部への公開が可能

    • RxJSのObservable準拠で、受け取る側のフィルタリングが楽 • たとえばスクロールやマウス制御などでのthrottle Angular 2 Output は何が嬉しいか
  24. • Custom Elementsを作るもの • @Directive • @Component • Custom Elementsのインタフェースを定義するもの

    • @Input • @Output まずはこの4つが理解できればOK
  25. • UIインタラクションの実装 • @Input, @Outputによるbindとemit • NgAnimateとCSS Transitionによる視覚効果 • ロジックとデータフローの実装

    • FluxアーキテクチャはAngular 2においても適用可能 • @Injectableを用いたDIベースのビジネスロジック利用 Application architecture
  26. Angular 2のその他の特徴

  27. • 例のNew Router • アプリケーションのルートに
 @RouteConfigアノテーションで記述 • Pathに対して、紐付けるComponentを指定 Component Router

    @RouteConfig([ {path: '/home', component: HomeComponent, name: 'Home'} ]) class MyApp { } // in HTML <router-outlet><!-- ͜͜ʹඳը --></router-outlet>
  28. • AngularJSでの$http, $resource辺りに相当 • Angular 2 DIに適した形のfetch • 実体はXMLHttpRequestのラップ •

    戻り値がPromiseではなくObservableな点が魅力 Http
  29. • AngularJSで便利だったビルトイン・ディレクティブも健在 • ng-class, ng-style, ng-if, ng-for (1でのng-repeat) • フォーム実装を強力に支援するng-formが追加

    • Angular 2は単方向バインディング • だが、AngularJSの特徴だった双方向バインディング
 ng-modelも残っている Built-in Directives
  30. • Promise, EventEmitterを搭載(別途Polyfillする必要なし) • フィルタを実現できるPipes • onInit, onChanges, onDestroyといったLifecycle Hooks

    • 生のDOMElementを直接扱える禁断のRef • そのComponent内にのみ適用されるCSS Styles, StyleUrls • DIとKarma, Protractorを活かしたテストの書きやすさ • これぞAngularの正当進化!! And more...
  31. はじめよう Angular 2

  32. • Qiita Angular 2 Advent Calendar 2015準備中! • まだ枠も空いているので、Angular 2試して感想を書くのに最適

    • http://qiita.com/advent-calendar/2015/angular2 • それでも空いてる日はng-kyotoのオーガナイザが
 頑張って埋めます 告知
  33. Angular 2 最新リリースを試してみた ありがとうございました