$30 off During Our Annual Pro Sale. View Details »

AngularJSのご紹介

tmaeda
July 27, 2013

 AngularJSのご紹介

tmaeda

July 27, 2013
Tweet

More Decks by tmaeda

Other Decks in Programming

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