AngularJS 20min #ng_jp

"OHVMBS+4NJO [email protected]

"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 ﬂexibility 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΍ ͦͷଞʹ΋৭ʑ͋Δ͚Ͳେ͖ ͘͸͜ͷͭ

<!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.-ͦͷ΋ͷ͕ςϯϓϨʔτ

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

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

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

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

యܕతͳ૒ํ޲όΠϯσΟϯάͷྫ <input type="text" ng-‐model="name"> <p>Hello {{name}}</p> ϑΥʔϜʹೖΕͨจࣈ͕ )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.-͔ΒΞϓϦΛ௫Έʹ͍͘ <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

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

ΞϓϦଆ͔Βݟͨ໨Λಈతʹม͑ ͍ͨͱ͖͸ •  ౴͑ – ۃྗ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>

)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.-ʹ൓ө͞ΕΔ

;Γ͔͑Γ "OHVMBS+4Ͱͷ։ൃͷྲྀΕ

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

)5.-ʹ"OHVMBSͰόΠϯ υ͢΂͖ΠϕϯτΛهड़ <form ng-‐submit="addItem()"> <input type="text" ng-‐model="item.title" />
<input type="submit" value="add" /> </form>

$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Λߋ৽͢Δ <ul> <li ng-‐repeat="item
in items"> <input type="checkbox" ng-‐model="item.done"> <span>{{item.title}}</span> </li> </ul> ଟ͘ͷ৔߹૒ํ޲σʔλ όΠϯσΟϯάͰ΄ͬͱ ͍ͯ΋ߋ৽͞ΕΔ

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

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

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

ϦϞʔτͷ+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 ೚ͤ

ͪͳΈʹαʔόʔαΠυ 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ͱ͍͑͹ϑΟϧλ <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ͷ ϧʔϓग़ྗΛϑΟϧλ ΍ͬͨʔɺΠϯΫϦϝϯλ ϧݕࡧͰ͖ͨΑʔ

'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>

%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Ͱ͍͜͏͔ͳʔ ͱࢥ͍ͬͯ·͢

AngularJS 20min #ng_jp

AngularJS 20min #ng_jp

More Decks by Naoya Ito

Other Decks in Technology

Featured

Transcript