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

AngularJS 20min #ng_jp

B4afc7d853d7f1cb6a253d3c7183c05a?s=47 Naoya Ito
December 03, 2013

AngularJS 20min #ng_jp

B4afc7d853d7f1cb6a253d3c7183c05a?s=128

Naoya Ito

December 03, 2013
Tweet

Transcript

  1. "OHVMBS+4NJO !OBPZB@JUP

  2. "OHVMBS+4

  3. ੺Ϛϧٸ্ঢ

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

    •  LOPDLPVU 
  5. σϞ •  IUUQNITJNCMPHIBDLFSTOFU

  6. .78 •  +BWB4DSJQU.78'SBNFXPSL •  .PEFM7JFX8IBUFWFS – ࠷ॳ͸.7$͚ͩͬͨͲ.77.Ά͘ͳͬͨ – TDPQF͸7JFX.PEFMͬΆ͍ – Ͱ΋.7 ͷٞ࿦͸࣌ؒͷແବ source:

     https://plus.google.com/+AngularJS/posts/aZNVhj355G2
  7. "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."    
  8. "OHVMBS+4ͷجຊ

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

  10. None
  11. <!doctype  html>   <html  ng-­‐app>      <head>    

         <script  src="https://ajax.googleapis.com/ajax/libs/angularjs/ 1.2.3/angular.min.js"></script>          <script  src="app.js"></script>      </head>      <body>          <section  ng-­‐controller="itemsCtrl">              <ul>                  <li  ng-­‐repeat="item  in  items">                      <input  type="checkbox"  ng-­‐model="item.done">                      <span>{{item.title}}</span>                  </li>              </ul>              <pre>{{items  |  json}}</pre>          </section>      </body>   </html>   )5.-ͦͷ΋ͷ͕ςϯϓϨʔτ
  12. //  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.-ͱΞϓϦ έʔγϣϯͷڮ౉͠Λ͢Δ
  13. <section  ng-­‐controller="itemsCtrl">      <ul>          <li

     ng-­‐repeat="item  in  items">              <input  type="checkbox"  ng-­‐model="item.done">              <span>{{item.title}}</span>          </li>      </ul>   </section>   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  }      ];   };     ͜ͷϒϩοΫ͸͜ͷؔ਺͕ίϯτ ϩʔϧ͠·͢Α
  14. <section  ng-­‐controller="itemsCtrl">      <ul>          <li

     ng-­‐repeat="item  in  items">              <input  type="checkbox"  ng-­‐model="item.done">              <span>{{item.title}}</span>          </li>      </ul>   </section>   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 ΛόΠϯσΟϯά͠·͢Α
  15. ૒ํ޲όΠϯσΟϯά •  )5.-ͷϑΥʔϜͷ஋Λม͑Δͱ TDPQFͷΦϒδΣΫτͷ஋͕มΘΔ •  TDPQFͷΦϒδΣΫτͷ஋Λม͑Δͱ )5.-ଆͷද͕ࣔมΘΔ ͔͠΋ϦΞϧλΠϜʹɻ TDPQFॏཁ

  16. యܕతͳ૒ํ޲όΠϯσΟϯάͷྫ <input  type="text"  ng-­‐model="name">   <p>Hello  {{name}}</p>   ϑΥʔϜʹೖΕͨจࣈ͕ )5.-ʹϦΞϧλΠϜʹ

    ඳը͞ΕΔ
  17. ͭͷಛ௃ʹΑͬͯŋŋŋ •  ΞϓϦ +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.ؔ࿈ͷ஋͕ͳ͍
  18. ૝૾ͯ͠ΈΑ͏ •  K2VFSZ΍#BDLCPOFKT – ΞϓϦଆ͕%0.ߏ଄Λ஌͍ͬͯΔ var  hiddenBox  =  $("#banner-­‐message");   $("#button-­‐container

     button").on("click",  function  ()  {      hiddenBox.show();   });  
  19. )5.-͔ΒΞϓϦΛ௫Έʹ͍͘ <section  ng-­‐controller="itemsCtrl">      <ul>        

     <li  ng-­‐repeat="item  in  items">              <input  type="checkbox"  ng-­‐model="item.done">              <span>{{item.title}}</span>          </li>      </ul>   </section>   ʮ"OHVMBS+4͸ϑϨʔϜϫʔΫ Ͱ͸ͳ͍ɺ)5.-ͷ࠶ઃܭͩʯ ͳͲͱ΋ https://speakerdeck.com/tmaedax/angularjsfalsegoshao-­‐jie  
  20. )5.-ߏ଄ͷมߋʹڧ͍ •  )5.-ͦͷ΋ͷ͕ςϯϓϨʔτ – ཁ͢Δʹɺ5FNQMBUF5PPMLJUͱ͔&3#ͱ ͔Έ͍ͨͳ΋ͷ – ΞϓϦଆΛ஌Βͳͯ͘΋%0.ͷߏ଄Λมߋ Ͱ͖Δ •  )5.-มߋͰʮ஌Βͣ஌Βͣͷ͏ͪʹΞϓϦଆͰ Πϕϯτ؂ࢹͰ͖ͳ͘ͳͬͯͨʯ͕গͳ͍

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

     class  を切り替え   <span  ng-­‐class="{'check-­‐true':item.done,  'check-­‐false':item.done}">     //  ngShow:  オブジェクトの値で要素の表示/非表示   <span  ng-­‐show="myForm.title.$error.required">required</span>    
  22. )5.-͔ΒϩδοΫΛىಈ͍ͨ͠ <form  ng-­‐submit="addItem()">      <input  type="text"  ng-­‐model="item.title"  />  

       <input  type="submit"  value="add"  />   </form>   var  itemsCtrl  =  function  ($scope)  {      $scope.items  =  [          ...      ];        $scope.addItem  =  function  ()  {          $scope.items.push({  title:  $scope.item.title,  done:false  });      };   };     TDPQFJUFNTͷมߋ ͸ଈ࠲ʹόΠϯυͯ͠Δ )5.-ʹ൓ө͞ΕΔ
  23. ;Γ͔͑Γ "OHVMBS+4Ͱͷ։ൃͷྲྀΕ

  24. "OHVMBS+4Ͱͷ։ൃͷྲྀΕ  )5.-ʹ"OHVMBSͰόΠϯυ͢΂͖Π ϕϯτΛهड़  "OHVMBSͷ$POUSPMMFSͰΠϕϯτΛ ड͚औΔ  7JFX΍Ϟσϧͷมߋͳ͍͠αʔόʔͱ ͷ௨৴ΛϏδωεϩδοΫͱ࣮ͯ͠૷   σʔλόΠϯσΟϯάΛى఺ʹ 7JFX

    Λߋ৽͢Δ 参考:  h$p://pochi.hatenablog.jp/entry/2013/11/13/002504
  25. )5.-ʹ"OHVMBSͰόΠϯ υ͢΂͖ΠϕϯτΛهड़ <form  ng-­‐submit="addItem()">      <input  type="text"  ng-­‐model="item.title"  />

         <input  type="submit"  value="add"  />   </form>  
  26. $POUSPMMFSͰΠϕϯτΛड͚ औΔ var  itemsCtrl  =  function  ($scope)  {    

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

     $scope.items  =  [          ...      ];        $scope.addItem  =  function  ()  {          $scope.items.push({  title:  $scope.item.title,  done:false  });      };   };    
  28. σʔλόΠϯσΟϯάΛى఺ʹ 7JFXΛߋ৽͢Δ    <ul>          <li  ng-­‐repeat="item

     in  items">              <input  type="checkbox"  ng-­‐model="item.done">              <span>{{item.title}}</span>          </li>      </ul>   ଟ͘ͷ৔߹૒ํ޲σʔλ όΠϯσΟϯάͰ΄ͬͱ ͍ͯ΋ߋ৽͞ΕΔ
  29. "OHVMBS+4ͷʮ੍໿ʯ •  ੍໿ʹΑͬͯίʔυ͕៉ྷʹอͨΕΔ – )5.-ʹϩδοΫ͸ॻ͚ͳ͍ – ϩδοΫଆ͔Β೚ҙͷ%0.Λૢ࡞͠ʹ͍͚ ͳ͍ – ίϯτϩʔϥͷ੹຿ൣғ͸ಛఆͷ)5.-ϒ ϩοΫʹݶఆ͞ΕΔ – ૒ํ޲σʔλόΠϯσΟϯάʹΑΓ%0.ͱ σʔλͷؒͷॲཧ͸"OHVMBS+4಺ʹӅṭ͞

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

    XBUDI$PMMFDUJPOͱ͔
  31. "OHVMBS+4ͷػೳ ͍͔ͭ͘ൈਮ 

  32. ϦϞʔτͷ+40/σʔλ΋όΠϯυ •  OH3FTPVSDF        <script  src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/ angular.min.js"></script>  

           <script  src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular-­‐ resource.js"></script>      ...      <body  ng-­‐app="Todos">          <section>              ...     angular.module('Todos',  ['ngResource']);     var  itemsCtrl  =  function  ($scope,  $resource)  {      var  items  =  $resource('/api/items');      $scope.items  =  items.get();   };   )551ϦΫΤετͷ׬ྃ ௨஌ͦͷ΄͔͸TDPQF ೚ͤ
  33. ͪͳΈʹαʔόʔαΠυ 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    
  34. "OHVMBS+4ͱ͍͑͹ϑΟϧλ <section  ng-­‐controller="itemsCtrl">      <input  type="text"  ng-­‐model="query"  placeholder="grep"  />

         <ul>          <li  ng-­‐repeat="item  in  items  |  filter:query">              <input  type="checkbox"  ng-­‐model="item.done">              <span>{{item.title}}</span>          </li>      </ul>   </section>   OHNPEFMͰόΠϯυ͠ ͨϞσϧͰOHSFQFBUͷ ϧʔϓग़ྗΛϑΟϧλ ΍ͬͨʔɺΠϯΫϦϝϯλ ϧݕࡧͰ͖ͨΑʔ
  35. 'PSN7BMJEBUJPO <form  name="myForm"  ng-­‐submit="addTodo()">      <input  type="text"  name="title"  ng-­‐model="todo.title"

     required>      <input  type="submit"  value="add"  ng-­‐disabled="myForm.$invalid">      <span  ng-­‐show="myForm.title.$error.required">required</span>   </form>  
  36. %JSFDUJWFT •  OHCJOE΍OHNPEFMͷΑ͏ͳ)5.- ֦ுΛࣗΒఆٛ͢Δػೳ •  ෳࡶͳ%0.ߏஙɺ܁Γฦ͠ग़ͯ͘Δ 7JFXͷίʔυΛ·ͱΊ͍ͨ࣌ͳͲ •  ;ɺෳࡶͳͷͰলུ͠·͢ ਒͑੠

     ޙ೔௥ه͜ͷൃදͰ͸౰ํͷཧղෆ଍΋͋Γ%JSFDUJWFTʹ͍ͭͯͷղઆ͸ লུ͠·͕ͨ͠ɺͦͷޙͷಉษڧձͰͷൃදΛഈௌ͢Δʹɺ%JSFDUJWFTͦ͜ ͕"OHVMBS+4ͷਅࠎ௖Ͱ͋Δͱ͍͏ҹ৅΋ड͚·ͨ͠ɻ
  37. ࠶ར༻ՄೳͳϞσϧʹ 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
  38. 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ਪ͚ͩ͠Ͳͳ
  39. "OHVMBS+4ࡶײ

  40. ͜Ε͸͓֮͑ͯ͜͏"OHVMBS+4 •  "OHVMBS+4ͷ%*ͷ࢓૊Έ – $scope,  $route,  $resource  ...   – ʮԿ͔ԾҾ਺ͷ$scope  Λs

     ͱ͔ʹॻ͖׵ ͑ͯ΋૝ఆ௨ΓʹͳΒͳ͍ΜͰ͚͢Ͳʂʯ   – ͦΕ͸"OHVMBS͕GVODUJPO ఆٛΛจࣈ ྻͱͯ͠ѻͬͯਖ਼نදݱͰൈ͍ͨԾҾ਺จࣈ ྻ͔Βಈ࡞Λܾఆ͍ͯ͠Δ͔Βͩ ͳΜ͔Ҿ਺བྷΈͰมͳ ಈ͖͢Δͳʔͱࢥͬͨ Βࢥ͍ͩͦ͏
  41. "OHVMBS+4ͷಘҙɾෆಘҙ •  ಘҙ – σϞͰΈͨΑ͏ͳϖʔδΞϓϦέʔγϣϯ – +40/αʔό͕ޙΖʹ߇͑ͨ$36%ΞϓϦ έʔγϣϯ •  ෆಘҙ – άϥϑΟοΫ͙Γ͙Γܥ – %0.ߏ଄Λಈతʹॻ͖׵͑·͘Δܥ

    – ήʔϜ
  42. "OHVMBS+4ͷҹ৅ •  ܰ͘ಈ͔͢·Ͱ͸؆୯ –  ࣗ෼͸ଞ'8ΑΓ͙͢ಈ͍ͨ͠ཧղͰ͖ͨ –  ؆୯ͳ΋ͷΛ࡞Δͷʹ͸ͱͯ΋ڧྗ •  ຊ֨తʹ࢖͓͏ͱ͢Δͱŋŋŋ – 

    ଞͷ'8ʹൺֱֶͯ͠शίετ͕΍΍ߴ͍ –  ΋΍΋΍͕ग़ͯ͘Δ –  (SVOUͱ͔:FPNBOͱ͔ͷपลπʔϧͷ஌ࣝ΋ඞཁʹ ͳͬͯ͘Δ  •  ڧ੍͍໿ͱগͳ͍ίʔυྔ͕ɺෳ਺ਓ਺Ͱͷ։ൃʹ͸ Ή͠Ζ޲͍͍ͯΔͷͰ͸ͳ͍͔ –  ֶशίετɺपลπʔϧͷಋೖίετ͕ΫϦΞͰ͖Δ͔
  43. "OHVMBS+4΋΍΋΍ྫ •  )5.-ʹOHNPEFMͱ͔ॻ͍ͯΔ͔Β %0.มߋʹڧ͍ͬͯݴ͏͚Ͳɺੲ PODMJDLͱ͔ॻ͘ͳͬͯ࿩ͩͬͨ͡Ό Μ  •  υϝΠϯϞσϧΛهड़͢ΔϕετϓϥΫςΟ ε͕Α͘Θ͔ΒΜ

    –  TDPQF௚ TFSWJDFGBDUPSZ  NPEVMFWBMVF  –  ͳΜͱͳ͘ɺແཧʹந৅Խͤͣബ͍··࢖͑ͱ͍ ͏งғؾ͸ײ͡Δ͚Ͳŋŋŋ
  44. ·ͱΊ •  "OHVMBS+4ʹ஫໨͕ू·Δ •  )5.-֦ுͱ૒ํ޲σʔλόΠϯσΟϯά •  )5.-ͷมߋʹڧ͍ •  %* ςελϏϦςΟͳͲΑΓߴ౓ͳίϯη

    ϓτ΋ •  ϕετϓϥΫςΟεͷूੵɾڞ༗͕଴ͨΕΔ –  ˞ެࣜυΩϡϝϯτॆ࣮͖ͯͯ͠·͢ •  ࣗ෼͸͠͹Β͘"OHVMBS+4Ͱ͍͜͏͔ͳʔ ͱࢥ͍ͬͯ·͢