AngularJS 20min #ng_jp - Speaker Deck

AngularJS 20min #ng_jp

by Naoya Ito

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

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

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