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
420
上手に付き合うコンポーネントテスト
quramy
4
1.6k
Patched fetch did not work
quramy
6
540
GraphQL あるいは React における自律的なデータ取得について
quramy
16
4.1k
Next.js App Router
quramy
15
2.9k
Fragment Composition of GraphQL
quramy
16
2.9k
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
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ~俺のやらかしを越えてゆけ~
techouse
53
34k
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
300
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
230
JaSST 24 九州:ワークショップ(は除く)実践!マインドマップを活用したソフトウェアテスト+活用事例
satohiroyuki
0
320
[PyCon Korea 2024 Keynote] 커뮤니티와 파이썬, 그리고 우리
beomi
0
120
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
410
AWS IaCの注目アップデート 2024年10月版
konokenj
3
3.2k
推し活としてのrails new/oshikatsu_ha_iizo
sakahukamaki
3
2k
AWS Lambdaから始まった Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
0
100
役立つログに取り組もう
irof
28
9.3k
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
3
430
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
240
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
What's new in Ruby 2.0
geeforr
343
31k
Fireside Chat
paigeccino
33
3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
700
Unsuck your backbone
ammeep
668
57k
Thoughts on Productivity
jonyablonski
67
4.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
GitHub's CSS Performance
jonrohan
1030
460k
Building Your Own Lightsaber
phodgson
102
6.1k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
YesSQL, Process and Tooling at Scale
rocio
168
14k
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!