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
600
Develop Components with Angular
Yosuke Kurami
December 23, 2016
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
TypeScript LSP の今までとこれから
quramy
1
510
フロントエンドテストの育て方
quramy
12
3.4k
App Router 悲喜交々
quramy
8
620
上手に付き合うコンポーネントテスト
quramy
6
2.1k
Patched fetch did not work
quramy
6
680
GraphQL あるいは React における自律的なデータ取得について
quramy
18
5.3k
Next.js App Router
quramy
15
3.6k
Fragment Composition of GraphQL
quramy
16
4k
reg-viz VRT tools
quramy
4
1.4k
Other Decks in Programming
See All in Programming
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
2
610
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
mackey0225
2
520
データベースコネクションプール(DBCP)の変遷と理解
fujikawa8
1
270
FormFlow - Build Stunning Multistep Forms
yceruto
1
190
コード書くの好きな人向けAIコーディング活用tips #orestudy
77web
3
320
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
290
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
320
Go Modules: From Basics to Beyond / Go Modulesの基本とその先へ
kuro_kurorrr
0
120
XSLTで作るBrainfuck処理系
makki_d
0
210
GraphRAGの仕組みまるわかり
tosuri13
7
450
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
1
470
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
77
9.4k
Site-Speed That Sticks
csswizardry
10
650
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Faster Mobile Websites
deanohume
307
31k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Producing Creativity
orderedlist
PRO
346
40k
How to train your dragon (web standard)
notwaldorf
92
6.1k
Why Our Code Smells
bkeepers
PRO
337
57k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
What's in a price? How to price your products and services
michaelherold
245
12k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
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!