Develop Components with Angular

Transcript

1. 1.

   Develop Components with Angular @Quramy 2016.12.22 ng_sake#7

2. 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. 3.

   Today’s theme: Component։ൃͷͨΊʹ΍ͬ ͍ͯΔ͜ͱ

4. 4.

   • UI Component Guide • Karma Driven Development

5. 5.

   UI and Application • ModuleΛ໌ࣔతʹ෼ׂ • UI Module: ݟͨ໨ʹಛԽ͢Δ. ΞϓϦͷ஌ࣝ͸࣋ͨͳ͍

   • Application Module: UIΛར༻͢Δ͚ͩ. ෳࡶͳCSS͸ॻ͔ ͳ͍ UI Module Application Module
6. 6.

   UI Component

7. 7.

   UI Component • νʔϜͰ։ൃͯ͠Δͱɺ
 ʮ̋̋ͳݟͨ໨ͷComponent͚ͬͯ͋ͬͨͬʁʯ
 ͱ͔
 ʮ××ͷComponentͬͯͲ͏΍ͬͯ࢖͏Μ͚ͩͬʁʯ
 ͬͯͳΔ

8. 8.

   Component Guide • Component GuideͷϝϦοτ • ݟͨ໨ͷύλʔϯ͕Ұ໨Ͱ෼͔Δ • exampleͱͦͷsource΋ఏڙ͢Δ͜ ͱͰɺίϐϖݩ΋؆୯ʹ୳ͤΔ

   UI Module Component Guide
9. 9.

   ͜Μͳ͔Μ͡

10. 10.

    Ͳʔ΍ͬͯ࡞Δͷ͔ • 1 UI ComponentʹରԠͯ͠ 1UI Guide ComponentΛ࡞Δ • Guide

    ComponentͷΫϥεͷ഑ྻΛ࡞ͬͯGuide Moduleͷ entryComponents ʹಥͬࠐΉ • ComponentResolverFactory + ViewContainerRef Λ࢖ͬ ͯɺGuide ComponentΛಈతʹϚ΢ϯτ͢Δ • ιʔείʔυදࣔ͸srcσΟϨΫτϦΛͦͷ··Webαʔόʹ ಥͬࠐΜͰ͓͍ͯɺHttp ServiceͰऔಘ͢Δ͚ͩ
11. 11.

    Application Component

12. 12.

    Application Componentͷಛੑ େ࿮ɺԼهͷͲ͔ͬͪʹͳΔ:(΋ͪΖΜྫ֎΋͋Δ͚Ͳ….) • Smart Component:
 State؅ཧ΍Ajaxͱ͔͢Δࢠɻ஫ೖ͞ΕΔService ଟΊɻ • Dumb

    Component: 
 ड͚ͱͬͨ஋ͷඳըͱΠϕϯτϋϯυϦϯάʹू த͢Δࢠ. @Input ͱ @Output த৺
13. 13.

    ಛʹDumb Component͸ඳըύλʔϯ͕ଟ͘ͳ Γ͕ͪ. *ngIf ৚݅෼ذͱ͔͍ͬͺ͍ɻ ୯ମςετͩʂ

14. 14.

    Karma Debug Ͳ͏ͤKarmaͰDOMͷݕূ͢ΔΜͩͬͨΒɺ͍ͭͰʹݟ ͨ໨΋֬ೝͪ͠Ό͑͹Α͘Ͷʁ • ϩʔΧϧ: Karmaͷdebug.htmlΛ໨ͰΈΔ • CI: spec׬ྃ࣌఺ͰͷScreenshotΛอଘ.

    • ͱ͸͍͑ɺPhantomJSͩͱϨϯμϦϯάγϣϘ͍ • ͦ͏ͩɺElectronͩ
15. 15.

    karma-nightmare https://github.com/bokuweb/karma-nightmare • Nightmare(Electronϥούʔ)ΛKarmaͷ browserͱͯ͠ར༻͢ΔͨΊͷPlugin • screenshot ϝιου͕ఏڙ͞ΕΔ. ͜ΕΛspec ΍ɺafterEachͰୟ͚͹pngͷऔಘ͕Մೳ

16. 16.

    Demonstration https://github.com/Quramy/karma- nightmare-angular-demo

17. 17.

    Thank you!