ゆるふわAngular入門/angular-intro

2018/03/16(金)
第1回ペパボフロントエンドミーティング

Transcript

1. ਢా݈ଠ࿠
   
   (.0
   1FQBCP
   *OD
   
   ୈճϑϩϯτΤϯυςοΫϛʔςΟϯά ΏΔ;Θ"OHVMBSೖ໳
2. ΤϯδχΞ ਢా݈ଠ࿠
   
   !TVEBI &$ࣄۀ෦ΧϥʔϛʔγϣοϓάϧʔϓϓϥοτϑΥʔϜνʔϜ IUUQLVHJUIVCJP
3. Ͳ͏ͯ͠"OHVMBS
4. Ͳ͏ͯ͠"OHVMBS w࠷ۙࣾ಺Ͱ͸7VFKT͕ྲྀߦ͍ͬͯΔ
   wΧϥʔϛʔͰ͸"OHVMBSΛ࢖͍ͬͯΔ
   w୭΋"OHVMBSͷ࿩Λ͍ͯ͠ͳ͍
   w"OHVMBSྲྀߦΕͱ͸ݴΘͳ͍͚ΕͲڵຯΛ࣋ͬͯ΄͍͠
5. ੈͷதͷτϨϯυ͸ !BOHVMBSDPSF
   WT
   SFBDU
   WT
   WVF
   c
   OPN
   USFOET
   IUUQXXXOQNUSFOETDPN!BOHVMBSDPSFWTSFBDUWTWVF
6. "OHVMBSͱ͸
7. ͲΜͳϑϨʔϜϫʔΫͳͷ wϑϧελοΫͷ+BWB4DSJQUϑϨʔϜϫʔΫ
   wSBJMTΈ͍ͨʹBOHVMBSDMJΛར༻ͯ͠TDB⒎PME ͢Δ͚ͩͰΞϓϦ͕࡞ΕΔ
   w+BWB4DSJQUͰ͸ͳ͘5ZQF4DSJQU͕ඪ४
   wίϯϙʔωϯτࢦ޲ (PPHMF
   ˜
   $$
   #:
   
8. ίϯϙʔωϯτࢦ޲ wίϯϙʔωϯτ͸ɺϖʔδΛߏ੒͢Δ6*ύʔπ
   wݟͨ໨΍ৼΔ෣͍ɺσʔλ౳ͰͰ͖͍ͯΔ
   w͜ΕΒίϯϙʔωϯτΛ૊Έ߹ΘͤͯΞϓϦΛߏங͢Δ
10. όʔδϣϯ͸ wݱࡏͷ࠷৽όʔδϣϯ͸
    
    ࣌఺
    w൒೥ʹҰճϝδϟʔόʔδϣϯΞοϓ
    ଎
    wϑϩϯτΤϯυͷ੎͍Λମݱ͍ͯ͠Δ
    wͪͳΈʹΧϥʔϛʔͷ͸
    YY
    Ͱࢭ·ͬͯ·͢
    
11. "OHVMBS+4ͱͲ͏ҧ͏ͷ wݩʑ͸"OHVMBS+4ͱ͍͏໊শͰͨ͠
    wY͔Β"OHVMBSͱݺͿΑ͏ʹͳΓ·ͨ͠ 
    Y͸"OHVMBS+4
    wجຊతʹޓ׵ੑ͸ͳ͍
    w"OHVMBS+4ͷ֓೦ͷଟ͕͘3*1ͯ͠ੜ·ΕมΘͬͨ
    wΞοϓάϨʔυํ๏͸͋Δ
12. "OHVMBSΞϓϦͰೣΛࣂ͏
13. ͜Μͳ΋ͷΛ࡞Γ͍ͨ ΞϓϦ Ո ೣ ೣ ೣ ೣ ೣ
14. ΞϓϦͷ౔୆Λ࡞ΔΑ npm install -g @angular/cli ng new sample-app cd sample-app
15. ೣΛࣂ͏ͨΊͷՈͱݺͿ૷ஔΛ༻ҙ͢ΔΑ ng generate component cats ng generate service cat —-module=app
16. ೣ͕ॅΊΔΑ͏ʹվྑ͍ͯ͘͠Α
19. ೣΛ༻ҙ͢Δ npm install angular-in-memory-web-api —save ng generate service in-memory-data —-module=app
22. ೣΛݺΜͰΈ·͠ΐ͏ npm start (or) ng serve
23. /FYU
    4UFQ
24. "OHVMBSษڧձ΍Γ·ͤΜ͔ wݸਓతʹ͸·ͩ·ͩษڧෆ଍
    wۀ຿Ͱ࢖͑Δ͔ͱ͔͸ߟ͑ͣʹͱΓ͋͑ͣ΍ͬͯΈ͍ͨ
    wҰॹʹษڧ͢Δ஥ؒΛืू͠·͢
25. ΋͏ͪΐͬͱৄ͘͠
26. ଞͷϑϨʔϜϫʔΫͱͷҧ͍͸ wงғؾతʹ7VFKT΍3FBDUͱൺ΂Δͱࣗ༝౓͸௿ͦ͏
    wہॴతɺஈ֊తʹద༻͢Δͱ͍͏ͷ͕೉ͦ͠͏
    w3BJMTΞϓϦͱͷڞੜ΋೉͍͠
    w8FCQBDLFS͸Φεεϝ͠ͳ͍
    wϨʔϧʹ৐Γ͍ͨਓ޲͚
27. 8FCQBDL͸ඞཁ w࣮͸͢Ͱʹ࢖͍ͬͯΔ
    w"OHVMBSͷϥΠϒϥϦ͕͍͍ײ͡ʹϥοϓͯ͘͠Ε͍ͯΔ
    w443 TFSWFSTJEF
    SFOEFSJOH ͨ͘͠ͳͬͨΒඞཁ
    wOH
    FKFDU
    ͕ϥοϓղআͷढจ