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
350
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
0
58
クックパッドマート SORACOMを使って 高速プロトタイピング
shinsuke_imai
0
63k
クックパッドマート開発の裏側 ~ステーション編~
shinsuke_imai
0
1.3k
クックパッドマートを支えるIoT 技術
shinsuke_imai
0
500
クックパッドマートを支えるIoT 技術
shinsuke_imai
0
1.1k
Reliable distribution system with Ruby x IoT
shinsuke_imai
0
700
クックパッド流食品流通の作り方
shinsuke_imai
0
240
Reliable label printer system
shinsuke_imai
0
150
Data analysis of cookpad storeTV
shinsuke_imai
1
5.5k
Other Decks in Programming
See All in Programming
Milestoner
bkuhlmann
1
410
Ruby Pattern Matching
bkuhlmann
0
930
Goのmultiple errorsについて (2024年4月版)
syumai
3
680
Tailwind CSSを本気でカスタマイズする方法
fsubal
13
5.2k
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
0
230
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
200
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
4k
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
23
15k
雑に思考を整理する技術と効能
konifar
59
29k
Hanami and htmx
bkuhlmann
0
210
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
490
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Infographics Made Easy
chrislema
238
18k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
In The Pink: A Labor of Love
frogandcode
138
21k
Building an army of robots
kneath
300
41k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Faster Mobile Websites
deanohume
299
30k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
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