"OHVMBS+4NJO !OBPZB@JUP

"OHVMBS+4

੺Ϛϧٸ্ঢ

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

σϞ •  IUUQNITJNCMPHIBDLFSTOFU

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

"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."    

"OHVMBS+4ͷجຊ

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

No content

                                                               

                 
•                                            {{item.title}}                  
             

             

{{items	
  |	
  json}}

                    )5.-ͦͷ΋ͷ͕ςϯϓϨʔτ

//  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.-ͱΞϓϦ έʔγϣϯͷڮ౉͠Λ͢Δ

     

         
•                            {{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  }      ];   };     ͜ͷϒϩοΫ͸͜ͷؔ਺͕ίϯτ ϩʔϧ͠·͢Α

     

         
•                            {{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 ΛόΠϯσΟϯά͠·͢Α

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

యܕతͳ૒ํ޲όΠϯσΟϯάͷྫ  

Hello  {{name}}

  ϑΥʔϜʹೖΕͨจࣈ͕ )5.-ʹϦΞϧλΠϜʹ ඳը͞ΕΔ

ͭͷಛ௃ʹΑͬͯŋŋŋ •  ΞϓϦ +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.ؔ࿈ͷ஋͕ͳ͍

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

)5.-͔ΒΞϓϦΛ௫Έʹ͍͘      

         
•                            {{item.title}}          
     

    ʮ"OHVMBS+4͸ϑϨʔϜϫʔΫ Ͱ͸ͳ͍ɺ)5.-ͷ࠶ઃܭͩʯ ͳͲͱ΋ https://speakerdeck.com/tmaedax/angularjsfalsegoshao-­‐jie  

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

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

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

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

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

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

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

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

σʔλόΠϯσΟϯάΛى఺ʹ 7JFXΛߋ৽͢Δ    

         
•                            {{item.title}}          
     

  ଟ͘ͷ৔߹૒ํ޲σʔλ όΠϯσΟϯάͰ΄ͬͱ ͍ͯ΋ߋ৽͞ΕΔ

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

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

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

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

ͪͳΈʹαʔόʔαΠυ 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    

"OHVMBS+4ͱ͍͑͹ϑΟϧλ            

         
•                            {{item.title}}          
     

    OHNPEFMͰόΠϯυ͠ ͨϞσϧͰOHSFQFBUͷ ϧʔϓग़ྗΛϑΟϧλ ΍ͬͨʔɺΠϯΫϦϝϯλ ϧݕࡧͰ͖ͨΑʔ

'PSN7BMJEBUJPO                  required    

%JSFDUJWFT •  OHCJOE΍OHNPEFMͷΑ͏ͳ)5.- ֦ுΛࣗΒఆٛ͢Δػೳ •  ෳࡶͳ%0.ߏஙɺ܁Γฦ͠ग़ͯ͘Δ 7JFXͷίʔυΛ·ͱΊ͍ͨ࣌ͳͲ •  ;ɺෳࡶͳͷͰলུ͠·͢ ਒͑੠ ޙ೔௥ه͜ͷൃදͰ͸౰ํͷཧղෆ଍΋͋Γ%JSFDUJWFTʹ͍ͭͯͷղઆ͸ লུ͠·͕ͨ͠ɺͦͷޙͷಉษڧձͰͷൃදΛഈௌ͢Δʹɺ%JSFDUJWFTͦ͜ ͕"OHVMBS+4ͷਅࠎ௖Ͱ͋Δͱ͍͏ҹ৅΋ड͚·ͨ͠ɻ

࠶ར༻ՄೳͳϞσϧʹ 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

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ਪ͚ͩ͠Ͳͳ

"OHVMBS+4ࡶײ

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

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

"OHVMBS+4ͷҹ৅ •  ܰ͘ಈ͔͢·Ͱ͸؆୯ –  ࣗ෼͸ଞ'8ΑΓ͙͢ಈ͍ͨ͠ཧղͰ͖ͨ –  ؆୯ͳ΋ͷΛ࡞Δͷʹ͸ͱͯ΋ڧྗ •  ຊ֨తʹ࢖͓͏ͱ͢Δͱŋŋŋ –  ଞͷ'8ʹൺֱֶͯ͠शίετ͕΍΍ߴ͍ –  ΋΍΋΍͕ग़ͯ͘Δ –  (SVOUͱ͔:FPNBOͱ͔ͷपลπʔϧͷ஌ࣝ΋ඞཁʹ ͳͬͯ͘Δ •  ڧ੍͍໿ͱগͳ͍ίʔυྔ͕ɺෳ਺ਓ਺Ͱͷ։ൃʹ͸ Ή͠Ζ޲͍͍ͯΔͷͰ͸ͳ͍͔ –  ֶशίετɺपลπʔϧͷಋೖίετ͕ΫϦΞͰ͖Δ͔

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

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