Slide 1

Slide 1 text

"OHVMBS+4NJO !OBPZB@JUP

Slide 2

Slide 2 text

"OHVMBS+4

Slide 3

Slide 3 text

੺Ϛϧٸ্ঢ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

σϞ •  IUUQNITJNCMPHIBDLFSTOFU

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

"OHVMBS+4ͷجຊ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

                                                               
                     
  •                                            {{item.title}}                  
  •              
             
{{items	
  |	
  json}}
                    )5.-ͦͷ΋ͷ͕ςϯϓϨʔτ

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Hello  {{name}}

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

'PSN7BMJEBUJPO                  required    

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

"OHVMBS+4ࡶײ

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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