AngularJSでのComponent指向

ng-kyoto Meetup Kyoto #1

Transcript

1. + AngularJS での Component 指向 bindToControllerとかの話も添えて 20min ng-kyoto Meetup #1
2. + MENU n ⾃自⼰己紹介 n AngularJSでのDirective指向とは n bindToControllerとは
3. + ⾃自⼰己紹介 今井  晨介 @shin_v1 shinsuke.imai1 shinsukeimai
4. + ⾃自⼰己紹介 n 京都 n ⼤大学院修⼠士１年年 n ラクロス n 可視化研究
5. + ⾃自⼰己紹介 n ⼈人前で話すの初めて n お⼿手やらわかに
6. + 制作物 n ラクロス可視化分析ツール
7. + MENU n ⾃自⼰己紹介 n AngularJSでの Directive指向とは n bindToControllerとは
8. + 今⽇日話すこと 主に Directiveの扱い⽅方
9. + 今⽇日話すこと Custom Directive で SPAを作る
10. + AngularJS n Data Binding n Template Engine n Ajax Support n Routing n Test n Security 今⽇日のメインテーマ <my-template></my-template>
11. + Template Engine テンプレートエンジン って何すか
12. + Template Engine View <my-hoge> </my-hoge> <div></div> <my-directive> </my-directive>
13. + Directive <my-directive> </my-directive> Custom Directive View <my-hoge>  　 </my-hoge> <my-foo> </my-foo> <my-directive> </my-directive>
14. + Directive 複数の  Custom Directive を 組み合わせる <my-foo></my-foo> <my-directive> </my-directive> <my-hoge></my-hoge>
15. + Custom Directive化の指針 実際にアプリを作ることを 想定して Directive の扱いを網羅羅
16. + Custom Directive化の指針 本⽇日のたたき台 Slack @ng-kyoto をAngularJS 1.4 で作るなら
17. +
18. + Custom Directive化の指針 どうやって分割するのか 冪等性？ Testable？ Maintenacebility? 視認性？ Readability?
19. + Custom Directive化の指針 <sk-navbar></sk-navbar> <sk-topics> </sk-topics> <sk-send-message></sk-send-message> <sk-messages> </sk-messages>
20. + Custom Directive化の指針 1.  one Function in one Directive 2.  Reusable or not 3.  No logic code 4.  Independence
21. + one Function in one Directive n one Function in one Directive n Componentに明確な役割を１つ n その役割に合わせて要素の命名 <im-navbar></im-navbar> < {{プロジェクト接頭語}} – {{役割}} > <data-im-navbar></data-im-navbar> 1
22. + one Function in one Directive 1 n 保守性があがる n 役割が明確になる n コードが短くなる n 読みやすくなる n テストしやすい n 誰が書いてもだいたい同じ物
23. + one Function in one Directive <sk-navbar></sk-navbar> <sk-topics> </sk-topics> <sk-send-message></sk-send-message> <sk-messages> </sk-messages> 1
24. + one Function in one Directive 1 n 例例えば  navigation bar の場合 n <im-navbar></im-navbar> n これはナビバーの複数のDirectiveを 内包するDirective
25. + one Function in one Directive 1 n 例例えば  navigation bar に含まれる検 索索Directiveの場合 n <sk-search></sk-search> n これの役割はinputをServiceに伝える
26. + one Function in one Directive 1 n 検索索バーを別の場所にすぐ移せるよ うにするには n Style は分離離する。
27. + Reusable or not n Reusable or not n 再利利⽤用可能なものって結構少ない。 n Ex) ナビバー、ボタン、パネル、ア イコン etc… n 再利利⽤用可能な物って作るの難しい。 n 再利利⽤用可能ってもうライブラリ 2
28. + Reusable or not n Reusable or not n 作り始めに再利利⽤用する、しないを決 めておく。 n 同じプロジェクトで再利利⽤用するのか、 他のプロジェクトでも使うのか。 n Reuseできたら楽なときもある。 2
29. + Reusable or not n Reusable or not n https://github.com/likr/shinsekai n 参考に n SVG操作を抽象化 2
30. + Reusable or not <sk-navbar></sk-navbar> <sk-topics> </sk-topics> <sk-send-message></sk-send-message> <sk-messages> </sk-messages> 2
31. + Component化の指針 繰り返されるもの
32. + Reusable or not <sk-messages> </sk-messages> <sk-message></sk-message> <sk-message></sk-message> <sk-message></sk-message> <sk-message></sk-message> <sk-message></sk-message> <sk-message></sk-message> <sk-message></sk-message> <sk-message></sk-message> <sk-message></sk-message> 2 ng-repeat
33. + Reusable or not <sk-message></sk-message> icon name time <sk-text></sk-text> <sk-text></sk-text> text mention link 2
34. + Reusable or not n 指針 n 決められた型のデータが⼊入ってきたら n いつでも同じものを出⼒力力 n ⾃自然とそうなるはず 2
35. + No logic n No logic n ロジックコードはService ( service, factory )で書こう 3
36. + No logic n Directiveの役割 n データを受け取って、Templateに 流流し込む n 何かのUser Actionがあった時、 Serviceに伝える 3
37. + No logic 3 Directive Business logic DB Cache Directive Business logic Web API
38. + No logic 3 n Ex) n Directive はinputを受けとって、検索索 Serviceへ値を渡す。
39. + Independence n Independence n 依存性をできうる限り無くす n 依存とは。 n Input n Output 4
40. + Independence n Input n データを外から受け取る⽅方法 n 1, Service経由 n 2, attr経由のbind 4
41. + Independence n 1, Service経由(DI) n 基本的にViewで描画するデータは Serviceから受け取るようにしている。 4 Directive Business logic DB Cache
42. + Independence 4
43. + Independence 4
44. + Independence n 2, attr経由のbind n ng-repeatの時よく使う。 4 ⼦子のDirective 親の Directive ⼦子のDirective ⼦子のDirective
45. + 親のDirective ⼦子のDirective Independence 4 <div ng-repeat="(key, message) in threads.messages">
 <sk-thread msg="message" key="key"></te-thread>
 </div>
46. + Independence n Output n 1, Serviceにdataを渡す n 2, ⼦子Directiveにdataを渡す 4
47. + Independence n 1, Serviceにdataを渡す 4 Directive $resource Service Server
48. + Independence n 依存性をなくす n = NavBar でなくても動作する n (ex, Model へすぐに移⾏行行可能 4
49. + Independence n 2, ⼦子Directiveにdataを渡す n Inputと同じ n ng-repeat を使う時⽤用いる n ng-repeat した⼦子Directive 4
50. + まとめ n ⼀一つのDirectiveに⼀一つの役割 n Directiveが値を保持しない(Serviceを利利⽤用) n 依存性を無くして、疎結合に
51. + MENU n ⾃自⼰己紹介 n AngularJSでのComponents志向 とは n bindToControllerとは
52. + bindToController n What is bindToController n 1.4からの新機能() "bind to controller” === "bind an isolated scope to a controller"
53. + bindToController n Directiveって⼊入れ⼦子になります n 親から  attr 経由で値を引き継ぐ
54. + bindToController n これまでは$scopeを⽤用いて Controllerで値をbindしていた。 n Controllerの thisにbind可能
55. + bindToController thisにbind Do something: clicked(){ alert(this.msg); } 必須
56. + bindToController n 注意 n bindToController使えへんやんけ n controllerAs書いていますか？ n scope: {}って書いていますか？ n AngularJSのバージョンは1.4.x？ n キャメルケースとハイフンケース
57. + bindToController n もっと詳しく知りたい⼈人は 「AngularJS1.4 と  bindToController」
58. + 終わり Thank you