Develop Components with Angular

Transcript

1. Develop Components with Angular @Quramy 2016.12.22 ng_sake#7
2. 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 

3. Today’s theme: Component։ൃͷͨΊʹ΍ͬ ͍ͯΔ͜ͱ
4. • UI Component Guide • Karma Driven Development
5. UI and Application • ModuleΛ໌ࣔతʹ෼ׂ • UI Module: ݟͨ໨ʹಛԽ͢Δ. ΞϓϦͷ஌ࣝ͸࣋ͨͳ͍ • Application Module: UIΛར༻͢Δ͚ͩ. ෳࡶͳCSS͸ॻ͔ ͳ͍ UI Module Application Module
6. UI Component
7. UI Component • νʔϜͰ։ൃͯ͠Δͱɺ
 ʮ̋̋ͳݟͨ໨ͷComponent͚ͬͯ͋ͬͨͬʁʯ
 ͱ͔
 ʮ××ͷComponentͬͯͲ͏΍ͬͯ࢖͏Μ͚ͩͬʁʯ
 ͬͯͳΔ
8. Component Guide • Component GuideͷϝϦοτ • ݟͨ໨ͷύλʔϯ͕Ұ໨Ͱ෼͔Δ • exampleͱͦͷsource΋ఏڙ͢Δ͜ ͱͰɺίϐϖݩ΋؆୯ʹ୳ͤΔ UI Module Component Guide
9. ͜Μͳ͔Μ͡
10. Ͳʔ΍ͬͯ࡞Δͷ͔ • 1 UI ComponentʹରԠͯ͠ 1UI Guide ComponentΛ࡞Δ • Guide ComponentͷΫϥεͷ഑ྻΛ࡞ͬͯGuide Moduleͷ entryComponents ʹಥͬࠐΉ • ComponentResolverFactory + ViewContainerRef Λ࢖ͬ ͯɺGuide ComponentΛಈతʹϚ΢ϯτ͢Δ • ιʔείʔυදࣔ͸srcσΟϨΫτϦΛͦͷ··Webαʔόʹ ಥͬࠐΜͰ͓͍ͯɺHttp ServiceͰऔಘ͢Δ͚ͩ
11. Application Component
12. Application Componentͷಛੑ େ࿮ɺԼهͷͲ͔ͬͪʹͳΔ:(΋ͪΖΜྫ֎΋͋Δ͚Ͳ….) • Smart Component:
 State؅ཧ΍Ajaxͱ͔͢Δࢠɻ஫ೖ͞ΕΔService ଟΊɻ • Dumb Component: 
 ड͚ͱͬͨ஋ͷඳըͱΠϕϯτϋϯυϦϯάʹू த͢Δࢠ. @Input ͱ @Output த৺
13. ಛʹDumb Component͸ඳըύλʔϯ͕ଟ͘ͳ Γ͕ͪ. *ngIf ৚݅෼ذͱ͔͍ͬͺ͍ɻ ୯ମςετͩʂ
14. Karma Debug Ͳ͏ͤKarmaͰDOMͷݕূ͢ΔΜͩͬͨΒɺ͍ͭͰʹݟ ͨ໨΋֬ೝͪ͠Ό͑͹Α͘Ͷʁ • ϩʔΧϧ: Karmaͷdebug.htmlΛ໨ͰΈΔ • CI: spec׬ྃ࣌఺ͰͷScreenshotΛอଘ. • ͱ͸͍͑ɺPhantomJSͩͱϨϯμϦϯάγϣϘ͍ • ͦ͏ͩɺElectronͩ
15. karma-nightmare https://github.com/bokuweb/karma-nightmare • Nightmare(Electronϥούʔ)ΛKarmaͷ browserͱͯ͠ར༻͢ΔͨΊͷPlugin • screenshot ϝιου͕ఏڙ͞ΕΔ. ͜ΕΛspec ΍ɺafterEachͰୟ͚͹pngͷऔಘ͕Մೳ
16. Demonstration https://github.com/Quramy/karma- nightmare-angular-demo
17. Thank you!