AngularJSを使ったらこんなことが出来るよ

2013/11/2に行われた週末ランサーズでの発表資料です

Transcript

1. AngularJSΛ࢖ͬͨΒ ͜Μͳ͜ͱ͕ग़དྷΔΑ Saturday, November 2, 13
2. ࣗݾ঺հ w!TBTBUB wͨͭ͞͞ w͔Β͋͛ΤϯδχΞ Saturday, November 2, 13
3. ͔Β͋͛ ඒຯ͍͠ Saturday, November 2, 13
4. Saturday, November 2, 13
5. AngularJSͱ͸ w(PPHMFͰ࡞ΒΕͨϑϨʔϜϫʔΫ w૒ํ޲σʔλόΠϯσΟϯά wςετϑϨϯυϦʔͳઃܭ Saturday, November 2, 13
6. jQuery͡Όବ໨ͳͷʁ Saturday, November 2, 13
7. ௥ՃϘλϯԡͨ͠Βཁૉ௥Ճ͢Δ Saturday, November 2, 13
8. ௥ՃϘλϯԡͨ͠Βཁૉ௥Ճ͢Δ Saturday, November 2, 13
9. ௥ՃϘλϯԡͨ͠Βཁૉ௥Ճ͢Δ Saturday, November 2, 13
10. ௥ՃϘλϯԡͨ͠Βཁૉ௥Ճ͢Δ ର৅ͱͳΔ%0.Λ୳͢ʜ Saturday, November 2, 13
11. ˌʈТʈ űƅŝűƅŝ wʮཁૉ͕̐ͭҎ্ͷͱ͖ʹ͸௥ՃϘλ ϯΛग़͞ͳ͍Α͏ʹͯ͠ʂʯ w࣮૷͚ͨ͠Ͳ˓೔ޙʹ͸ղಡෆೳʹʜ Saturday, November 2, 13
12. wʮཁૉ͕̍ͭʹͳͬͨΒ࡟আϘλϯΛ ग़͞ͳ͍Α͏ʹͯ͠ʂʯ w࣮૷͚ͨ͠Ͳ˓೔ޙʹ͸ղಡෆೳʹʜ ˌʈТʈ űƅŝűƅŝűƅŝ Saturday, November 2, 13
13. εύήοςΟ ίʔυͷ׬੒ Saturday, November 2, 13
14. ˌʈТʈ űƅŝűƅŝűƅŝ
    űƅŝ wʮ͋ΕʔσβΠϯ࿔ͬͨΒಈ͔ͳ͘ ͳͬͨΜ͚ͩͲʁόάͬͯΔΑʁʯ w%0.ͷมߋʹऑ͍ʜ Saturday, November 2, 13
15. ࠓ೔΋ಈ͔ͳ͘ͳͬͨ K2VFSZΛ໧ʑͱमਖ਼ ͢Δ͓࢓ࣄ͕࢝·Δ͓
    ɹŋAТŋʅ ŝžŕ Saturday, November 2, 13
16. Saturday, November 2, 13
17. ͜͜·Ͱͷ·ͱΊ wK2VFSZ͸؆୯ʹԿͰ΋࡞ΕΔ wͨͩɺର৅ͷ%0.Λ୳͢Α͏ͳίʔ υ͕ೖΔͱ%0.ͷมߋʹऑ͍ wίʔυ΋ղಡෆೳʹͳΓ͕ͪʁ Saturday, November 2, 13
18. ͦ͜ͰAngularJSͩʂ Saturday, November 2, 13
19. ྑ͘ࣅͯΔͷ͕͋Δ Saturday, November 2, 13
20. τϨϯυΛݟͯΈΑ͏ GoogleτϨϯυΑΓ Saturday, November 2, 13
21. τϨϯυΛݟͯΈΑ͏ AngularJS Backbone.js Knockout.js GoogleτϨϯυΑΓ Saturday, November 2, 13
22. Hello world Saturday, November 2, 13
23. ଈ࣌൓ө͞ΕΔ Saturday, November 2, 13
24. wϑΥʔϜʹ஋͕ೖྗ͞Ε͞ΕͨΒͦͷ ஋Λऔಘͯ͘͠Δ wIཁૉΛ୳͖ͯͯ͠ɺऔಘͨ͠஋Λ ͦ͜ͷ஋ͱͯ͠ઃఆ͢Δ w*%ͱ͔ͰҰൃͰ୳ͤΕ͹͍͍͚Ͳͦ͏ ͡Όͳ͔ͬͨΒ%0.Λḷ͍ͬͯ͘ jQueryͷ৔߹ Saturday, November 2, 13
25. wԿ΋͠ͳ͍ wΤϯδχΞ͡Όͳͯ͘΋͍͚Δ AngularJSͷ৔߹ Saturday, November 2, 13
26. Hello world ଈ Saturday, November 2, 13
27. Hello world ଈ Saturday, November 2, 13
28. Hello world มߋ͞Εͨͧʔ ଈ Saturday, November 2, 13
29. Hello world มߋ͞Εͨͧʔ ଈ Saturday, November 2, 13
30. Hello world มߋ͞Εͨͧʔ ଈ ଈ࣌൓ө Saturday, November 2, 13
31. AngularJSͷಛ௃ wDPOUSPMMFS
    ͰείʔϓΛ੍ݶ wOHSFQFBU
    ͕ศར wEJSFDUJWF
    ͰৼΔ෣͍Λఆٛ wίʔυͷݟ௨͕͠ྑ͍ Saturday, November 2, 13
32. AngularJSͷಛ௃ wDPOUSPMMFS
    ͰείʔϓΛ੍ݶ wOHSFQFBU
    ͕ศར wEJSFDUJWF
    ͰৼΔ෣͍Λఆٛ wίʔυͷݟ௨͕͠ྑ͍ Saturday, November 2, 13
33. Controllerͱ͸ wϞσϧͷॳظ஋Λઃఆ͢Δ wΫϦοΫ࣌ͱ͔ͷৼΔ෣͍Λઃఆ͢Δ Saturday, November 2, 13
34. script.js Saturday, November 2, 13
35. script.js Saturday, November 2, 13
36. script.js 5FTU$USM͕ѻ͏είʔϓ Saturday, November 2, 13
37. script.js 5FTU$USM͕ѻ͏είʔϓ Saturday, November 2, 13
38. script.js 5FTU$USM͕ѻ͏είʔϓ Saturday, November 2, 13
39. script.js Saturday, November 2, 13
40. script.js Saturday, November 2, 13
41. script.js ΫϦοΫ࣌ͷৼΔ෣͍ Saturday, November 2, 13
42. script.js ΫϦοΫ࣌ͷৼΔ෣͍ Saturday, November 2, 13
43. AngularJSͷಛ௃ w$POUSPMMFS
    ͰείʔϓΛ੍ݶ wOHSFQFBU
    ͕ศར wEJSFDUJWF
    ͰৼΔ෣͍Λఆٛ wίʔυͷݟ௨͕͠ྑ͍ Saturday, November 2, 13
44. ng-repeatͱ͸ w܁Γฦ͠ॲཧΛߦ͏΋ͷ wJOEFY
    pSTU
    MBTU
    ͕ศར wpMUFS
    MJOLZ
    PSEFS#Z
    FUD
    ΋ ࢖͑Δ Saturday, November 2, 13
45. script.js Saturday, November 2, 13
46. script.js Saturday, November 2, 13
47. ݱࡏͷϧʔϓͷΠϯσοΫε script.js Saturday, November 2, 13
48. Saturday, November 2, 13
49. Saturday, November 2, 13
50. ࠷ॳͷཁૉͰͳ͚Ε͹ දࣔ͢Δ Saturday, November 2, 13
51. RailsͰ࢖͏ͱ͖ͱ͔ Saturday, November 2, 13
52. RailsͰ࢖͏ͱ͖ͱ͔ Saturday, November 2, 13
53. 3BJMTͷσʔλΛKTPOʹͯ͠ "OHVMBS+4ͷॳظ஋ʹ͢Δ RailsͰ࢖͏ͱ͖ͱ͔ Saturday, November 2, 13
54. AngularJSͷಛ௃ w$POUSPMMFS
    ͰείʔϓΛ੍ݶ wOHSFQFBU
    ͕ศར wEJSFDUJWF
    ͰৼΔ෣͍Λఆٛ wίʔυͷݟ௨͕͠ྑ͍ Saturday, November 2, 13
55. directiveͱ͸ w೚ҙͷཁૉ໊ɺଐੑΛ࡞੒ͯ͠ৼΔ෣ ͍ΛఆٛͰ͖Δ wOHDMJDL
    ΍
    OHSFQFBU
    ΋͜ΕͰఆ ٛ͞ΕͯΔ <input type=”text” value=”” class=”row”> Saturday, November 2, 13
56. script.js Saturday, November 2, 13
57. Saturday, November 2, 13
58. AngularJSͷಛ௃ w$POUSPMMFS
    ͰείʔϓΛ੍ݶ wOHSFQFBU
    ͕ศར wEJSFDUJWF
    ͰৼΔ෣͍Λఆٛ wίʔυͷݟ௨͕͠ྑ͍ Saturday, November 2, 13
59. ݟ௨͕͠ྑ͍ wϞσϧΛมߋ͢Ε͹Ϗϡʔ͸ࣗಈతʹ ൓ө͞ΕΔ͔ΒϞσϧͷૢ࡞͚ͩ wཁૉͷ௥Ճ࡟আɺPOPGGɺFUD wίʔυྔ΋ݮͬͯɺόά΋ݮΔʂ Saturday, November 2, 13
60. ·ͱΊ wK2VFSZͰॻ͘ͱӡ༻࣌ʹେมͦ͏ͳ ͱ͜Ζʹಋೖ͢Δͱྑ͍ͱࢥ͏ wίʔυྔ΋ݮΔ͠ɺݟ௨͕͠ྑ͍ wOHSFQFBU
    ͕ͱͯ΋ศར w໰୊͸ॳظ஋Ͱɺࠓ͸
    OHJOJU
    ࢖ͬͯ Δ͚Ͳྑ͍΍Γํ͕͋Ε͹஌Γ͍ͨ Saturday, November 2, 13
61. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ˏsasata299 Saturday, November 2, 13