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
360
AngularJSでのComponent指向
ng-kyoto Meetup Kyoto #1
imashin
June 19, 2015
Tweet
Share
More Decks by imashin
See All by imashin
スマートホームのこれから - NOT A HOTEL TECH TALK 2024/04/09
shinsuke_imai
1
170
クックパッドマート SORACOMを使って 高速プロトタイピング
shinsuke_imai
0
68k
クックパッドマート開発の裏側 ~ステーション編~
shinsuke_imai
0
1.4k
クックパッドマートを支えるIoT 技術
shinsuke_imai
0
550
クックパッドマートを支えるIoT 技術
shinsuke_imai
0
1.2k
Reliable distribution system with Ruby x IoT
shinsuke_imai
0
720
クックパッド流食品流通の作り方
shinsuke_imai
0
260
Reliable label printer system
shinsuke_imai
0
200
Data analysis of cookpad storeTV
shinsuke_imai
1
5.7k
Other Decks in Programming
See All in Programming
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
37
14k
技術を根付かせる / How to make technology take root
kubode
1
250
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
220
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.4k
昭和の職場からアジャイルの世界へ
kumagoro95
1
380
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
510
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
11
3.8k
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
120
sappoRo.R #12 初心者セッション
kosugitti
0
250
Immutable ActiveRecord
megane42
0
140
SpringBoot3.4の構造化ログ #kanjava
irof
2
1k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
182
22k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Embracing the Ebb and Flow
colly
84
4.6k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
What's in a price? How to price your products and services
michaelherold
244
12k
YesSQL, Process and Tooling at Scale
rocio
172
14k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Thoughts on Productivity
jonyablonski
69
4.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
174
51k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
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