Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
AngularJSのご紹介
tmaeda
July 27, 2013
Programming
12
5.6k
AngularJSのご紹介
tmaeda
July 27, 2013
Tweet
Share
More Decks by tmaeda
See All by tmaeda
tmaedax
7
1.1k
tmaedax
1
860
tmaedax
2
1.6k
tmaedax
18
10k
tmaedax
3
840
Other Decks in Programming
See All in Programming
dunglas
5
5.4k
dqneo
0
100
kazuhei0108
3
950
bkuhlmann
6
710
yusuke57
2
280
techharmony
0
160
minecr
0
120
kulkarniankita09
0
270
coe401_
3
160
rukiadia
3
870
scrpgil
0
100
uhyo
19
9.2k
Featured
See All Featured
jcasabona
8
590
reverentgeek
167
7.3k
bryan
32
3.5k
jakevdp
776
200k
sferik
613
55k
malarkey
193
8.7k
addyosmani
1346
200k
rocio
155
11k
mojombo
359
62k
cherdarchuk
71
270k
jasonvnalue
81
8.1k
aarron
258
36k
Transcript
"OHVMBS+4ͷ͝հ 4BQQPSPKT!UNBFEB
!UNBFEB w 3VCZͱ͔0$BNMͷਓͰ͢ɻ w ࠷ۙԑ͋ͬͯɺࣄͰ"OHVMBSΛϲ݄ఔ͍ͬͯ·͢ɻ w TBQQPSPKTॳࢀՃͰ͢ɻ w ੴా͞Μͷ,OPDLPVUͷΛฉ͖ͨͯ͘ࢀՃొͨ͠Βɺ ͳ͔ͥൃදͤ͞ΒΕΔ͜ͱʹͳΓ·ͨ͠ɻॳΊͯͳͷʹɻ
w +BWBTDSJQUͷ͜ͱྑ͘Γ·ͤΜͷͰɺ͓खॊΒ͔ʹɻ
ࠓͷ͓ w"OHVMBSͷ֓ཁ wσϞ w"OHVMBSͷಛߏ wߋʹ͍͔ͭ͘σϞ wࣄྫ wܽɺར
"OHVMBS+4ͱ w(PPHMFͷ.JãLP)FWFSZ͞ΜΛத৺ʹ࡞ΒΕͯ ͍Δ.*5-JDFOTFͷ$MJFOUTJEF+BWB4DSJQU .7 ͍ΘΏΔ.7$ .77. .71ͳͲͳͲ 'SBNFXPSLɻ wʹެ։ɻ
http://misko.hevery.com/about/
"OHVMBS ϑϨʔϜϫʔΫͰͳ͍ʂ )5.-ͷ࠶ઃܭͩοʂ
"OHVMBS ϑϨʔϜϫʔΫͰͳ͍ʂ )5.-ͷ࠶ઃܭͩοʂ f*[y
·ͣσϞΛ ͝ཡ͖·͠ΐ͏
͡Ίͯͷ"OHVMBS+4 <!doctype html> <html lang="ja" ng-app> <head> <meta charset="utf-8"> <title>Ζʔ͋Μ͗ΎΒʔ</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/ 1.1.5/angular.min.js"></script> </head> <body> <input type="text" ng-model="name" > <p>Hello {{name}}</p> </body> </html>
͡Ίͯͷ"OHVMBS+4
͡Ίͯͷ"OHVMBS+4 จࣈΛೖΕΔͱ
͡Ίͯͷ"OHVMBS+4 ϦΞϧλΠϜʹ දࣔ͞ΕΔʂ
͡Ίͯͷ"OHVMBS+4 ߦεΫϦϓτ ॻ͍ͯͳ͍ͷ ʹʂʂʂ
͡Ίͯͷ"OHVMBS+4 <!doctype html> <html lang="ja" ng-app> <head> <meta charset="utf-8"> <title>Ζʔ͋Μ͗ΎΒʔ</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/ 1.1.5/angular.min.js"></script> </head> <body> <input type="text" ng-model="name" > <p>Hello {{name}}</p> </body> </html>
ͳΜͰʁʁʁ
ίϯύΠϧޙ <html lang="ja" ng-app="" class="ng-scope"><head> <meta charset="utf-8"> <title>Ζʔ͋Μ͗ΎΒʔ</title> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/
1.1.5/angular.min.js"></script> <style type="text/css"> @charset "UTF-8"; [ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng- cloak,.x-ng-cloak{display:none;} ng\:form{display:block;} </style> </head> <body> <input type="text" ng-model="name" class="ng-valid ng-dirty"> <p class="ng-binding">Hello ͋Μ͗ΎΒʔ</p> </body> </html>
ίϯύΠϧޙ
ͭ·Γʁ
$compile {{ }} $interpolate Directive ng-app ng-model ... Model name
View {{name}} <input>
$compile {{ }} $interpolate Directive ng-app ng-model ... Model name
View {{name}} <input> "OHVMBSಠ ࣗʹ)5.-λάΛ ఆٛ͢ΔΈΛ ఏڙ͍ͯ͠Δ
$compile {{ }} $interpolate Directive ng-app ng-model ... Model name
View {{name}} <input> "OHVMBS QVSF )5.-Λ ίϯύΠϧ ͯ͠.7Λ ࣗಈੜ͢ Δ
$compile {{ }} $interpolate Directive ng-app ng-model ... Model name
View {{name}} <input> 7ͱ.ํʹ ଓ͞Ε͍ͯΔ
$compile {{ }} $interpolate Directive ng-app ng-model ... Model name
View {{name}} <input> .PEFMͲΜͳσ ʔλߏͰྑ͍ ಛघͳΫϥεΛܧঝ͢ Δඞཁͳ͍
$compile {{ }} $interpolate Directive ng-app ng-model ... Model name
View {{name}} <input> 7JFXςΩετͰ ͳ͘ੜ͖ͨΦϒδΣΫ τͰ͋Δ
Α͋͘ΔςϯϓϨʔτΤϯδϯ template model template engine (෦) HTML Browser ඳը݁Ռ NPEFMΛมߋ͢ΔͱɺUFNQMBUF
શମΛඳը͠͠
Browser "OHVMBSͷ7JFX model View template Angular $compile ඳը݁Ռ NPEFMΛมߋ͢Δͱɺͦͷมߋ ʹؔ͋Δ෦͚ͩॻ͖มΘΔ
※͋·Γਖ਼֬ͳֆ͡Όͳ͍Ͱ͢ɺ͢Έ·ͤΜɻ֓೦͚ͩΈऔ͍ͬͯͩ͘͞ɻ
$compile {{ }} $interpolate Directive ng-app ng-model ... Model name
View {{name}} <input> 7JFXςΩετͰ ͳ͘ੜ͖ͨΦϒδΣΫ τͰ͋Δ
͡Ίͯͷ"OHVMBS+4 <!doctype html> <html lang="ja" ng-app> <head> <meta charset="utf-8"> <title>Ζʔ͋Μ͗ΎΒʔ</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/ 1.1.5/angular.min.js"></script> </head> <body> <input type="text" ng-model="name" > <p>Hello {{name}}</p> </body> </html>
͡Ίͯͷ"OHVMBS+4 <!doctype html> <html lang="ja" ng-app> <head> <meta charset="utf-8"> <title>Ζʔ͋Μ͗ΎΒʔ</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/ 1.1.5/angular.min.js"></script> </head> <body> <input type="text" ng-model="name" > <p>Hello {{name}}</p> </body> </html> શ͘ແବͷͳ͘ ײతͳهड़
ྫ͑CBDLCPOFͩͱ <input id="new-todo" type="text"> events: { "keypress #new-todo": "createOnEnter", createOnEnter:
function(e) { ... Todos.create({title: this.input.val()}); ... }, template: controller:
ྫ͑CBDLCPOFͩͱ <input id="new-todo" type="text"> events: { "keypress #new-todo": "createOnEnter", createOnEnter:
function(e) { ... Todos.create({title: this.input.val()}); ... }, template: controller: ݁ͼ͚ͭΔͨΊ͚ͩ ʹJEఆٛͯ͠
ྫ͑CBDLCPOFͩͱ <input id="new-todo" type="text"> events: { "keypress #new-todo": "createOnEnter", createOnEnter:
function(e) { ... Todos.create({title: this.input.val()}); ... }, template: controller: 7JFX ͔ΒσʔλΛऔΓ ग़ͯ͠ɺϞσϧʹೖ ΕΔॲཧࣗͰ ॻ͍ͯ
ྫ͑CBDLCPOFͩͱ <input id="new-todo" type="text"> events: { "keypress #new-todo": "createOnEnter", createOnEnter:
function(e) { ... Todos.create({title: this.input.val()}); ... }, template: controller: ݁ͼ͚ͭΔ
͡Ίͯͷ"OHVMBS+4 <!doctype html> <html lang="ja" ng-app> <head> <meta charset="utf-8"> <title>Ζʔ͋Μ͗ΎΒʔ</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/ 1.1.5/angular.min.js"></script> </head> <body> <input type="text" ng-model="name" > <p>Hello {{name}}</p> </body> </html> શ͘ແବͷͳ͘ ײతͳهड़
ϧʔϓͱ͔ʁ
ུ <script> 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"} ]; } </script> </head> <body> <div ng-controller="mainCtrl"> <ul> <li ng-repeat="talker in talkers"> {{talker.name}}: {{talker.id}}: {{talker.title}} </li> </ul> </div> ུ
ϑΟϧλͳΜͯ ͷ͋Γ·͢
ུ <script> 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"} ]; } </script> </head> <body> <div ng-controller="mainCtrl"> <input type="text" ng-model="query"> <ul> <li ng-repeat="talker in talkers | filter:query"> {{talker.name}}: {{talker.id}}: {{talker.title}} </li> </ul> </div> ུ
%%Ͱฒସ͑
<html lang="ja" ng-app="myApp"> ུ <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></ script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery- ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/ angular.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular- ui.min.js"></script> <script> 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"} ]; } </script> ུ <ul ui-sortable ng-model="talkers"> <li ng-repeat="talker in talkers"> ฒସ͑Ͱ͖ΔΑ͏ʹ͠·͢Αɻ ͦΕʹΑͬͯɺฒͼมΘΔϞσϧ͜ΕͰ͢Αɻ ʢશ͘ແବͷͳ͍هड़ʣ
άϦου
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.7/ng-grid.min.js"></script> <script> 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' }; } </script> <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/ng-grid/ 2.0.7/ng-grid.css" /> <style> .gridStyle { border: 1px solid rgb(212,212,212); width: 400px; height: 300px } </style> ུ <div ng-controller="mainCtrl"> <div class="gridStyle" ng-grid="gridOptions"> </div> </div> HSJE0QUJPOTʹैͬͯ άϦουΛදࣔͯ͠Ͷ શ͘ແବͷͳ͍هड़ ػೳ͕༗Γ͗͢ΔͷͰɺৄࡉͪ͜Β http://angular-ui.github.io/ng-grid/
"OHVMBS+4ͷߏཁૉ wWJFX wDPOUSPMMFS wNPEFM wTFSWJDF wEJSFDUJWF wpMUFS wશ͘ແବͳهड़ͷͳ͍ %* JOKFDUPS
wSPVUFS wQSPNJTF R wIUUQSFTPVSDF wUFTUJOH w
ࣄྫ http://builtwith.angularjs.org/
ਓؾ ถࠃௐࠪػؔGࣾௐ
"OHVMBS+4WT#BDLCPOF+4 wࣗͷ#BDLCPOFΞϓϦΛ"OHVMBSͰॻ͖ͨ͠ ΜͩɻίʔυαΠζߦ͔ΒͲ͜·Ͱݮͬ ͨͱࢥ͏ʁߦͩΑɻͦΕ͚ͩ͡Όͳ͘ɺίʔ υͣͬͱ៉ྷʹͳͬͨɻ http://stackoverflow.com/questions/6548826/angular-js- vs-backbone-js
"OHVMBS+4ͷܽ w֓೦Λཧղ͢ΔͷʹগʑΛཁ͢ΔɻBQQMZ ͱ͔XBUDI ͱ͔EJHFTUϧʔϓͱ͔DPNQJMFͱ͔ MJOLͱ͔QSPNJTFͱ͔ɻͦΓΌͦʔͰ͢Αɺ )5.-ͱϒϥβΛઃܭ͠ͳ͓ͯ͠ΜͰ͔͢Β wطଘͷʢ.7$ͷ͜ͱશ͘ߟྀͯ͠ͳ͍ ϥΠϒϥ ϦϑϨʔϜϫʔΫίʔυยͱͷ࿈ܞ͕໘ Θ͟Θ͟EJSFDUJWFΛॻ͔ͳ͍ͱ͍͚ͳ͍߹͕
ଟ͍
"OHVMBS+4ͷར wϑϨʔϜϫʔΫ͔ΒΫϦʔϯͳίʔυΛॻ͔ͳ͖ Ό͍͚ͳ͍ѹྗΛड͚Δ ඪ४Ͱ༻ҙ͞Ε͍ͯΔ ػೳͰ.7 ʹ߹Θͳ͍ίʔυجຊతʹॻ͚ͳ ͍ ͷͰɺίʔυ͕៉ྷʹͳΓ͍͢ɻ w%*%JSFDUJWFͳͲͷڧྗͳ෦Խػߏͷ͓͔͛ Ͱ෦ͷ࠶ར༻͕͍͢͠ɻඇৗʹ͍ίʔυͰ
Ϧονͳػೳ͕࣮ݱͰ͖Δɻࠓޙɺࣗ࡞Φʔϓ ϯιʔεͷ෦ͷࢿ࢈͕ͨ·͍ͬͯ͘ͱͲΜͲΜ ָʹͳ͍ͬͯ͘͜ͱ͕ݟࠐ·ΕΔɻ
·ͱΊ w"OHVMBS+4ඇৗʹ؆ܿͳهड़Ͱ.7 ͳΞϓϦ έʔγϣϯ͕։ൃͰ͖ΔϑϨʔϜϫʔΫͰ͢ɻ w%*%JSFDUJWFͳͲͷΈʹΑΓɺ࠶ར༻ੑͷ ߴ͍෦͕࡞Γ͍͢ͷͰɺ͑͏ఔָʹͳ ͍͖ͬͯ·͢ɻ