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