ゆるふわAngular入門/angular-intro

 ゆるふわAngular入門/angular-intro

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

13b7e939232a839e46554746564dd62e?s=128

Kentaro Suda

March 16, 2018
Tweet

Transcript

  1. ਢా݈ଠ࿠(.01FQBCP *OD ୈճϑϩϯτΤϯυςοΫϛʔςΟϯά ΏΔ;Θ"OHVMBSೖ໳

  2. ΤϯδχΞ ਢా݈ଠ࿠!TVEBI &$ࣄۀ෦ΧϥʔϛʔγϣοϓάϧʔϓϓϥοτϑΥʔϜνʔϜ IUUQLVHJUIVCJP

  3. Ͳ͏ͯ͠"OHVMBS

  4. Ͳ͏ͯ͠"OHVMBS w࠷ۙࣾ಺Ͱ͸7VFKT͕ྲྀߦ͍ͬͯΔ wΧϥʔϛʔͰ͸"OHVMBSΛ࢖͍ͬͯΔ w୭΋"OHVMBSͷ࿩Λ͍ͯ͠ͳ͍ w"OHVMBSྲྀߦΕͱ͸ݴΘͳ͍͚ΕͲڵຯΛ࣋ͬͯ΄͍͠

  5. ੈͷதͷτϨϯυ͸ !BOHVMBSDPSFWTSFBDUWTWVFcOPNUSFOET IUUQXXXOQNUSFOETDPN!BOHVMBSDPSFWTSFBDUWTWVF

  6. "OHVMBSͱ͸

  7. ͲΜͳϑϨʔϜϫʔΫͳͷ wϑϧελοΫͷ+BWB4DSJQUϑϨʔϜϫʔΫ wSBJMTΈ͍ͨʹBOHVMBSDMJΛར༻ͯ͠TDB⒎PME ͢Δ͚ͩͰΞϓϦ͕࡞ΕΔ w+BWB4DSJQUͰ͸ͳ͘5ZQF4DSJQU͕ඪ४ wίϯϙʔωϯτࢦ޲ (PPHMF˜$$#:

  8. ίϯϙʔωϯτࢦ޲ wίϯϙʔωϯτ͸ɺϖʔδΛߏ੒͢Δ6*ύʔπ wݟͨ໨΍ৼΔ෣͍ɺσʔλ౳ͰͰ͖͍ͯΔ w͜ΕΒίϯϙʔωϯτΛ૊Έ߹ΘͤͯΞϓϦΛߏங͢Δ

  9. None
  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. ೣ͕ॅΊΔΑ͏ʹվྑ͍ͯ͘͠Α

  17. None
  18. None
  19. ೣΛ༻ҙ͢Δ npm install angular-in-memory-web-api —save ng generate service in-memory-data —-module=app

  20. None
  21. None
  22. ೣΛݺΜͰΈ·͠ΐ͏ npm start (or) ng serve

  23. /FYU4UFQ

  24. "OHVMBSษڧձ΍Γ·ͤΜ͔ wݸਓతʹ͸·ͩ·ͩษڧෆ଍ wۀ຿Ͱ࢖͑Δ͔ͱ͔͸ߟ͑ͣʹͱΓ͋͑ͣ΍ͬͯΈ͍ͨ wҰॹʹษڧ͢Δ஥ؒΛืू͠·͢

  25. ΋͏ͪΐͬͱৄ͘͠

  26. ଞͷϑϨʔϜϫʔΫͱͷҧ͍͸ wงғؾతʹ7VFKT΍3FBDUͱൺ΂Δͱࣗ༝౓͸௿ͦ͏ wہॴతɺஈ֊తʹద༻͢Δͱ͍͏ͷ͕೉ͦ͠͏ w3BJMTΞϓϦͱͷڞੜ΋೉͍͠ w8FCQBDLFS͸Φεεϝ͠ͳ͍ wϨʔϧʹ৐Γ͍ͨਓ޲͚

  27. 8FCQBDL͸ඞཁ w࣮͸͢Ͱʹ࢖͍ͬͯΔ w"OHVMBSͷϥΠϒϥϦ͕͍͍ײ͡ʹϥοϓͯ͘͠Ε͍ͯΔ w443 TFSWFSTJEFSFOEFSJOH ͨ͘͠ͳͬͨΒඞཁ wOHFKFDU͕ϥοϓղআͷढจ