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

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

OKUNOKENTARO
November 22, 2015

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

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

OKUNOKENTARO

November 22, 2015
Tweet

More Decks by OKUNOKENTARO

Other Decks in Programming

Transcript

  1. AngularJS 1.4 Directive DMBTT"UUSJCVUF/BNF$POUSPMMFS\ 㹋鄲 ^ BOHVMBSNPEVMF "11 EJSFDUJWF BUUSJCVUF/BNF

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

    ^ JO)5.- EJWBUUSJCVUFOBNFOBNF 要素名(セレクタ指定なので属性なら[ ]でくくる)
  3. 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 要素名 内包するテンプレート 実装
  4. Angular 2 Component !$PNQPOFOU \ TFMFDUPSFMFNFOUOBNF UFNQMBUFA QIFMMPQ A ^

     DMBTT&MFNFOU/BNF$PNQPOFOU\ 㹋鄲 ^ JO)5.- FMFNFOUOBNFFMFNFOUOBNF 要素名 内包するテンプレート
  5. 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 入力の定義
  6. Angular 2 Input !$PNQPOFOU \ TFMFDUPSTPNF UFNQMBUFA Q\\WBMVF^^Q A ^

     DMBTT4PNF$PNQPOFOU\ !*OQVU WBMVFTUSJOH PO*OJU WPJE\ UIJTWBMVFGPP ^ ^ JO)5.- TPNFWBMVFGPPTPNF 入力、およびプロパティの定義
  7. 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 出力の定義 出力に対する受け取り
  8. • UIインタラクションの実装 • @Input, @Outputによるbindとemit • NgAnimateとCSS Transitionによる視覚効果 • ロジックとデータフローの実装

    • FluxアーキテクチャはAngular 2においても適用可能 • @Injectableを用いたDIベースのビジネスロジック利用 Application architecture
  9. • 例のNew Router • アプリケーションのルートに
 @RouteConfigアノテーションで記述 • Pathに対して、紐付けるComponentを指定 Component Router

    @RouteConfig([ {path: '/home', component: HomeComponent, name: 'Home'} ]) class MyApp { } // in HTML <router-outlet><!-- ͜͜ʹඳը --></router-outlet>
  10. • AngularJSで便利だったビルトイン・ディレクティブも健在 • ng-class, ng-style, ng-if, ng-for (1でのng-repeat) • フォーム実装を強力に支援するng-formが追加

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

    • 生のDOMElementを直接扱える禁断のRef • そのComponent内にのみ適用されるCSS Styles, StyleUrls • DIとKarma, Protractorを活かしたテストの書きやすさ • これぞAngularの正当進化!! And more...
  12. • Qiita Angular 2 Advent Calendar 2015準備中! • まだ枠も空いているので、Angular 2試して感想を書くのに最適

    • http://qiita.com/advent-calendar/2015/angular2 • それでも空いてる日はng-kyotoのオーガナイザが
 頑張って埋めます 告知