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
6k
AngularJSのご紹介
tmaeda
July 27, 2013
Tweet
Share
More Decks by tmaeda
See All by tmaeda
アクターモデルの話
tmaedax
7
1.4k
Jupyter(主にnotebook)のご紹介
tmaedax
1
1k
VoiceText Web APIでのGolang利用事例のご紹介
tmaedax
2
1.8k
それ NArray でできるよ
tmaedax
18
11k
静的型付き関数型言語のススメ
tmaedax
3
940
Other Decks in Programming
See All in Programming
10年以上続くプロダクトの フロントエンド刷新プロジェクトのふりかえり
yotahada3
2
360
爆速の日経電子版開発の今
shinyaigeek
2
670
PHPアプリケーションにおけるアーキテクチャメトリクスについて / Architecture Metrics in PHP Applications
isanasan
1
300
Amebaブログの会員画面システム刷新の道程
ryotasugawara
1
260
社会人 20 年目エンジニア、発信で技術学びなおしてる話
e99h2121
1
150
はじめての「R」
masaha03
0
110
Swift Expression Macros: a practical introduction
kishikawakatsumi
2
740
子育てとEMと転職と
_atsushisakai
1
430
データドリブンな組織の不正検知
fkubota
0
310
WordPress(再)入門 - 基礎知識・環境編
oleindesign
1
140
Excelの助けを借りて楽にシナリオを作ろう
rpa_niiyama
0
340
Workshop on Jetpack compose
aldefy
0
140
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
117
7.7k
Learning to Love Humans: Emotional Interface Design
aarron
263
38k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
128
8.8k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
Happy Clients
brianwarren
90
5.8k
Unsuck your backbone
ammeep
659
56k
Git: the NoSQL Database
bkeepers
PRO
419
60k
The Illustrated Children's Guide to Kubernetes
chrisshort
22
43k
Web Components: a chance to create the future
zenorocha
304
40k
A better future with KSS
kneath
230
16k
StorybookのUI Testing Handbookを読んだ
zakiyama
8
3.2k
The Brand Is Dead. Long Live the Brand.
mthomps
48
2.9k
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ͳͲͷΈʹΑΓɺ࠶ར༻ੑͷ ߴ͍෦͕࡞Γ͍͢ͷͰɺ͑͏ఔָʹͳ ͍͖ͬͯ·͢ɻ