Slide 1

Slide 1 text

"OHVMBS+4ͷ͝঺հ 4BQQPSPKT!UNBFEB

Slide 2

Slide 2 text

!UNBFEB w 3VCZͱ͔0$BNMͷਓͰ͢ɻ w ࠷ۙԑ͋ͬͯɺ࢓ࣄͰ"OHVMBSΛϲ݄ఔ࢖͍ͬͯ·͢ɻ w TBQQPSPKTॳࢀՃͰ͢ɻ w ੴా͞Μͷ,OPDLPVUͷ࿩Λฉ͖ͨͯ͘ࢀՃొ࿥ͨ͠Βɺ ͳ͔ͥൃදͤ͞ΒΕΔ͜ͱʹͳΓ·ͨ͠ɻॳΊͯͳͷʹɻ w +BWBTDSJQUͷ͜ͱ͸ྑ͘஌Γ·ͤΜͷͰɺ͓खॊΒ͔ʹɻ

Slide 3

Slide 3 text

ࠓ೔ͷ͓࿩ w"OHVMBSͷ֓ཁ wσϞ w"OHVMBSͷಛ௃΍ߏ଄ wߋʹ͍͔ͭ͘σϞ wࣄྫ wܽ఺ɺར఺

Slide 4

Slide 4 text

"OHVMBS+4ͱ͸ w(PPHMFͷ.JãLP)FWFSZ͞ΜΛத৺ʹ࡞ΒΕͯ ͍Δ.*5-JDFOTFͷ$MJFOUTJEF+BWB4DSJQU .7 ͍ΘΏΔ.7$ .77. .71ͳͲͳͲ 'SBNFXPSLɻ wʹެ։ɻ

Slide 5

Slide 5 text

http://misko.hevery.com/about/

Slide 6

Slide 6 text

"OHVMBS͸ ϑϨʔϜϫʔΫͰ͸ͳ͍ʂ )5.-ͷ࠶ઃܭͩοʂ

Slide 7

Slide 7 text

"OHVMBS͸ ϑϨʔϜϫʔΫͰ͸ͳ͍ʂ )5.-ͷ࠶ઃܭͩοʂ f*[y

Slide 8

Slide 8 text

·ͣ͸σϞΛ ͝ཡ௖͖·͠ΐ͏

Slide 9

Slide 9 text

͸͡Ίͯͷ"OHVMBS+4 ͸Ζʔ͋Μ͗ΎΒʔ

Hello {{name}}

Slide 10

Slide 10 text

͸͡Ίͯͷ"OHVMBS+4

Slide 11

Slide 11 text

͸͡Ίͯͷ"OHVMBS+4 จࣈΛೖΕΔͱ

Slide 12

Slide 12 text

͸͡Ίͯͷ"OHVMBS+4 ϦΞϧλΠϜʹ දࣔ͞ΕΔʂ

Slide 13

Slide 13 text

͸͡Ίͯͷ"OHVMBS+4 ߦ΋εΫϦϓτ ॻ͍ͯͳ͍ͷ ʹʂʂʂ

Slide 14

Slide 14 text

͸͡Ίͯͷ"OHVMBS+4 ͸Ζʔ͋Μ͗ΎΒʔ

Hello {{name}}

Slide 15

Slide 15 text

ͳΜͰʁʁʁ

Slide 16

Slide 16 text

ίϯύΠϧޙ ͸Ζʔ͋Μ͗ΎΒʔ @charset "UTF-8"; [ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng- cloak,.x-ng-cloak{display:none;} ng\:form{display:block;}

Hello ͋Μ͗ΎΒʔ

Slide 17

Slide 17 text

ίϯύΠϧޙ

Slide 18

Slide 18 text

ͭ·Γʁ

Slide 19

Slide 19 text

$compile {{ }} $interpolate Directive ng-app ng-model ... Model name View {{name}}

Slide 20

Slide 20 text

$compile {{ }} $interpolate Directive ng-app ng-model ... Model name View {{name}} "OHVMBS͸ಠ ࣗʹ)5.-λάΛ ఆٛ͢Δ࢓૊ΈΛ ఏڙ͍ͯ͠Δ

Slide 21

Slide 21 text

$compile {{ }} $interpolate Directive ng-app ng-model ... Model name View {{name}} "OHVMBS ͸QVSF )5.-Λ ίϯύΠϧ ͯ͠.7Λ ࣗಈੜ੒͢ Δ

Slide 22

Slide 22 text

$compile {{ }} $interpolate Directive ng-app ng-model ... Model name View {{name}} 7ͱ.͸૒ํ޲ʹ ઀ଓ͞Ε͍ͯΔ

Slide 23

Slide 23 text

$compile {{ }} $interpolate Directive ng-app ng-model ... Model name View {{name}} .PEFM͸ͲΜͳσ ʔλߏ଄Ͱ΋ྑ͍ ಛघͳΫϥεΛܧঝ͢ Δඞཁ͸ͳ͍

Slide 24

Slide 24 text

$compile {{ }} $interpolate Directive ng-app ng-model ... Model name View {{name}} 7JFX͸ςΩετͰ ͸ͳ͘ੜ͖ͨΦϒδΣΫ τͰ͋Δ

Slide 25

Slide 25 text

Α͋͘ΔςϯϓϨʔτΤϯδϯ template model template engine (෦෼) HTML Browser ඳը݁Ռ NPEFMΛมߋ͢ΔͱɺUFNQMBUF શମΛඳը͠௚͠

Slide 26

Slide 26 text

Browser "OHVMBSͷ7JFX model View template Angular $compile ඳը݁Ռ NPEFMΛมߋ͢Δͱɺͦͷมߋ ʹؔ܎͋Δ෦෼͚ͩॻ͖มΘΔ ※͋·Γਖ਼֬ͳֆ͡Όͳ͍Ͱ͢ɺ͢Έ·ͤΜɻ֓೦͚ͩ἞Έऔ͍ͬͯͩ͘͞ɻ

Slide 27

Slide 27 text

$compile {{ }} $interpolate Directive ng-app ng-model ... Model name View {{name}} 7JFX͸ςΩετͰ ͸ͳ͘ੜ͖ͨΦϒδΣΫ τͰ͋Δ

Slide 28

Slide 28 text

͸͡Ίͯͷ"OHVMBS+4 ͸Ζʔ͋Μ͗ΎΒʔ

Hello {{name}}

Slide 29

Slide 29 text

͸͡Ίͯͷ"OHVMBS+4 ͸Ζʔ͋Μ͗ΎΒʔ

Hello {{name}}

શ͘ແବͷͳ͘௚ ײతͳهड़

Slide 30

Slide 30 text

ྫ͑͹CBDLCPOFͩͱ events: { "keypress #new-todo": "createOnEnter", createOnEnter: function(e) { ... Todos.create({title: this.input.val()}); ... }, template: controller:

Slide 31

Slide 31 text

ྫ͑͹CBDLCPOFͩͱ events: { "keypress #new-todo": "createOnEnter", createOnEnter: function(e) { ... Todos.create({title: this.input.val()}); ... }, template: controller: ݁ͼ͚ͭΔͨΊ͚ͩ ʹJEఆٛͯ͠

Slide 32

Slide 32 text

ྫ͑͹CBDLCPOFͩͱ events: { "keypress #new-todo": "createOnEnter", createOnEnter: function(e) { ... Todos.create({title: this.input.val()}); ... }, template: controller: 7JFX ͔ΒσʔλΛऔΓ ग़ͯ͠ɺϞσϧʹೖ ΕΔॲཧ΋ࣗ෼Ͱ ॻ͍ͯ

Slide 33

Slide 33 text

ྫ͑͹CBDLCPOFͩͱ events: { "keypress #new-todo": "createOnEnter", createOnEnter: function(e) { ... Todos.create({title: this.input.val()}); ... }, template: controller: ݁ͼ͚ͭΔ

Slide 34

Slide 34 text

͸͡Ίͯͷ"OHVMBS+4 ͸Ζʔ͋Μ͗ΎΒʔ

Hello {{name}}

શ͘ແବͷͳ͘௚ ײతͳهड़

Slide 35

Slide 35 text

ϧʔϓͱ͔͸ʁ

Slide 36

Slide 36 text

ུ var mainCtrl = function($scope) { $scope.talkers = [ {"name": "·͑ͩ", "id": "@tmaeda", "title": "AngularJS"}, {"name": "ΓΎ͏ͷ͚͢", "id": "@tricknotes", "title": "How to relaunch sapporojs.org"}, {"name": "͍ͩ͠", "id": "@iakio", "title": "Getting Started with Knockout.js"} ]; }
  • {{talker.name}}: {{talker.id}}: {{talker.title}}

Slide 37

Slide 37 text

ϑΟϧλͳΜͯ΋ ͷ΋͋Γ·͢

Slide 38

Slide 38 text

ུ var mainCtrl = function($scope) { $scope.talkers = [ {"name": "·͑ͩ", "id": "@tmaeda", "title": "AngularJS"}, {"name": "ΓΎ͏ͷ͚͢", "id": "@tricknotes", "title": "How to relaunch sapporojs.org"}, {"name": "͍ͩ͠", "id": "@iakio", "title": "Getting Started with Knockout.js"} ]; }
  • {{talker.name}}: {{talker.id}}: {{talker.title}}

Slide 39

Slide 39 text

%%Ͱฒ΂ସ͑

Slide 40

Slide 40 text

ུ script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery- ui.min.js"> var myApp = angular.module('myApp', ['ui']) ; var mainCtrl = function($scope) { $scope.talkers = [ {"name": "·͑ͩ", "id": "@tmaeda", "title": "AngularJS"}, {"name": "ΓΎ͏ͷ͚͢", "id": "@tricknotes", "title": "How to relaunch sapporojs.org"}, {"name": "͍ͩ͠", "id": "@iakio", "title": "Getting Started with Knockout.js"} ]; } ུ
  • ฒ΂ସ͑Ͱ͖ΔΑ͏ʹ͠·͢Αɻ ͦΕʹΑͬͯɺฒͼมΘΔϞσϧ͸͜ΕͰ͢Αɻ ʢશ͘ແବͷͳ͍هड़ʣ

Slide 41

Slide 41 text

άϦου

Slide 42

Slide 42 text

var myApp = angular.module('myApp', ['ngGrid']) ; var mainCtrl = function($scope) { $scope.talkers = [ {"name": "·͑ͩ", "id": "@tmaeda", "title": "AngularJS"}, {"name": "ΓΎ͏ͷ͚͢", "id": "@tricknotes", "title": "How to relaunch sapporojs.org"}, {"name": "͍ͩ͠", "id": "@iakio", "title": "Getting Started with Knockout.js"} ]; $scope.gridOptions = { data: 'talkers' }; } .gridStyle { border: 1px solid rgb(212,212,212); width: 400px; height: 300px } ུ
HSJE0QUJPOTʹैͬͯ άϦουΛදࣔͯ͠Ͷ શ͘ແବͷͳ͍هड़ ػೳ͕༗Γ͗͢ΔͷͰɺৄࡉ͸ͪ͜Β http://angular-ui.github.io/ng-grid/

Slide 43

Slide 43 text

"OHVMBS+4ͷߏ੒ཁૉ wWJFX wDPOUSPMMFS wNPEFM wTFSWJDF wEJSFDUJWF wpMUFS wશ͘ແବͳهड़ͷͳ͍ %* JOKFDUPS wSPVUFS wQSPNJTF R wIUUQSFTPVSDF wUFTUJOH w

Slide 44

Slide 44 text

ࣄྫ http://builtwith.angularjs.org/

Slide 45

Slide 45 text

ਓؾ ถࠃௐࠪػؔGࣾௐ΂

Slide 46

Slide 46 text

"OHVMBS+4WT#BDLCPOF+4 wࣗ෼ͷ#BDLCPOFΞϓϦΛ"OHVMBSͰॻ͖௚ͨ͠ ΜͩɻίʔυαΠζ͸ߦ͔ΒͲ͜·Ͱݮͬ ͨͱࢥ͏ʁߦͩΑɻͦΕ͚ͩ͡Όͳ͘ɺίʔ υ͸ͣͬͱ៉ྷʹͳͬͨɻ http://stackoverflow.com/questions/6548826/angular-js- vs-backbone-js

Slide 47

Slide 47 text

"OHVMBS+4ͷܽ఺ w֓೦Λཧղ͢Δͷʹগʑ೜଱Λཁ͢ΔɻBQQMZ ͱ͔XBUDI ͱ͔EJHFTUϧʔϓͱ͔DPNQJMFͱ͔ MJOLͱ͔QSPNJTFͱ͔ɻͦΓΌͦʔͰ͢Αɺ )5.-ͱϒϥ΢βΛઃܭ͠ͳ͓ͯ͠ΜͰ͔͢Β wطଘͷʢ.7$ͷ͜ͱશ͘ߟྀͯ͠ͳ͍ ϥΠϒϥ Ϧ΍ϑϨʔϜϫʔΫ΍ίʔυยͱͷ࿈ܞ͕໘౗ Θ͟Θ͟EJSFDUJWFΛॻ͔ͳ͍ͱ͍͚ͳ͍৔߹͕ ଟ͍

Slide 48

Slide 48 text

"OHVMBS+4ͷར఺ wϑϨʔϜϫʔΫ͔ΒΫϦʔϯͳίʔυΛॻ͔ͳ͖ Ό͍͚ͳ͍ѹྗΛड͚Δ ඪ४Ͱ༻ҙ͞Ε͍ͯΔ ػೳͰ͸.7ʹ߹Θͳ͍ίʔυ͸جຊతʹॻ͚ͳ ͍ ͷͰɺίʔυ͕៉ྷʹͳΓ΍͍͢ɻ w%*΍%JSFDUJWFͳͲͷڧྗͳ෦඼Խػߏͷ͓͔͛ Ͱ෦඼ͷ࠶ར༻͕͠΍͍͢ɻඇৗʹ୹͍ίʔυͰ Ϧονͳػೳ͕࣮ݱͰ͖Δɻࠓޙɺࣗ࡞΍Φʔϓ ϯιʔεͷ෦඼ͷࢿ࢈͕ͨ·͍ͬͯ͘ͱͲΜͲΜ ָʹͳ͍ͬͯ͘͜ͱ͕ݟࠐ·ΕΔɻ

Slide 49

Slide 49 text

·ͱΊ w"OHVMBS+4͸ඇৗʹ؆ܿͳهड़Ͱ.7ͳΞϓϦ έʔγϣϯ͕։ൃͰ͖ΔϑϨʔϜϫʔΫͰ͢ɻ w%*΍%JSFDUJWFͳͲͷ࢓૊ΈʹΑΓɺ࠶ར༻ੑͷ ߴ͍෦඼͕࡞Γ΍͍͢ͷͰɺ࢖͑͹࢖͏ఔָʹͳ ͍͖ͬͯ·͢ɻ