AngularJSのご紹介

Transcript

1. "OHVMBS+4ͷ͝঺հ
   4BQQPSPKT!UNBFEB
   

   View Slide

2. !UNBFEB
   w 3VCZͱ͔0$BNMͷਓͰ͢ɻ
   w ࠷ۙԑ͋ͬͯɺ࢓ࣄͰ"OHVMBSΛϲ݄ఔ࢖͍ͬͯ·͢ɻ
   w TBQQPSPKTॳࢀՃͰ͢ɻ
   w ੴా͞Μͷ,OPDLPVUͷ࿩Λฉ͖ͨͯ͘ࢀՃొ࿥ͨ͠Βɺ
   ͳ͔ͥൃදͤ͞ΒΕΔ͜ͱʹͳΓ·ͨ͠ɻॳΊͯͳͷʹɻ
   w +BWBTDSJQUͷ͜ͱ͸ྑ͘஌Γ·ͤΜͷͰɺ͓खॊΒ͔ʹɻ
   

   View Slide

3. ࠓ೔ͷ͓࿩
   w"OHVMBSͷ֓ཁ
   wσϞ
   w"OHVMBSͷಛ௃΍ߏ଄
   wߋʹ͍͔ͭ͘σϞ
   wࣄྫ
   wܽ఺ɺར఺
   

   View Slide

4. "OHVMBS+4ͱ͸
   w(PPHMFͷ.JãLP)FWFSZ͞ΜΛத৺ʹ࡞ΒΕͯ
   ͍Δ.*5-JDFOTFͷ$MJFOUTJEF+BWB4DSJQU
   .7 ͍ΘΏΔ.7$ .77. .71ͳͲͳͲ
   
   'SBNFXPSLɻ
   wʹެ։ɻ
   

   View Slide

5. http://misko.hevery.com/about/
   

   View Slide

6. "OHVMBS͸
   ϑϨʔϜϫʔΫͰ͸ͳ͍ʂ
   )5.-ͷ࠶ઃܭͩοʂ
   

   View Slide

7. "OHVMBS͸
   ϑϨʔϜϫʔΫͰ͸ͳ͍ʂ
   )5.-ͷ࠶ઃܭͩοʂ
   f*[y
   

   View Slide

8. ·ͣ͸σϞΛ
   ͝ཡ௖͖·͠ΐ͏
   

   View Slide

9. ͸͡Ίͯͷ"OHVMBS+4
   
   
   
   
   ͸Ζʔ͋Μ͗ΎΒʔ
   
   
   
   
   Hello {{name}}
   
   
   

   View Slide

10. ͸͡Ίͯͷ"OHVMBS+4
    

    View Slide

11. ͸͡Ίͯͷ"OHVMBS+4
    จࣈΛೖΕΔͱ
    

    View Slide

12. ͸͡Ίͯͷ"OHVMBS+4
    ϦΞϧλΠϜʹ
    දࣔ͞ΕΔʂ
    

    View Slide

13. ͸͡Ίͯͷ"OHVMBS+4
    ߦ΋εΫϦϓτ
    ॻ͍ͯͳ͍ͷ
    ʹʂʂʂ
    

    View Slide

14. ͸͡Ίͯͷ"OHVMBS+4
    
    
    
    
    ͸Ζʔ͋Μ͗ΎΒʔ
    
    
    
    
    Hello {{name}}
    
    
    

    View Slide

15. ͳΜͰʁʁʁ
    

    View Slide

16. ίϯύΠϧޙ
    
    
    ͸Ζʔ͋Μ͗ΎΒʔ
    
    <br/>@charset "UTF-8";<br/>[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-<br/>cloak,.x-ng-cloak{display:none;}<br/>ng\:form{display:block;}<br/>
    
    
    
    Hello ͋Μ͗ΎΒʔ
    
    
    

    View Slide

17. ίϯύΠϧޙ
    

    View Slide

18. ͭ·Γʁ
    

    View Slide

19. $compile
    {{ }}
    $interpolate
    Directive
    ng-app
    ng-model
    ...
    Model
    name
    View
    {{name}}
    
    

    View Slide

20. $compile
    {{ }}
    $interpolate
    Directive
    ng-app
    ng-model
    ...
    Model
    name
    View
    {{name}}
    
    "OHVMBS͸ಠ
    ࣗʹ)5.-λάΛ
    ఆٛ͢Δ࢓૊ΈΛ
    ఏڙ͍ͯ͠Δ
    

    View Slide

21. $compile
    {{ }}
    $interpolate
    Directive
    ng-app
    ng-model
    ...
    Model
    name
    View
    {{name}}
    
    "OHVMBS
    ͸QVSF
    )5.-Λ
    ίϯύΠϧ
    ͯ͠.7Λ
    ࣗಈੜ੒͢
    Δ
    

    View Slide

22. $compile
    {{ }}
    $interpolate
    Directive
    ng-app
    ng-model
    ...
    Model
    name
    View
    {{name}}
    7ͱ.͸૒ํ޲ʹ
    ઀ଓ͞Ε͍ͯΔ
    

    View Slide

23. $compile
    {{ }}
    $interpolate
    Directive
    ng-app
    ng-model
    ...
    Model
    name
    View
    {{name}}
    
    .PEFM͸ͲΜͳσ
    ʔλߏ଄Ͱ΋ྑ͍
    ಛघͳΫϥεΛܧঝ͢
    Δඞཁ͸ͳ͍
    
    

    View Slide

24. $compile
    {{ }}
    $interpolate
    Directive
    ng-app
    ng-model
    ...
    Model
    name
    View
    {{name}}
    
    7JFX͸ςΩετͰ
    ͸ͳ͘ੜ͖ͨΦϒδΣΫ
    τͰ͋Δ
    

    View Slide

25. Α͋͘ΔςϯϓϨʔτΤϯδϯ
    template
    model
    template
    engine
    (෦෼)
    HTML
    Browser
    ඳը݁Ռ
    NPEFMΛมߋ͢ΔͱɺUFNQMBUF
    શମΛඳը͠௚͠
    

    View Slide

26. Browser
    "OHVMBSͷ7JFX
    model
    View
    template
    Angular
    $compile
    ඳը݁Ռ
    NPEFMΛมߋ͢Δͱɺͦͷมߋ
    ʹؔ܎͋Δ෦෼͚ͩॻ͖มΘΔ
    ※͋·Γਖ਼֬ͳֆ͡Όͳ͍Ͱ͢ɺ͢Έ·ͤΜɻ֓೦͚ͩ἞Έऔ͍ͬͯͩ͘͞ɻ
    

    View Slide

27. $compile
    {{ }}
    $interpolate
    Directive
    ng-app
    ng-model
    ...
    Model
    name
    View
    {{name}}
    
    7JFX͸ςΩετͰ
    ͸ͳ͘ੜ͖ͨΦϒδΣΫ
    τͰ͋Δ
    

    View Slide

28. ͸͡Ίͯͷ"OHVMBS+4
    
    
    
    
    ͸Ζʔ͋Μ͗ΎΒʔ
    
    
    
    
    Hello {{name}}
    
    
    

    View Slide

29. ͸͡Ίͯͷ"OHVMBS+4
    
    
    
    
    ͸Ζʔ͋Μ͗ΎΒʔ
    
    
    
    
    Hello {{name}}
    
    
    શ͘ແବͷͳ͘௚
    ײతͳهड़
    

    View Slide

30. ྫ͑͹CBDLCPOFͩͱ
    
    events: {
    "keypress #new-todo": "createOnEnter",
    createOnEnter: function(e) {
    ...
    Todos.create({title: this.input.val()});
    ...
    },
    template:
    controller:
    

    View Slide

31. ྫ͑͹CBDLCPOFͩͱ
    
    events: {
    "keypress #new-todo": "createOnEnter",
    createOnEnter: function(e) {
    ...
    Todos.create({title: this.input.val()});
    ...
    },
    template:
    controller:
    ݁ͼ͚ͭΔͨΊ͚ͩ
    ʹJEఆٛͯ͠
    

    View Slide

32. ྫ͑͹CBDLCPOFͩͱ
    
    events: {
    "keypress #new-todo": "createOnEnter",
    createOnEnter: function(e) {
    ...
    Todos.create({title: this.input.val()});
    ...
    },
    template:
    controller:
    7JFX
    ͔ΒσʔλΛऔΓ
    ग़ͯ͠ɺϞσϧʹೖ
    ΕΔॲཧ΋ࣗ෼Ͱ
    ॻ͍ͯ
    

    View Slide

33. ྫ͑͹CBDLCPOFͩͱ
    
    events: {
    "keypress #new-todo": "createOnEnter",
    createOnEnter: function(e) {
    ...
    Todos.create({title: this.input.val()});
    ...
    },
    template:
    controller:
    ݁ͼ͚ͭΔ
    

    View Slide

34. ͸͡Ίͯͷ"OHVMBS+4
    
    
    
    
    ͸Ζʔ͋Μ͗ΎΒʔ
    
    
    
    
    Hello {{name}}
    
    
    શ͘ແବͷͳ͘௚
    ײతͳهड़
    

    View Slide

35. ϧʔϓͱ͔͸ʁ
    

    View Slide

36. ུ
    <br/>var mainCtrl = function($scope) {<br/>$scope.talkers = [<br/>{"name": "·͑ͩ", "id": "@tmaeda", "title": "AngularJS"},<br/>{"name": "ΓΎ͏ͷ͚͢", "id": "@tricknotes", "title": "How to<br/>relaunch sapporojs.org"},<br/>{"name": "͍ͩ͠", "id": "@iakio", "title": "Getting Started with<br/>Knockout.js"}<br/>];<br/>}<br/>
    
    
    
    
    
    {{talker.name}}: {{talker.id}}: {{talker.title}}
    
    
    
    ུ
    

    View Slide

37. ϑΟϧλͳΜͯ΋
    ͷ΋͋Γ·͢
    

    View Slide

38. ུ
    <br/>var mainCtrl = function($scope) {<br/>$scope.talkers = [<br/>{"name": "·͑ͩ", "id": "@tmaeda", "title": "AngularJS"},<br/>{"name": "ΓΎ͏ͷ͚͢", "id": "@tricknotes", "title": "How to<br/>relaunch sapporojs.org"},<br/>{"name": "͍ͩ͠", "id": "@iakio", "title": "Getting Started with<br/>Knockout.js"}<br/>];<br/>}<br/>
    
    
    
    
    
    
    {{talker.name}}: {{talker.id}}: {{talker.title}}
    
    
    
    ུ
    

    View Slide

39. %%Ͱฒ΂ସ͑
    

    View Slide

40. 
    ུ
    <br/>script><br/><script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-<br/>ui.min.js">
    
    
    <br/>var myApp = angular.module('myApp', ['ui']) ;<br/>var mainCtrl = function($scope) {<br/>$scope.talkers = [<br/>{"name": "·͑ͩ", "id": "@tmaeda", "title": "AngularJS"},<br/>{"name": "ΓΎ͏ͷ͚͢", "id": "@tricknotes", "title": "How to relaunch<br/>sapporojs.org"},<br/>{"name": "͍ͩ͠", "id": "@iakio", "title": "Getting Started with<br/>Knockout.js"}<br/>];<br/>}<br/>
    ུ
    
    
    ฒ΂ସ͑Ͱ͖ΔΑ͏ʹ͠·͢Αɻ
    ͦΕʹΑͬͯɺฒͼมΘΔϞσϧ͸͜ΕͰ͢Αɻ
    ʢશ͘ແବͷͳ͍هड़ʣ
    

    View Slide

41. άϦου
    

    View Slide

42. 
    
    
    <br/>var myApp = angular.module('myApp', ['ngGrid']) ;<br/>var mainCtrl = function($scope) {<br/>$scope.talkers = [<br/>{"name": "·͑ͩ", "id": "@tmaeda", "title": "AngularJS"},<br/>{"name": "ΓΎ͏ͷ͚͢", "id": "@tricknotes", "title": "How to relaunch sapporojs.org"},<br/>{"name": "͍ͩ͠", "id": "@iakio", "title": "Getting Started with Knockout.js"}<br/>];<br/>$scope.gridOptions = { data: 'talkers' };<br/>}<br/>
    
    <br/>.gridStyle {<br/>border: 1px solid rgb(212,212,212);<br/>width: 400px;<br/>height: 300px<br/>}<br/>
    ུ
    
    
    
    
    HSJE0QUJPOTʹैͬͯ
    άϦουΛදࣔͯ͠Ͷ
    શ͘ແବͷͳ͍هड़
    
    ػೳ͕༗Γ͗͢ΔͷͰɺৄࡉ͸ͪ͜Β
    http://angular-ui.github.io/ng-grid/
    

    View Slide

43. "OHVMBS+4ͷߏ੒ཁૉ
    wWJFX
    wDPOUSPMMFS
    wNPEFM
    wTFSWJDF
    wEJSFDUJWF
    wpMUFS
    wશ͘ແବͳهड़ͷͳ͍
    %* JOKFDUPS
    
    wSPVUFS
    wQSPNJTF R
    
    wIUUQSFTPVSDF
    wUFTUJOH
    w
    

    View Slide

44. ࣄྫ
    http://builtwith.angularjs.org/
    

    View Slide

45. ਓؾ
    ถࠃௐࠪػؔGࣾௐ΂
    

    View Slide

46. "OHVMBS+4WT#BDLCPOF+4
    wࣗ෼ͷ#BDLCPOFΞϓϦΛ"OHVMBSͰॻ͖௚ͨ͠
    ΜͩɻίʔυαΠζ͸ߦ͔ΒͲ͜·Ͱݮͬ
    ͨͱࢥ͏ʁߦͩΑɻͦΕ͚ͩ͡Όͳ͘ɺίʔ
    υ͸ͣͬͱ៉ྷʹͳͬͨɻ
    http://stackoverflow.com/questions/6548826/angular-js-
    vs-backbone-js
    

    View Slide

47. "OHVMBS+4ͷܽ఺
    w֓೦Λཧղ͢Δͷʹগʑ೜଱Λཁ͢ΔɻBQQMZ
    
    ͱ͔XBUDI
    ͱ͔EJHFTUϧʔϓͱ͔DPNQJMFͱ͔
    MJOLͱ͔QSPNJTFͱ͔ɻͦΓΌͦʔͰ͢Αɺ
    )5.-ͱϒϥ΢βΛઃܭ͠ͳ͓ͯ͠ΜͰ͔͢Β
    wطଘͷʢ.7$ͷ͜ͱશ͘ߟྀͯ͠ͳ͍
    ϥΠϒϥ
    Ϧ΍ϑϨʔϜϫʔΫ΍ίʔυยͱͷ࿈ܞ͕໘౗
    Θ͟Θ͟EJSFDUJWFΛॻ͔ͳ͍ͱ͍͚ͳ͍৔߹͕
    ଟ͍
    
    

    View Slide

48. "OHVMBS+4ͷར఺
    wϑϨʔϜϫʔΫ͔ΒΫϦʔϯͳίʔυΛॻ͔ͳ͖
    Ό͍͚ͳ͍ѹྗΛड͚Δ ඪ४Ͱ༻ҙ͞Ε͍ͯΔ
    ػೳͰ͸.7ʹ߹Θͳ͍ίʔυ͸جຊతʹॻ͚ͳ
    ͍
    ͷͰɺίʔυ͕៉ྷʹͳΓ΍͍͢ɻ
    w%*΍%JSFDUJWFͳͲͷڧྗͳ෦඼Խػߏͷ͓͔͛
    Ͱ෦඼ͷ࠶ར༻͕͠΍͍͢ɻඇৗʹ୹͍ίʔυͰ
    Ϧονͳػೳ͕࣮ݱͰ͖Δɻࠓޙɺࣗ࡞΍Φʔϓ
    ϯιʔεͷ෦඼ͷࢿ࢈͕ͨ·͍ͬͯ͘ͱͲΜͲΜ
    ָʹͳ͍ͬͯ͘͜ͱ͕ݟࠐ·ΕΔɻ
    

    View Slide

49. ·ͱΊ
    w"OHVMBS+4͸ඇৗʹ؆ܿͳهड़Ͱ.7ͳΞϓϦ
    έʔγϣϯ͕։ൃͰ͖ΔϑϨʔϜϫʔΫͰ͢ɻ
    w%*΍%JSFDUJWFͳͲͷ࢓૊ΈʹΑΓɺ࠶ར༻ੑͷ
    ߴ͍෦඼͕࡞Γ΍͍͢ͷͰɺ࢖͑͹࢖͏ఔָʹͳ
    ͍͖ͬͯ·͢ɻ
    

    View Slide