Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AngularJS 20min #ng_jp

Naoya Ito
December 03, 2013

AngularJS 20min #ng_jp

Naoya Ito

December 03, 2013
Tweet

More Decks by Naoya Ito

Other Decks in Technology

Transcript

  1. "OHVMBS+4NJO
    !OBPZB@JUP

    View full-size slide

  2. ੺Ϛϧٸ্ঢ

    View full-size slide

  3. (JUIVCˑ
    •  "OHVMBS+4
    •  #BDLCPOFKT
    •  FNCFSKT
    •  LOPDLPVU

    View full-size slide

  4. σϞ
    •  IUUQNITJNCMPHIBDLFSTOFU

    View full-size slide

  5. .78
    •  +BWB4DSJQU.78'SBNFXPSL
    •  .PEFM7JFX8IBUFWFS
    – ࠷ॳ͸.7$͚ͩͬͨͲ.77.Ά͘ͳͬͨ
    – TDPQF͸7JFX.PEFMͬΆ͍
    – Ͱ΋.7ͷٞ࿦͸࣌ؒͷແବ
    source:  https://plus.google.com/+AngularJS/posts/aZNVhj355G2

    View full-size slide

  6. "Angular  gives  you  a  lot  of  flexibility  to  nicely  separate  
    presenta7on  logic  from  business  logic  and  presenta7on  
    state.  Please  use  it  fuel  your  produc7vity  and  applica7on  
    maintainability  rather  than  heated  discussions  about  
    things  that  at  the  end  of  the  day  don't  ma>er  that  much."    

    View full-size slide

  7. "OHVMBS+4ͷجຊ

    View full-size slide

  8. ݸਓతʹউखʹࢥͬͨ
    ಛ௃
    •  )5.-ͦͷ΋͕ςϯϓϨʔτ
    •  ૒ํ޲σʔλόΠϯσΟϯά
    %FQFOEFODZ*OKFDUJPO΍
    ͦͷଞʹ΋৭ʑ͋Δ͚Ͳେ͖
    ͘͸͜ͷͭ

    View full-size slide

  9.  
     
         
           1.2.3/angular.min.js">  
             
         
         
             
                 
                     
                         
                       {{item.title}}  
                     
                 
               {{items  |  json}}  
             
         
     
    )5.-ͦͷ΋ͷ͕ςϯϓϨʔτ

    View full-size slide

  10. //  app.js  
    var  itemsCtrl  =  function  ($scope)  {  
       $scope.items  =  [  
           {  title:  "Pick  up  the  milk",  done:false  },  
           {  title:  "Return  books  to  the  library",  done:true  },  
           {  title:  "Buy  birthday  gift  for  Bob",  done:false  }  
       ];  
    };  
     
    ର͢ΔΞϓϦέʔγϣϯ
    TDPQF͕)5.-ͱΞϓϦ
    έʔγϣϯͷڮ౉͠Λ͢Δ

    View full-size slide

  11.  
         
             
                 
               {{item.title}}  
             
         
     
    var  itemsCtrl  =  function  ($scope)  {  
       $scope.items  =  [  
           {  title:  "Pick  up  the  milk",  done:false  },  
           {  title:  "Return  books  to  the  library",  done:true  },  
           {  title:  "Buy  birthday  gift  for  Bob",  done:false  }  
       ];  
    };  
     
    ͜ͷϒϩοΫ͸͜ͷؔ਺͕ίϯτ
    ϩʔϧ͠·͢Α

    View full-size slide

  12.  
         
             
                 
               {{item.title}}  
             
         
     
    var  itemsCtrl  =  function  ($scope)  {  
       $scope.items  =  [  
           {  title:  "Pick  up  the  milk",  done:false  },  
           {  title:  "Return  books  to  the  library",  done:true  },  
           {  title:  "Buy  birthday  gift  for  Bob",  done:false  }  
       ];  
    };  
     
    JUFNTͱTDPQFJUFNT ٴͼத਎ͷJUFN
    ΛόΠϯσΟϯά͠·͢Α

    View full-size slide

  13. ૒ํ޲όΠϯσΟϯά
    •  )5.-ͷϑΥʔϜͷ஋Λม͑Δͱ
    TDPQFͷΦϒδΣΫτͷ஋͕มΘΔ
    •  TDPQFͷΦϒδΣΫτͷ஋Λม͑Δͱ
    )5.-ଆͷද͕ࣔมΘΔ
    ͔͠΋ϦΞϧλΠϜʹɻ
    TDPQFॏཁ

    View full-size slide

  14. యܕతͳ૒ํ޲όΠϯσΟϯάͷྫ
     
    Hello  {{name}}  
    ϑΥʔϜʹೖΕͨจࣈ͕
    )5.-ʹϦΞϧλΠϜʹ
    ඳը͞ΕΔ

    View full-size slide

  15. ͭͷಛ௃ʹΑͬͯŋŋŋ
    •  ΞϓϦ +4
    ଆ͸%0.ͷߏ଄Λ஌Βͳ͍
    – ʹ΋ؔΘΒͣɺ%0.ͱσʔλ͕૬ޓʹ؂ࢹ
    var  itemsCtrl  =  function  ($scope)  {  
       $scope.items  =  [  
           {  title:  "Pick  up  the  milk",  done:false  },  
           {  title:  "Return  books  to  the  library",  done:true  },  
           {  title:  "Buy  birthday  gift  for  Bob",  done:false  }  
       ];  
    };  
     
    Ͳ͜ʹ΋%0.ؔ࿈ͷ஋͕ͳ͍

    View full-size slide

  16. ૝૾ͯ͠ΈΑ͏
    •  K2VFSZ΍#BDLCPOFKT
    – ΞϓϦଆ͕%0.ߏ଄Λ஌͍ͬͯΔ
    var  hiddenBox  =  $("#banner-­‐message");  
    $("#button-­‐container  button").on("click",  function  ()  {  
       hiddenBox.show();  
    });  

    View full-size slide

  17. )5.-͔ΒΞϓϦΛ௫Έʹ͍͘
     
         
             
                 
               {{item.title}}  
             
         
     
    ʮ"OHVMBS+4͸ϑϨʔϜϫʔΫ
    Ͱ͸ͳ͍ɺ)5.-ͷ࠶ઃܭͩʯ
    ͳͲͱ΋
    https://speakerdeck.com/tmaedax/angularjsfalsegoshao-­‐jie  

    View full-size slide

  18. )5.-ߏ଄ͷมߋʹڧ͍
    •  )5.-ͦͷ΋ͷ͕ςϯϓϨʔτ
    – ཁ͢Δʹɺ5FNQMBUF5PPMLJUͱ͔&3#ͱ
    ͔Έ͍ͨͳ΋ͷ
    – ΞϓϦଆΛ஌Βͳͯ͘΋%0.ͷߏ଄Λมߋ
    Ͱ͖Δ
    •  )5.-มߋͰʮ஌Βͣ஌Βͣͷ͏ͪʹΞϓϦଆͰ
    Πϕϯτ؂ࢹͰ͖ͳ͘ͳͬͯͨʯ͕গͳ͍

    View full-size slide

  19. ΞϓϦଆ͔Βݟͨ໨Λಈతʹม͑
    ͍ͨͱ͖͸
    •  ౴͑
    – ۃྗOH4IPX΍OH$MBTT࢖ͬͯ)5.-
    $44ଆͰɻϩδοΫͰ%0.ͷߏங͸͠ͳ͍
    //  ngClass:  オブジェクトの値で  class  を切り替え  
     
     
    //  ngShow:  オブジェクトの値で要素の表示/非表示  
    required    

    View full-size slide

  20. )5.-͔ΒϩδοΫΛىಈ͍ͨ͠
     
         
         
     
    var  itemsCtrl  =  function  ($scope)  {  
       $scope.items  =  [  
           ...  
       ];  
     
       $scope.addItem  =  function  ()  {  
           $scope.items.push({  title:  $scope.item.title,  done:false  });  
       };  
    };  
     
    TDPQFJUFNTͷมߋ
    ͸ଈ࠲ʹόΠϯυͯ͠Δ
    )5.-ʹ൓ө͞ΕΔ

    View full-size slide

  21. ;Γ͔͑Γ
    "OHVMBS+4Ͱͷ։ൃͷྲྀΕ

    View full-size slide

  22. "OHVMBS+4Ͱͷ։ൃͷྲྀΕ
     )5.-ʹ"OHVMBSͰόΠϯυ͢΂͖Π
    ϕϯτΛهड़
     "OHVMBSͷ$POUSPMMFSͰΠϕϯτΛ
    ड͚औΔ
     7JFX΍Ϟσϧͷมߋͳ͍͠αʔόʔͱ
    ͷ௨৴ΛϏδωεϩδοΫͱ࣮ͯ͠૷
      σʔλόΠϯσΟϯάΛى఺ʹ
    7JFX
    Λߋ৽͢Δ
    参考:  h$p://pochi.hatenablog.jp/entry/2013/11/13/002504

    View full-size slide

  23. )5.-ʹ"OHVMBSͰόΠϯ
    υ͢΂͖ΠϕϯτΛهड़
     
         
         
     

    View full-size slide

  24. $POUSPMMFSͰΠϕϯτΛड͚
    औΔ
    var  itemsCtrl  =  function  ($scope)  {  
       $scope.items  =  [  
           ...  
       ];  
     
       $scope.addItem  =  function  ()  {  
           $scope.items.push({  title:  $scope.item.title,  done:false  });  
       };  
    };  
     

    View full-size slide

  25. ϞσϧͷมߋΛϏδωεϩδο
    Ϋͱ࣮ͯ͠૷
    var  itemsCtrl  =  function  ($scope)  {  
       $scope.items  =  [  
           ...  
       ];  
     
       $scope.addItem  =  function  ()  {  
           $scope.items.push({  title:  $scope.item.title,  done:false  });  
       };  
    };  
     

    View full-size slide

  26. σʔλόΠϯσΟϯάΛى఺ʹ
    7JFXΛߋ৽͢Δ
         
             
                 
               {{item.title}}  
             
         
    ଟ͘ͷ৔߹૒ํ޲σʔλ
    όΠϯσΟϯάͰ΄ͬͱ
    ͍ͯ΋ߋ৽͞ΕΔ

    View full-size slide

  27. "OHVMBS+4ͷʮ੍໿ʯ
    •  ੍໿ʹΑͬͯίʔυ͕៉ྷʹอͨΕΔ
    – )5.-ʹϩδοΫ͸ॻ͚ͳ͍
    – ϩδοΫଆ͔Β೚ҙͷ%0.Λૢ࡞͠ʹ͍͚
    ͳ͍
    – ίϯτϩʔϥͷ੹຿ൣғ͸ಛఆͷ)5.-ϒ
    ϩοΫʹݶఆ͞ΕΔ
    – ૒ํ޲σʔλόΠϯσΟϯάʹΑΓ%0.ͱ
    σʔλͷؒͷॲཧ͸"OHVMBS+4಺ʹӅṭ͞
    ΕΔ

    View full-size slide

  28. ίπ
    •  ৗʹTDPQFͰอ͍࣋ͯ͠ΔσʔλΛத
    ৺ʹߟ͑Δ
    – ʮೖྗ͕TDPQFʹ౉ͬͯɺͦΕ͕τϦΨʹ
    ͳͬͯݟͨ໨͕มΘΔŋŋŋʯ
    – ࣗવʹॻ͚ͳ͍৔߹ɺTDPQFͷ"1*͕࢖
    ͑ͳ͍͔ݕ౼͢Δ
    •  XBUDI XBUDI$PMMFDUJPOͱ͔

    View full-size slide

  29. "OHVMBS+4ͷػೳ
    ͍͔ͭ͘ൈਮ

    View full-size slide

  30. ϦϞʔτͷ+40/σʔλ΋όΠϯυ
    •  OH3FTPVSDF
           angular.min.js">  
           resource.js">  
       ...  
         
             
               ...  
     
    angular.module('Todos',  ['ngResource']);  
     
    var  itemsCtrl  =  function  ($scope,  $resource)  {  
       var  items  =  $resource('/api/items');  
       $scope.items  =  items.get();  
    };   )551ϦΫΤετͷ׬ྃ
    ௨஌ͦͷ΄͔͸TDPQF
    ೚ͤ

    View full-size slide

  31. ͪͳΈʹαʔόʔαΠυ
    require  'sinatra'  
    require  'sinatra/reloader'  
    require  'sinatra/json'  
     
    get  '/'  do  
       erb  :index  
    end  
     
    get  '/api/items'  do  
       json  :data  =>  [  
           {  :title  =>  'Pick  up  the  milk',  :done  =>  false  },  
           {  :title  =>  'Return  books  to  the  library',  :done  =>  true  },  
           {  :title  =>  'Buy  birthday  gift  for  Bob',  :done  =>  false  },  
       ]  
    end  
     

    View full-size slide

  32. "OHVMBS+4ͱ͍͑͹ϑΟϧλ
     
         
         
             
                 
               {{item.title}}  
             
         
     
    OHNPEFMͰόΠϯυ͠
    ͨϞσϧͰOHSFQFBUͷ
    ϧʔϓग़ྗΛϑΟϧλ
    ΍ͬͨʔɺΠϯΫϦϝϯλ
    ϧݕࡧͰ͖ͨΑʔ

    View full-size slide

  33. 'PSN7BMJEBUJPO
     
         
         
       required  
     

    View full-size slide

  34. %JSFDUJWFT
    •  OHCJOE΍OHNPEFMͷΑ͏ͳ)5.-
    ֦ுΛࣗΒఆٛ͢Δػೳ
    •  ෳࡶͳ%0.ߏஙɺ܁Γฦ͠ग़ͯ͘Δ
    7JFXͷίʔυΛ·ͱΊ͍ͨ࣌ͳͲ
    •  ;ɺෳࡶͳͷͰলུ͠·͢ ਒͑੠

    ޙ೔௥ه͜ͷൃදͰ͸౰ํͷཧղෆ଍΋͋Γ%JSFDUJWFTʹ͍ͭͯͷղઆ͸
    লུ͠·͕ͨ͠ɺͦͷޙͷಉษڧձͰͷൃදΛഈௌ͢Δʹɺ%JSFDUJWFTͦ͜
    ͕"OHVMBS+4ͷਅࠎ௖Ͱ͋Δͱ͍͏ҹ৅΋ड͚·ͨ͠ɻ

    View full-size slide

  35. ࠶ར༻ՄೳͳϞσϧʹ
    var  service  =  angular.module("itemService",  ["ngResource"]);  
    service.factory("Item",  function($resource)  {  
       return  $resource(  
           "/api/items/:Id",  
           {  Id:  "@Id"  },  
           {  "update"  :  {  method:  "PUT"  }  }  
       );  
    });  
     
    var  app  =  angular.module('Todos',  ['itemService']);  
     
    var  itemsCtrl  =  app.controller('itemsCtrl',  function  ($scope,  Item)  {  
       $scope.items  =  Item.query();  
    });  
     
    itemsCtrl.$inject  =  ['$scope',  'itemService'];  
     
    //  例:  update処理
    var  item  =  Item.get({},  {'Id':  1});  
    item.title  =  "Return  DVDs  to  the  library";  
    item.$update();  
    %FQFOEFODZ
    *OKFDUJPO

    View full-size slide

  36. 6OJU5FTUX+BTNJOF
    describe('Todos  controllers',  function()  {  
       describe('itemsCtrl',  function(){  
           it('should  create  "items"  model  with  3  items',  function()  {  
               var  scope  =  {},  
                       ctrl  =  new  itemsCtrl(scope);  
               expect(scope.items.length).toBe(3);  
           });  
       });  
    });  
    %*ʹΑΓίϯτϩʔ
    ϥͷςετ͕͠΍͍͢ɻ
    ςετͷ࣮ߦ͸
    LBSNBͰ
    &&ςετͷ࢓૊Έ΋͋ΔΑɻ
    ˞͓Ε͸$BTQFS+4ਪ͚ͩ͠Ͳͳ

    View full-size slide

  37. "OHVMBS+4ࡶײ

    View full-size slide

  38. ͜Ε͸͓֮͑ͯ͜͏"OHVMBS+4
    •  "OHVMBS+4ͷ%*ͷ࢓૊Έ
    – $scope,  $route,  $resource  ...  
    – ʮԿ͔ԾҾ਺ͷ$scope  Λs  ͱ͔ʹॻ͖׵
    ͑ͯ΋૝ఆ௨ΓʹͳΒͳ͍ΜͰ͚͢Ͳʂʯ  
    – ͦΕ͸"OHVMBS͕GVODUJPO
    ఆٛΛจࣈ
    ྻͱͯ͠ѻͬͯਖ਼نදݱͰൈ͍ͨԾҾ਺จࣈ
    ྻ͔Βಈ࡞Λܾఆ͍ͯ͠Δ͔Βͩ
    ͳΜ͔Ҿ਺བྷΈͰมͳ
    ಈ͖͢Δͳʔͱࢥͬͨ
    Βࢥ͍ͩͦ͏

    View full-size slide

  39. "OHVMBS+4ͷಘҙɾෆಘҙ
    •  ಘҙ
    – σϞͰΈͨΑ͏ͳϖʔδΞϓϦέʔγϣϯ
    – +40/αʔό͕ޙΖʹ߇͑ͨ$36%ΞϓϦ
    έʔγϣϯ
    •  ෆಘҙ
    – άϥϑΟοΫ͙Γ͙Γܥ
    – %0.ߏ଄Λಈతʹॻ͖׵͑·͘Δܥ
    – ήʔϜ

    View full-size slide

  40. "OHVMBS+4ͷҹ৅
    •  ܰ͘ಈ͔͢·Ͱ͸؆୯
    –  ࣗ෼͸ଞ'8ΑΓ͙͢ಈ͍ͨ͠ཧղͰ͖ͨ
    –  ؆୯ͳ΋ͷΛ࡞Δͷʹ͸ͱͯ΋ڧྗ
    •  ຊ֨తʹ࢖͓͏ͱ͢Δͱŋŋŋ
    –  ଞͷ'8ʹൺֱֶͯ͠शίετ͕΍΍ߴ͍
    –  ΋΍΋΍͕ग़ͯ͘Δ
    –  (SVOUͱ͔:FPNBOͱ͔ͷपลπʔϧͷ஌ࣝ΋ඞཁʹ
    ͳͬͯ͘Δ

    •  ڧ੍͍໿ͱগͳ͍ίʔυྔ͕ɺෳ਺ਓ਺Ͱͷ։ൃʹ͸
    Ή͠Ζ޲͍͍ͯΔͷͰ͸ͳ͍͔
    –  ֶशίετɺपลπʔϧͷಋೖίετ͕ΫϦΞͰ͖Δ͔

    View full-size slide

  41. "OHVMBS+4΋΍΋΍ྫ
    •  )5.-ʹOHNPEFMͱ͔ॻ͍ͯΔ͔Β
    %0.มߋʹڧ͍ͬͯݴ͏͚Ͳɺੲ
    PODMJDLͱ͔ॻ͘ͳͬͯ࿩ͩͬͨ͡Ό
    Μ
    •  υϝΠϯϞσϧΛهड़͢ΔϕετϓϥΫςΟ
    ε͕Α͘Θ͔ΒΜ
    –  TDPQF௚ TFSWJDFGBDUPSZ
    NPEVMFWBMVF
    –  ͳΜͱͳ͘ɺແཧʹந৅Խͤͣബ͍··࢖͑ͱ͍
    ͏งғؾ͸ײ͡Δ͚Ͳŋŋŋ

    View full-size slide

  42. ·ͱΊ
    •  "OHVMBS+4ʹ஫໨͕ू·Δ
    •  )5.-֦ுͱ૒ํ޲σʔλόΠϯσΟϯά
    •  )5.-ͷมߋʹڧ͍
    •  %*ςελϏϦςΟͳͲΑΓߴ౓ͳίϯη
    ϓτ΋
    •  ϕετϓϥΫςΟεͷूੵɾڞ༗͕଴ͨΕΔ
    –  ˞ެࣜυΩϡϝϯτॆ࣮͖ͯͯ͠·͢
    •  ࣗ෼͸͠͹Β͘"OHVMBS+4Ͱ͍͜͏͔ͳʔ
    ͱࢥ͍ͬͯ·͢

    View full-size slide