Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AngularJSでのComponent指向
Search
imashin
June 19, 2015
Programming
0
370
AngularJSでのComponent指向
ng-kyoto Meetup Kyoto #1
imashin
June 19, 2015
Tweet
Share
More Decks by imashin
See All by imashin
NOT A HOTEL - スマートホームの未来
shinsuke_imai
0
160
スマートホームのこれから - NOT A HOTEL TECH TALK 2024/04/09
shinsuke_imai
1
250
クックパッドマート SORACOMを使って 高速プロトタイピング
shinsuke_imai
0
69k
クックパッドマート開発の裏側 ~ステーション編~
shinsuke_imai
0
1.5k
クックパッドマートを支えるIoT 技術
shinsuke_imai
0
580
クックパッドマートを支えるIoT 技術
shinsuke_imai
0
1.2k
Reliable distribution system with Ruby x IoT
shinsuke_imai
0
730
クックパッド流食品流通の作り方
shinsuke_imai
0
280
Reliable label printer system
shinsuke_imai
0
230
Other Decks in Programming
See All in Programming
All About Angular's New Signal Forms
manfredsteyer
PRO
0
170
ALL CODE BASE ARE BELONG TO STUDY
uzulla
25
6k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
1
350
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
150
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
260
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
130
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
200
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
950
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
180
Featured
See All Featured
Code Review Best Practice
trishagee
72
19k
How GitHub (no longer) Works
holman
315
140k
BBQ
matthewcrist
89
9.8k
Optimizing for Happiness
mojombo
379
70k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
How to Ace a Technical Interview
jacobian
280
24k
Done Done
chrislema
185
16k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Building Applications with DynamoDB
mza
96
6.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Transcript
+ AngularJS での Component 指向 bindToControllerとかの話も添えて 20min ng-kyoto Meetup #1
+ MENU n ⾃自⼰己紹介 n AngularJSでのDirective指向とは n bindToControllerとは
+ ⾃自⼰己紹介 今井 晨介 @shin_v1 shinsuke.imai1 shinsukeimai
+ ⾃自⼰己紹介 n 京都 n ⼤大学院修⼠士1年年 n ラクロス n 可視化研究
+ ⾃自⼰己紹介 n ⼈人前で話すの初めて n お⼿手やらわかに
+ 制作物 n ラクロス可視化分析ツール
+ MENU n ⾃自⼰己紹介 n AngularJSでの Directive指向とは n bindToControllerとは
+ 今⽇日話すこと 主に Directiveの扱い⽅方
+ 今⽇日話すこと Custom Directive で SPAを作る
+ AngularJS n Data Binding n Template Engine n Ajax Support n Routing n Test
n Security 今⽇日のメインテーマ <my-template></my-template>
+ Template Engine テンプレートエンジン って何すか
+ Template Engine View <my-hoge> </my-hoge> <div></div> <my-directive> </my-directive>
+ Directive <my-directive> </my-directive> Custom Directive View <my-hoge> </my-hoge>
<my-foo> </my-foo> <my-directive> </my-directive>
+ Directive 複数の Custom Directive を 組み合わせる <my-foo></my-foo> <my-directive> </my-directive>
<my-hoge></my-hoge>
+ Custom Directive化の指針 実際にアプリを作ることを 想定して Directive の扱いを網羅羅
+ Custom Directive化の指針 本⽇日のたたき台 Slack @ng-kyoto をAngularJS 1.4 で作るなら
+
+ Custom Directive化の指針 どうやって分割するのか 冪等性? Testable? Maintenacebility? 視認性? Readability?
+ Custom Directive化の指針 <sk-navbar></sk-navbar> <sk-topics> </sk-topics> <sk-send-message></sk-send-message> <sk-messages> </sk-messages>
+ Custom Directive化の指針 1. one Function in one Directive 2.
Reusable or not 3. No logic code 4. Independence
+ one Function in one Directive n one Function in one
Directive n Componentに明確な役割を1つ n その役割に合わせて要素の命名 <im-navbar></im-navbar> < {{プロジェクト接頭語}} – {{役割}} > <data-im-navbar></data-im-navbar> 1
+ one Function in one Directive 1 n 保守性があがる n 役割が明確になる n コードが短くなる
n 読みやすくなる n テストしやすい n 誰が書いてもだいたい同じ物
+ one Function in one Directive <sk-navbar></sk-navbar> <sk-topics> </sk-topics> <sk-send-message></sk-send-message>
<sk-messages> </sk-messages> 1
+ one Function in one Directive 1 n 例例えば navigation bar
の場合 n <im-navbar></im-navbar> n これはナビバーの複数のDirectiveを 内包するDirective
+ one Function in one Directive 1 n 例例えば navigation bar
に含まれる検 索索Directiveの場合 n <sk-search></sk-search> n これの役割はinputをServiceに伝える
+ one Function in one Directive 1 n 検索索バーを別の場所にすぐ移せるよ うにするには n Style
は分離離する。
+ Reusable or not n Reusable or not n 再利利⽤用可能なものって結構少ない。 n Ex) ナビバー、ボタン、パネル、ア
イコン etc… n 再利利⽤用可能な物って作るの難しい。 n 再利利⽤用可能ってもうライブラリ 2
+ Reusable or not n Reusable or not n 作り始めに再利利⽤用する、しないを決 めておく。 n 同じプロジェクトで再利利⽤用するのか、
他のプロジェクトでも使うのか。 n Reuseできたら楽なときもある。 2
+ Reusable or not n Reusable or not n https://github.com/likr/shinsekai n 参考に n SVG操作を抽象化
2
+ Reusable or not <sk-navbar></sk-navbar> <sk-topics> </sk-topics> <sk-send-message></sk-send-message> <sk-messages> </sk-messages>
2
+ Component化の指針 繰り返されるもの
+ 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
+ Reusable or not <sk-message></sk-message> icon name time <sk-text></sk-text> <sk-text></sk-text>
text mention link 2
+ Reusable or not n 指針 n 決められた型のデータが⼊入ってきたら n いつでも同じものを出⼒力力 n ⾃自然とそうなるはず 2
+ No logic n No logic n ロジックコードはService ( service, factory )で書こう
3
+ No logic n Directiveの役割 n データを受け取って、Templateに 流流し込む n 何かのUser Actionがあった時、 Serviceに伝える 3
+ No logic 3 Directive Business logic DB Cache Directive
Business logic Web API
+ No logic 3 n Ex) n Directive はinputを受けとって、検索索 Serviceへ値を渡す。
+ Independence n Independence n 依存性をできうる限り無くす n 依存とは。 n Input n Output 4
+ Independence n Input n データを外から受け取る⽅方法 n 1, Service経由 n 2, attr経由のbind 4
+ Independence n 1, Service経由(DI) n 基本的にViewで描画するデータは Serviceから受け取るようにしている。 4 Directive Business logic
DB Cache
+ Independence 4
+ Independence 4
+ Independence n 2, attr経由のbind n ng-repeatの時よく使う。 4 ⼦子のDirective 親の Directive ⼦子のDirective
⼦子のDirective
+ 親のDirective ⼦子のDirective Independence 4 <div ng-repeat="(key, message) in threads.messages">
<sk-thread msg="message" key="key"></te-thread> </div>
+ Independence n Output n 1, Serviceにdataを渡す n 2, ⼦子Directiveにdataを渡す 4
+ Independence n 1, Serviceにdataを渡す 4 Directive $resource Service Server
+ Independence n 依存性をなくす n = NavBar でなくても動作する n (ex, Model へすぐに移⾏行行可能 4
+ Independence n 2, ⼦子Directiveにdataを渡す n Inputと同じ n ng-repeat を使う時⽤用いる n ng-repeat した⼦子Directive 4
+ まとめ n ⼀一つのDirectiveに⼀一つの役割 n Directiveが値を保持しない(Serviceを利利⽤用) n 依存性を無くして、疎結合に
+ MENU n ⾃自⼰己紹介 n AngularJSでのComponents志向 とは n bindToControllerとは
+ bindToController n What is bindToController n 1.4からの新機能() "bind to controller” ===
"bind an isolated scope to a controller"
+ bindToController n Directiveって⼊入れ⼦子になります n 親から attr 経由で値を引き継ぐ
+ bindToController n これまでは$scopeを⽤用いて Controllerで値をbindしていた。 n Controllerの thisにbind可能
+ bindToController thisにbind Do something: clicked(){ alert(this.msg); } 必須
+ bindToController n 注意 n bindToController使えへんやんけ n controllerAs書いていますか? n scope: {}って書いていますか? n AngularJSのバージョンは1.4.x? n キャメルケースとハイフンケース
+ bindToController n もっと詳しく知りたい⼈人は 「AngularJS1.4 と bindToController」
+ 終わり Thank you