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
Develop Components with Angular
Search
Yosuke Kurami
December 23, 2016
Programming
1
560
Develop Components with Angular
Yosuke Kurami
December 23, 2016
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
App Router 悲喜交々
quramy
7
530
上手に付き合うコンポーネントテスト
quramy
4
1.9k
Patched fetch did not work
quramy
6
600
GraphQL あるいは React における自律的なデータ取得について
quramy
18
4.9k
Next.js App Router
quramy
15
3.4k
Fragment Composition of GraphQL
quramy
16
3.6k
reg-viz VRT tools
quramy
4
1.3k
NoInfer
quramy
0
240
Precondition with schema directives
quramy
0
1.5k
Other Decks in Programming
See All in Programming
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
テストをしないQAエンジニアは何をしているか?
nealle
0
130
Honoをフロントエンドで使う 3つのやり方
yusukebe
4
2.1k
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
Spring gRPC について / About Spring gRPC
mackey0225
0
220
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.8k
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
Featured
See All Featured
It's Worth the Effort
3n
184
28k
Writing Fast Ruby
sferik
628
61k
How STYLIGHT went responsive
nonsquared
98
5.3k
A Philosophy of Restraint
colly
203
16k
Navigating Team Friction
lara
183
15k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Building Your Own Lightsaber
phodgson
104
6.2k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Faster Mobile Websites
deanohume
306
31k
Optimizing for Happiness
mojombo
376
70k
How to Ace a Technical Interview
jacobian
276
23k
Transcript
Develop Components with Angular @Quramy 2016.12.22 ng_sake#7
About me • @Quramy (Yosuke Kurami) • Frontend Web Developer
at WACUL INC. • develop SPA with Angular(1 and 2) • झຯͰTypeScript༻ͷVimϓϥΪϯ։ൃ͠·͢ • http://vimawesome.com/plugin/tsuquyomi
Today’s theme: Component։ൃͷͨΊʹͬ ͍ͯΔ͜ͱ
• UI Component Guide • Karma Driven Development
UI and Application • ModuleΛ໌ࣔతʹׂ • UI Module: ݟͨʹಛԽ͢Δ. ΞϓϦͷࣝ࣋ͨͳ͍
• Application Module: UIΛར༻͢Δ͚ͩ. ෳࡶͳCSSॻ͔ ͳ͍ UI Module Application Module
UI Component
UI Component • νʔϜͰ։ൃͯ͠Δͱɺ ʮ̋̋ͳݟͨͷComponent͚ͬͯ͋ͬͨͬʁʯ ͱ͔ ʮ××ͷComponentͬͯͲ͏ͬͯ͏Μ͚ͩͬʁʯ ͬͯͳΔ
Component Guide • Component GuideͷϝϦοτ • ݟͨͷύλʔϯ͕ҰͰ͔Δ • exampleͱͦͷsourceఏڙ͢Δ͜ ͱͰɺίϐϖݩ؆୯ʹ୳ͤΔ
UI Module Component Guide
͜Μͳ͔Μ͡
Ͳʔͬͯ࡞Δͷ͔ • 1 UI ComponentʹରԠͯ͠ 1UI Guide ComponentΛ࡞Δ • Guide
ComponentͷΫϥεͷྻΛ࡞ͬͯGuide Moduleͷ entryComponents ʹಥͬࠐΉ • ComponentResolverFactory + ViewContainerRef Λͬ ͯɺGuide ComponentΛಈతʹϚϯτ͢Δ • ιʔείʔυදࣔsrcσΟϨΫτϦΛͦͷ··Webαʔόʹ ಥͬࠐΜͰ͓͍ͯɺHttp ServiceͰऔಘ͢Δ͚ͩ
Application Component
Application Componentͷಛੑ େɺԼهͷͲ͔ͬͪʹͳΔ:(ͪΖΜྫ֎͋Δ͚Ͳ….) • Smart Component: StateཧAjaxͱ͔͢Δࢠɻೖ͞ΕΔService ଟΊɻ • Dumb
Component: ड͚ͱͬͨͷඳըͱΠϕϯτϋϯυϦϯάʹू த͢Δࢠ. @Input ͱ @Output த৺
ಛʹDumb Componentඳըύλʔϯ͕ଟ͘ͳ Γ͕ͪ. *ngIf ݅ذͱ͔͍ͬͺ͍ɻ ୯ମςετͩʂ
Karma Debug Ͳ͏ͤKarmaͰDOMͷݕূ͢ΔΜͩͬͨΒɺ͍ͭͰʹݟ ͨ֬ೝͪ͠Ό͑Α͘Ͷʁ • ϩʔΧϧ: Karmaͷdebug.htmlΛͰΈΔ • CI: specྃ࣌ͰͷScreenshotΛอଘ.
• ͱ͍͑ɺPhantomJSͩͱϨϯμϦϯάγϣϘ͍ • ͦ͏ͩɺElectronͩ
karma-nightmare https://github.com/bokuweb/karma-nightmare • Nightmare(Electronϥούʔ)ΛKarmaͷ browserͱͯ͠ར༻͢ΔͨΊͷPlugin • screenshot ϝιου͕ఏڙ͞ΕΔ. ͜ΕΛspec ɺafterEachͰୟ͚pngͷऔಘ͕Մೳ
Demonstration https://github.com/Quramy/karma- nightmare-angular-demo
Thank you!