AngularJS (1.x) いまさら触ってみた

Symfony Meetup #4 LT 資料
https://symfony.doorkeeper.jp/events/26456

Transcript

1. AngularJS (1.x) ͍·͞Β৮ͬͯΈͨ #symfony_meetup 2015.06.20 @qckanemoto
2. • ໊ݹ԰͔Βདྷ·ͨ͠ • (ג)ΧϧςοτίϛϡχέʔγϣϯζCTO • PHPྺ3೥ • Symfonyྺ1೥ʢ൒೥͙Β͍͸ROMઐʣ @qckanemoto
3. Χϧςοτίϛϡχέʔγϣϯζ • PHPerืूதʂ • ໊ݹ԰ʢϦϞʔτՄʣ • @hidenorigoto͞Μ͕஥ؒೖΓ͠·ͨ͠ • ϦεςΟϯά޿ࠂӡ༻πʔϧʮLisketʯ
4. ΤϯδχΞͷಇ͖΍͢͞௒େࣄʹͯ͠·͢ Χϧςοτίϛϡχέʔγϣϯζ
5. SNS͔ϝʔϧͰ͓ؾܰʹ͝࿈བྷ͍ͩ͘͞✨ Χϧςοτίϛϡχέʔγϣϯζ
6. ຊ୊
7. Symfony2 + AngularJS ձࣾͷϓϩμΫτͷߏ੒
8. ձࣾͷϓϩμΫτͷߏ੒ Symfony2 + AngularJS
9. ձࣾͷϓϩμΫτͷߏ੒ ʊਓਓਓਓਓਓਓਓʊ ʼɹ AngularJS ɹʻ ʼɹɹɹɹɹɹɹɹʻ ʉY^Y^Y^Y^Y^Y^Yʉ
10. ձࣾͷϓϩμΫτͷߏ੒ ʊਓਓਓਓਓਓਓਓʊ ʼɹ AngularJS ɹʻ ʼɹશવ෼͔ΒΜɹʻ ʉY^Y^Y^Y^Y^Y^Yʉ
11. ࢓ࣄʹࢧো͕͋ͬͨͷͰ ͜͜3೔͙Β͍৮ͬͯΈ·ͨ͠
12. ࣄ࢝Ί • ͱΓ͋͑ͣͳͷͰਂ͘ߟ͑ͣʹYeomanͰ࡞Δ
13. ࣄ࢝Ί
14. ࣄ࢝Ί
15. ͓͓ʙ
16. Step1. σΟϨΫτϦߏ੒ݟΔ
18. શϏϡʔڞ௨ͷhtmlʢϨΠΞ΢τతͳʣ
19. શϏϡʔڞ௨ͷhtmlʢϨΠΞ΢τతͳʣ jsϑΝΠϧશ෦͜͜
20. શϏϡʔڞ௨ͷhtmlʢϨΠΞ΢τతͳʣ jsϑΝΠϧશ෦͜͜ ֤Ϗϡʔͷhtml
21. ίϯτϩʔϥ Ϗϡʔ
22. ϧʔςΟϯάઃఆͱ͔configܥ
23. ϧʔςΟϯά͸͜ΜͳϊϦ
24. ೺Ѳ
25. Step2. ͱΓ͋͑ͣը໘ॻ͘ ʢνϟοτπʔϧΈ͍ͨͳͷΛ૝ఆʣ
26. ίϯτϩʔϥ
27. ίϯτϩʔϥ Ҿ਺ʹॻ͚ͩ͘Ͱ αʔϏεΛΠϯδΣΫτՄೳ
28. ίϯτϩʔϥ $scopeαʔϏεܦ༝Ͱ ίϯτϩʔϥɾϏϡʔؒͰ ม਺ʢϞσϧʣΛڞ༗
29. Ϗϡʔ
30. Ϗϡʔ $scope.comment Λ {{ comment }} Ͱग़ྗ
31. Ϗϡʔ Α͋͘Δײ͡ͷϑΟϧλ ʢࣗ࡞΋Մೳʣ
32. ग़ྗ݁Ռ
33. ͓͓ʙ
34. Step3. ฤूՄೳʹͯ͠ΈΔ
35. ίϯτϩʔϥ ϞσϧʹฤूதϑϥάΛ௥Ճ
36. Ϗϡʔ
37. Ϗϡʔ ฤूϑϥάΛ੾Γସ͑ΔϘλϯΛ௥Ճ
38. Ϗϡʔ ΫϦοΫ͞ΕͨΒ comment.isEditing Λ൓స
39. Ϗϡʔ ฤूϑϥάͷ஋ʹԠͯ͡ දࣔͤ͞ΔཁૉΛ੾Γସ͑
40. Ϗϡʔ ฤूதͷͱ͖͸Ӆ͢
41. Ϗϡʔ ฤूதͷͱ͖ʹݟͤΔ
42. Ϗϡʔ comment.content ʹ ೖྗ஋Λඥ෇͚Δ
43. ग़ྗ݁Ռ
44. ग़ྗ݁Ռ ΫϦοΫͯ͠ฤूதʹ
45. ग़ྗ݁Ռ ฤू
46. ग़ྗ݁Ռ ΫϦοΫͯ͠ฤूऴྃ
47. ͓͓ʙ
48. Step4. ࠶ར༻ͨ͘͠ͳΔ
49. ͜ͷ࣌఺Ͱࢥͬͨ͜ͱ νϟοτπʔϧͩͬͨΒ ͜ͷฤूՄೳͳίϝϯτύωϧ ৭Μͳը໘Ͱ࢖͍ͦ͏
50. Ϗϡʔ෦඼ͷ࠶ར༻ • ϏϡʔͷҰ෦ΛʮσΟϨΫςΟϒʯͱͯ͠෦඼Խ • ෳ਺ͷϏϡʔ͔ΒσΟϨΫςΟϒΛ࠶ར༻ • ng-click, ng-show, ng-hide, ng-model ౳΋
 AngularJS૊ΈࠐΈͷσΟϨΫςΟϒ • ཁૉΛؙ͝ͱ෦඼Խͨ͠ΓɺཁૉͷػೳΛ֦ு ͢ΔͨΊͷଐੑ͚ͩΛ෦඼Խͨ͠Γ৭ʑͰ͖Δ
51. σΟϨΫςΟϒԽͯ͠ΈΔ ஫ɿjsϑΝΠϧΛ௥Ճͨ͠৔߹͸index.html͔Βϩʔυ͢ΔͷΛ๨Εͳ͍Α͏ʹ
52. σΟϨΫςΟϒԽͯ͠ΈΔ σΟϨΫςΟϒ໊͸ camelCase Ͱ෇͚Δ Ϗϡʔ͔Β͸ kebab-case Ͱ࢖͏
53. σΟϨΫςΟϒԽͯ͠ΈΔ ‘E’ ͸ཁૉʢElementʣ ‘A’ ͸ଐੑʢAttributeʣ ‘EA’ ͱ͔΍Δͱ྆ํͱͯ͠࢖͑Δ
54. σΟϨΫςΟϒԽͯ͠ΈΔ σΟϨΫςΟϒʹHTMLදݱΛ ͍࣋ͨͤͨ৔߹͸ςϯϓϨʔτΛࢦఆͰ͖Δ ʢػೳͷΈͰHTMLදݱΛ࣋ͨͳ͍΋ͷ΋Մʣ
55. σΟϨΫςΟϒԽͯ͠ΈΔ σΟϨΫςΟϒΛ࢖ͬͨཁૉࣗମΛ ςϯϓϨʔτͰஔ͖׵͑Δ৔߹͸ true ʹ
56. σΟϨΫςΟϒԽͯ͠ΈΔ σΟϨΫςΟϒͷ࣋ͭಠࣗείʔϓͱ ར༻ଆͷϏϡʔͷείʔϓͷؔ࿈෇͚ઃఆʢޙड़ʣ
57. σΟϨΫςΟϒͷςϯϓϨʔτ
58. Ϗϡʔ
59. Ϗϡʔ ϏϡʔଆͰ͸ σΟϨΫςΟϒ໊͸ kebab-case
60. Ϗϡʔ σΟϨΫςΟϒείʔϓͷ comment ͱ͍͏Ϟσϧʹ ࣗείʔϓͷ comment ϞσϧΛόΠϯυ
61. ग़ྗ݁Ռ ͪΌΜͱಉ͡Α͏ʹಈ͘Ϗϡʔ͕ग़ͨ
62. …
63. ͪΐͬͱΉ͍ͣ΍Μ͚
64. σΟϨΫςΟϒ͕࠷ॳͷؔ໳ • 2೔໨͙Β͍ͰσΟϨΫςΟϒ࡞Γͨ͘ͳͬͨ • είʔϓͷόΠϯσΟϯά͕Α͘෼͔Βͳ͘ ͯͪΐͬͱۤ͠Μͩ • ͦΕΛ৐Γӽ͑ͨΒָʹ৭ʑͰ͖ΔΑ͏ʹͳ ͬͨ
65. είʔϓͷόΠϯσΟϯά • ‘=‘ ͱ ‘@’ ͱ ‘&’ ͷ3छྨ͕͋Δ • ‘=‘ ͸૒ํ޲όΠϯσΟϯά • ར༻ଆͱϞσϧΛڞ༗ • σΟϨΫςΟϒͰϞσϧΛॻ͖׵͑ͨΒར༻ଆͰ΋มΘΔ • ‘@‘ ͸ར༻ଆ͔Β੩తͳ஋Λͨͩ΋Β͏͚ͩ • ར༻ଆͰ͸ directive=“{{ model }}” Έ͍ͨʹධՁޙͷ஋Λ౉͢ • ‘&’ ͸࠷ॳ͸͋·Γ࢖Θͳ͍ͷͰͦͷ͏ͪάά͍ͬͯͩ͘͞
66. σΟϨΫςΟϒ͸Ԟ͕ਂ͍ • ଞʹ΋৭ʑͰ͖ͯԞ͕ਂ͍ͬΆ͍Ͱ͢ • Ͱ΋ॳาతͳ࢖͍ํ͚ͩͳΒׂΓͱ͙͢׳Ε·͢ • ҎԼͷهࣄ͕ࢀߟʹͳΓ·ͨ͠ • “AngularJSͷDirectiveΛཧղ͢Δ.”
 http://qiita.com/Quramy/items/ dd4e7d2693c32d92048c
67. ͍ͭͰʹαʔϏεͷઆ໌΋
68. ϩδοΫͷ࠶ར༻ • ϩδοΫΛ࠶ར༻͍ͨ͠৔߹͸ɺσΟϨΫςΟ ϒͰ͸ͳ͘αʔϏεΛ࡞Δ • $scopeͳͲͷ૊ΈࠐΈͷαʔϏεͱಉ͡Α͏ ʹɺίϯτϩʔϥ΍σΟϨΫςΟϒɺଞͷαʔ ϏεͳͲʹ؆୯ʹΠϯδΣΫτՄೳ
69. αʔϏεͷྫʢఆٛଆʣ
70. αʔϏεͷྫʢఆٛଆʣ ୯ҰػೳͷαʔϏεͳΒ ΫϩʔδϟΛ௚઀ return ͯ͠΋OK
71. αʔϏεͷྫʢར༻ଆʣ
72. αʔϏεͷྫʢར༻ଆʣ ૊ΈࠐΈαʔϏεͱಉ͡Α͏ʹ Ҿ਺ʹ౉͚ͩ͢ͰOK
73. αʔϏεͷྫʢར༻ଆʣ ͋ͱ͸ී௨ʹ࢖͏͚ͩ
74. ͬͪ͜͸؆୯ͬΆ͍ʢϗοʣ
75. Step5. ͦͯ͠఻આ΁
76. υΩϡϝϯτಡΈ·͠ΐ͏ • ࠓ͸υΩϡϝϯτ݁ߏॆ࣮ͯͯ҆͠৺Ͱ͢ • ↓ͷ2ͭΛ͋ͨΕ͹͍͍ͩͨ෼͔Γ·͢ • https://docs.angularjs.org/api • https://docs.angularjs.org/guide
77. ग़ల: My Experience With AngularJS - The Super-heroic JavaScript MVW Framework http://www.bennadel.com/blog/2439-my-experience-with-angularjs-the-super-heroic-javascript-mvw-framework.htm ֶशίετ͸༻్࣍ୈ
78. ࣗ෼͸ࠓͨͿΜ “Neat!” ͷͱ͜ͳͷͰ͜ΕҎ্͸ ਂ௥͍͠ͳ͍ํ͕ݡ໌ͬΆ͍
79. ·ͱΊ • Α͘σΟεΒΕͯΔ͚Ͳɺ୯७ͳΞϓϦͰ࢖ ͏ͳΒΊͬͪΌ؆୯Ͱศར • AngularJS 1.x → Angular2 Ͱ΄΅ผͷϑϨʔ ϜϫʔΫʹͳͬͯΔΒ͍͠ͷͰࠓ͔Β΍Δͳ Β1ܥ͸ແࢹͰ͍͍ͱࢥ͍·͢
80. ͓·͚ • Symfony্ͰAngularJSΛಈ͔͍ͨ͠ਓ͸→ • “Symfony2 meets AngularJS”
 http://www.slideshare.net/77web/ symfony-33704176 • Ͱ΋΄ͱΜͲͷέʔεͰࠞͥΔͳةݥͳͷͰ Symfonyଆ͸REST APIʹప͢Δ͕٢
81. Thanks ;)