Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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. "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."    
  2. <!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.-ͦͷ΋ͷ͕ςϯϓϨʔτ
  3. //  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.-ͱΞϓϦ έʔγϣϯͷڮ౉͠Λ͢Δ
  4. <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  }      ];   };     ͜ͷϒϩοΫ͸͜ͷؔ਺͕ίϯτ ϩʔϧ͠·͢Α
  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>   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 ΛόΠϯσΟϯά͠·͢Α
  6. ͭͷಛ௃ʹΑͬͯŋŋŋ •  ΞϓϦ +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.ؔ࿈ͷ஋͕ͳ͍
  7. )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  
  8. ΞϓϦଆ͔Βݟͨ໨Λಈతʹม͑ ͍ͨͱ͖͸  •  ౴͑ – ۃྗ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>    
  9. )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.-ʹ൓ө͞ΕΔ
  10. $POUSPMMFSͰΠϕϯτΛड͚ औΔ var  itemsCtrl  =  function  ($scope)  {    

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

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

     in  items">              <input  type="checkbox"  ng-­‐model="item.done">              <span>{{item.title}}</span>          </li>      </ul>   ଟ͘ͷ৔߹૒ํ޲σʔλ όΠϯσΟϯάͰ΄ͬͱ ͍ͯ΋ߋ৽͞ΕΔ
  13. ϦϞʔτͷ+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 ೚ͤ
  14. ͪͳΈʹαʔόʔαΠυ 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    
  15. "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ͷ ϧʔϓग़ྗΛϑΟϧλ ΍ͬͨʔɺΠϯΫϦϝϯλ ϧݕࡧͰ͖ͨΑʔ
  16. '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>  
  17. %JSFDUJWFT •  OHCJOE΍OHNPEFMͷΑ͏ͳ)5.- ֦ுΛࣗΒఆٛ͢Δػೳ •  ෳࡶͳ%0.ߏஙɺ܁Γฦ͠ग़ͯ͘Δ 7JFXͷίʔυΛ·ͱΊ͍ͨ࣌ͳͲ •  ;ɺෳࡶͳͷͰলུ͠·͢ ਒͑੠

     ޙ೔௥ه͜ͷൃදͰ͸౰ํͷཧղෆ଍΋͋Γ%JSFDUJWFTʹ͍ͭͯͷղઆ͸ লུ͠·͕ͨ͠ɺͦͷޙͷಉษڧձͰͷൃදΛഈௌ͢Δʹɺ%JSFDUJWFTͦ͜ ͕"OHVMBS+4ͷਅࠎ௖Ͱ͋Δͱ͍͏ҹ৅΋ड͚·ͨ͠ɻ
  18. ࠶ར༻ՄೳͳϞσϧʹ 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
  19. 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ਪ͚ͩ͠Ͳͳ
  20. ͜Ε͸͓֮͑ͯ͜͏"OHVMBS+4 •  "OHVMBS+4ͷ%*ͷ࢓૊Έ – $scope,  $route,  $resource  ...   – ʮԿ͔ԾҾ਺ͷ$scope  Λs

     ͱ͔ʹॻ͖׵ ͑ͯ΋૝ఆ௨ΓʹͳΒͳ͍ΜͰ͚͢Ͳʂʯ   – ͦΕ͸"OHVMBS͕GVODUJPO ఆٛΛจࣈ ྻͱͯ͠ѻͬͯਖ਼نදݱͰൈ͍ͨԾҾ਺จࣈ ྻ͔Βಈ࡞Λܾఆ͍ͯ͠Δ͔Βͩ ͳΜ͔Ҿ਺བྷΈͰมͳ ಈ͖͢Δͳʔͱࢥͬͨ Βࢥ͍ͩͦ͏
  21. "OHVMBS+4ͷҹ৅ •  ܰ͘ಈ͔͢·Ͱ͸؆୯ –  ࣗ෼͸ଞ'8ΑΓ͙͢ಈ͍ͨ͠ཧղͰ͖ͨ –  ؆୯ͳ΋ͷΛ࡞Δͷʹ͸ͱͯ΋ڧྗ •  ຊ֨తʹ࢖͓͏ͱ͢Δͱŋŋŋ – 

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

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

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