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

by Takashi Kanemoto

Slide 1

Slide 1 text

AngularJS (1.x) ͍·͞Β৮ͬͯΈͨ #symfony_meetup 2015.06.20 @qckanemoto

Slide 2

Slide 2 text

• ໊ݹ԰͔Βདྷ·ͨ͠ • (ג)ΧϧςοτίϛϡχέʔγϣϯζCTO • PHPྺ3೥ • Symfonyྺ1೥ʢ൒೥͙Β͍͸ROMઐʣ @qckanemoto

Slide 3

Slide 3 text

Χϧςοτίϛϡχέʔγϣϯζ • PHPerืूதʂ • ໊ݹ԰ʢϦϞʔτՄʣ • @hidenorigoto͞Μ͕஥ؒೖΓ͠·ͨ͠ • ϦεςΟϯά޿ࠂӡ༻πʔϧʮLisketʯ

Slide 4

Slide 4 text

ΤϯδχΞͷಇ͖΍͢͞௒େࣄʹͯ͠·͢ Χϧςοτίϛϡχέʔγϣϯζ

Slide 5

Slide 5 text

SNS͔ϝʔϧͰ͓ؾܰʹ͝࿈བྷ͍ͩ͘͞✨ Χϧςοτίϛϡχέʔγϣϯζ

Slide 6

Slide 6 text

ຊ୊

Slide 7

Slide 7 text

Symfony2 + AngularJS ձࣾͷϓϩμΫτͷߏ੒

Slide 8

Slide 8 text

ձࣾͷϓϩμΫτͷߏ੒ Symfony2 + AngularJS

Slide 9

Slide 9 text

ձࣾͷϓϩμΫτͷߏ੒ ʊਓਓਓਓਓਓਓਓʊ ʼɹ AngularJS ɹʻ ʼɹɹɹɹɹɹɹɹʻ ʉY^Y^Y^Y^Y^Y^Yʉ

Slide 10

Slide 10 text

ձࣾͷϓϩμΫτͷߏ੒ ʊਓਓਓਓਓਓਓਓʊ ʼɹ AngularJS ɹʻ ʼɹશવ෼͔ΒΜɹʻ ʉY^Y^Y^Y^Y^Y^Yʉ

Slide 11

Slide 11 text

࢓ࣄʹࢧো͕͋ͬͨͷͰ ͜͜3೔͙Β͍৮ͬͯΈ·ͨ͠

Slide 12

Slide 12 text

ࣄ࢝Ί • ͱΓ͋͑ͣͳͷͰਂ͘ߟ͑ͣʹYeomanͰ࡞Δ

Slide 13

Slide 13 text

ࣄ࢝Ί

Slide 14

Slide 14 text

ࣄ࢝Ί

Slide 15

Slide 15 text

͓͓ʙ

Slide 16

Slide 16 text

Step1. σΟϨΫτϦߏ੒ݟΔ

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

શϏϡʔڞ௨ͷhtmlʢϨΠΞ΢τతͳʣ

Slide 19

Slide 19 text

શϏϡʔڞ௨ͷhtmlʢϨΠΞ΢τతͳʣ jsϑΝΠϧશ෦͜͜

Slide 20

Slide 20 text

શϏϡʔڞ௨ͷhtmlʢϨΠΞ΢τతͳʣ jsϑΝΠϧશ෦͜͜ ֤Ϗϡʔͷhtml

Slide 21

Slide 21 text

ίϯτϩʔϥ Ϗϡʔ

Slide 22

Slide 22 text

ϧʔςΟϯάઃఆͱ͔conﬁgܥ

Slide 23

Slide 23 text

ϧʔςΟϯά͸͜ΜͳϊϦ

Slide 24

Slide 24 text

೺Ѳ

Slide 25

Slide 25 text

Step2. ͱΓ͋͑ͣը໘ॻ͘ ʢνϟοτπʔϧΈ͍ͨͳͷΛ૝ఆʣ

Slide 26

Slide 26 text

ίϯτϩʔϥ

Slide 27

Slide 27 text

ίϯτϩʔϥ Ҿ਺ʹॻ͚ͩ͘Ͱ αʔϏεΛΠϯδΣΫτՄೳ

Slide 28

Slide 28 text

ίϯτϩʔϥ $scopeαʔϏεܦ༝Ͱ ίϯτϩʔϥɾϏϡʔؒͰ ม਺ʢϞσϧʣΛڞ༗

Slide 29

Slide 29 text

Ϗϡʔ

Slide 30

Slide 30 text

Ϗϡʔ $scope.comment Λ {{ comment }} Ͱग़ྗ

Slide 31

Slide 31 text

Ϗϡʔ Α͋͘Δײ͡ͷϑΟϧλ ʢࣗ࡞΋Մೳʣ

Slide 32

Slide 32 text

ग़ྗ݁Ռ

Slide 33

Slide 33 text

͓͓ʙ

Slide 34

Slide 34 text

Step3. ฤूՄೳʹͯ͠ΈΔ

Slide 35

Slide 35 text

ίϯτϩʔϥ ϞσϧʹฤूதϑϥάΛ௥Ճ

Slide 36

Slide 36 text

Ϗϡʔ

Slide 37

Slide 37 text

Ϗϡʔ ฤूϑϥάΛ੾Γସ͑ΔϘλϯΛ௥Ճ

Slide 38

Slide 38 text

Ϗϡʔ ΫϦοΫ͞ΕͨΒ comment.isEditing Λ൓స

Slide 39

Slide 39 text

Ϗϡʔ ฤूϑϥάͷ஋ʹԠͯ͡ දࣔͤ͞ΔཁૉΛ੾Γସ͑

Slide 40

Slide 40 text

Ϗϡʔ ฤूதͷͱ͖͸Ӆ͢

Slide 41

Slide 41 text

Ϗϡʔ ฤूதͷͱ͖ʹݟͤΔ

Slide 42

Slide 42 text

Ϗϡʔ comment.content ʹ ೖྗ஋Λඥ෇͚Δ

Slide 43

Slide 43 text

ग़ྗ݁Ռ

Slide 44

Slide 44 text

ग़ྗ݁Ռ ΫϦοΫͯ͠ฤूதʹ

Slide 45

Slide 45 text

ग़ྗ݁Ռ ฤू

Slide 46

Slide 46 text

ग़ྗ݁Ռ ΫϦοΫͯ͠ฤूऴྃ

Slide 47

Slide 47 text

͓͓ʙ

Slide 48

Slide 48 text

Step4. ࠶ར༻ͨ͘͠ͳΔ

Slide 49

Slide 49 text

͜ͷ࣌఺Ͱࢥͬͨ͜ͱ νϟοτπʔϧͩͬͨΒ ͜ͷฤूՄೳͳίϝϯτύωϧ ৭Μͳը໘Ͱ࢖͍ͦ͏

Slide 50

Slide 50 text

Ϗϡʔ෦඼ͷ࠶ར༻ • ϏϡʔͷҰ෦ΛʮσΟϨΫςΟϒʯͱͯ͠෦඼Խ • ෳ਺ͷϏϡʔ͔ΒσΟϨΫςΟϒΛ࠶ར༻ • ng-click, ng-show, ng-hide, ng-model ౳΋  AngularJS૊ΈࠐΈͷσΟϨΫςΟϒ • ཁૉΛؙ͝ͱ෦඼Խͨ͠ΓɺཁૉͷػೳΛ֦ு ͢ΔͨΊͷଐੑ͚ͩΛ෦඼Խͨ͠Γ৭ʑͰ͖Δ

Slide 51

Slide 51 text

σΟϨΫςΟϒԽͯ͠ΈΔ ஫ɿjsϑΝΠϧΛ௥Ճͨ͠৔߹͸index.html͔Βϩʔυ͢ΔͷΛ๨Εͳ͍Α͏ʹ

Slide 52

Slide 52 text

σΟϨΫςΟϒԽͯ͠ΈΔ σΟϨΫςΟϒ໊͸ camelCase Ͱ෇͚Δ Ϗϡʔ͔Β͸ kebab-case Ͱ࢖͏

Slide 53

Slide 53 text

σΟϨΫςΟϒԽͯ͠ΈΔ ‘E’ ͸ཁૉʢElementʣ ‘A’ ͸ଐੑʢAttributeʣ ‘EA’ ͱ͔΍Δͱ྆ํͱͯ͠࢖͑Δ

Slide 54

Slide 54 text

σΟϨΫςΟϒԽͯ͠ΈΔ σΟϨΫςΟϒʹHTMLදݱΛ ͍࣋ͨͤͨ৔߹͸ςϯϓϨʔτΛࢦఆͰ͖Δ ʢػೳͷΈͰHTMLදݱΛ࣋ͨͳ͍΋ͷ΋Մʣ

Slide 55

Slide 55 text

σΟϨΫςΟϒԽͯ͠ΈΔ σΟϨΫςΟϒΛ࢖ͬͨཁૉࣗମΛ ςϯϓϨʔτͰஔ͖׵͑Δ৔߹͸ true ʹ

Slide 56

Slide 56 text

σΟϨΫςΟϒԽͯ͠ΈΔ σΟϨΫςΟϒͷ࣋ͭಠࣗείʔϓͱ ར༻ଆͷϏϡʔͷείʔϓͷؔ࿈෇͚ઃఆʢޙड़ʣ

Slide 57

Slide 57 text

σΟϨΫςΟϒͷςϯϓϨʔτ

Slide 58

Slide 58 text

Ϗϡʔ

Slide 59

Slide 59 text

Ϗϡʔ ϏϡʔଆͰ͸ σΟϨΫςΟϒ໊͸ kebab-case

Slide 60

Slide 60 text

Ϗϡʔ σΟϨΫςΟϒείʔϓͷ comment ͱ͍͏Ϟσϧʹ ࣗείʔϓͷ comment ϞσϧΛόΠϯυ

Slide 61

Slide 61 text

ग़ྗ݁Ռ ͪΌΜͱಉ͡Α͏ʹಈ͘Ϗϡʔ͕ग़ͨ

Slide 62

Slide 62 text

…

Slide 63

Slide 63 text

ͪΐͬͱΉ͍ͣ΍Μ͚

Slide 64

Slide 64 text

σΟϨΫςΟϒ͕࠷ॳͷؔ໳ • 2೔໨͙Β͍ͰσΟϨΫςΟϒ࡞Γͨ͘ͳͬͨ • είʔϓͷόΠϯσΟϯά͕Α͘෼͔Βͳ͘ ͯͪΐͬͱۤ͠Μͩ • ͦΕΛ৐Γӽ͑ͨΒָʹ৭ʑͰ͖ΔΑ͏ʹͳ ͬͨ

Slide 65

Slide 65 text

είʔϓͷόΠϯσΟϯά • ‘=‘ ͱ ‘@’ ͱ ‘&’ ͷ3छྨ͕͋Δ • ‘=‘ ͸૒ํ޲όΠϯσΟϯά • ར༻ଆͱϞσϧΛڞ༗ • σΟϨΫςΟϒͰϞσϧΛॻ͖׵͑ͨΒར༻ଆͰ΋มΘΔ • ‘@‘ ͸ར༻ଆ͔Β੩తͳ஋Λͨͩ΋Β͏͚ͩ • ར༻ଆͰ͸ directive=“{{ model }}” Έ͍ͨʹධՁޙͷ஋Λ౉͢ • ‘&’ ͸࠷ॳ͸͋·Γ࢖Θͳ͍ͷͰͦͷ͏ͪάά͍ͬͯͩ͘͞

Slide 66

Slide 66 text

σΟϨΫςΟϒ͸Ԟ͕ਂ͍ • ଞʹ΋৭ʑͰ͖ͯԞ͕ਂ͍ͬΆ͍Ͱ͢ • Ͱ΋ॳาతͳ࢖͍ํ͚ͩͳΒׂΓͱ͙͢׳Ε·͢ • ҎԼͷهࣄ͕ࢀߟʹͳΓ·ͨ͠ • “AngularJSͷDirectiveΛཧղ͢Δ.”  http://qiita.com/Quramy/items/ dd4e7d2693c32d92048c

Slide 67

Slide 67 text

͍ͭͰʹαʔϏεͷઆ໌΋

Slide 68

Slide 68 text

ϩδοΫͷ࠶ར༻ • ϩδοΫΛ࠶ར༻͍ͨ͠৔߹͸ɺσΟϨΫςΟ ϒͰ͸ͳ͘αʔϏεΛ࡞Δ • $scopeͳͲͷ૊ΈࠐΈͷαʔϏεͱಉ͡Α͏ ʹɺίϯτϩʔϥ΍σΟϨΫςΟϒɺଞͷαʔ ϏεͳͲʹ؆୯ʹΠϯδΣΫτՄೳ

Slide 69

Slide 69 text

αʔϏεͷྫʢఆٛଆʣ

Slide 70

Slide 70 text

αʔϏεͷྫʢఆٛଆʣ ୯ҰػೳͷαʔϏεͳΒ ΫϩʔδϟΛ௚઀ return ͯ͠΋OK

Slide 71

Slide 71 text

αʔϏεͷྫʢར༻ଆʣ

Slide 72

Slide 72 text

αʔϏεͷྫʢར༻ଆʣ ૊ΈࠐΈαʔϏεͱಉ͡Α͏ʹ Ҿ਺ʹ౉͚ͩ͢ͰOK

Slide 73

Slide 73 text

αʔϏεͷྫʢར༻ଆʣ ͋ͱ͸ී௨ʹ࢖͏͚ͩ

Slide 74

Slide 74 text

ͬͪ͜͸؆୯ͬΆ͍ʢϗοʣ

Slide 75

Slide 75 text

Step5. ͦͯ͠఻આ΁

Slide 76

Slide 76 text

υΩϡϝϯτಡΈ·͠ΐ͏ • ࠓ͸υΩϡϝϯτ݁ߏॆ࣮ͯͯ҆͠৺Ͱ͢ • ↓ͷ2ͭΛ͋ͨΕ͹͍͍ͩͨ෼͔Γ·͢ • https://docs.angularjs.org/api • https://docs.angularjs.org/guide

Slide 77

Slide 77 text

ग़ల: 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 ֶशίετ͸༻్࣍ୈ

Slide 78

Slide 78 text

ࣗ෼͸ࠓͨͿΜ “Neat!” ͷͱ͜ͳͷͰ͜ΕҎ্͸ ਂ௥͍͠ͳ͍ํ͕ݡ໌ͬΆ͍

Slide 79

Slide 79 text

·ͱΊ • Α͘σΟεΒΕͯΔ͚Ͳɺ୯७ͳΞϓϦͰ࢖ ͏ͳΒΊͬͪΌ؆୯Ͱศར • AngularJS 1.x → Angular2 Ͱ΄΅ผͷϑϨʔ ϜϫʔΫʹͳͬͯΔΒ͍͠ͷͰࠓ͔Β΍Δͳ Β1ܥ͸ແࢹͰ͍͍ͱࢥ͍·͢

Slide 80

Slide 80 text

͓·͚ • Symfony্ͰAngularJSΛಈ͔͍ͨ͠ਓ͸→ • “Symfony2 meets AngularJS”  http://www.slideshare.net/77web/ symfony-33704176 • Ͱ΋΄ͱΜͲͷέʔεͰࠞͥΔͳةݥͳͷͰ Symfonyଆ͸REST APIʹప͢Δ͕٢

Slide 81

Slide 81 text

Thanks ;)