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
550
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
430
上手に付き合うコンポーネントテスト
quramy
4
1.6k
Patched fetch did not work
quramy
6
540
GraphQL あるいは React における自律的なデータ取得について
quramy
17
4.2k
Next.js App Router
quramy
15
3k
Fragment Composition of GraphQL
quramy
16
3k
reg-viz VRT tools
quramy
4
1.2k
NoInfer
quramy
0
210
Precondition with schema directives
quramy
0
1.4k
Other Decks in Programming
See All in Programming
Remix on Hono on Cloudflare Workers
yusukebe
1
300
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
120
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
120
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
3
700
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.3k
ローコードSaaSのUXを向上させるためのTypeScript
taro28
1
630
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
1.2k
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
6
1.8k
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
1
300
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
340
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Ruby is Unlike a Banana
tanoku
97
11k
Building Applications with DynamoDB
mza
90
6.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Writing Fast Ruby
sferik
627
61k
How GitHub (no longer) Works
holman
310
140k
Visualization
eitanlees
145
15k
Navigating Team Friction
lara
183
14k
Designing for Performance
lara
604
68k
Rails Girls Zürich Keynote
gr2m
94
13k
Raft: Consensus for Rubyists
vanstee
136
6.6k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
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!