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.9k
AngularJSのご紹介
tmaeda
July 27, 2013
Tweet
Share
More Decks by tmaeda
See All by tmaeda
アクターモデルの話
tmaedax
7
1.3k
Jupyter(主にnotebook)のご紹介
tmaedax
1
970
VoiceText Web APIでのGolang利用事例のご紹介
tmaedax
2
1.8k
それ NArray でできるよ
tmaedax
18
10k
静的型付き関数型言語のススメ
tmaedax
3
910
Other Decks in Programming
See All in Programming
フロントエンドエンジニアが変える現場のモデリング意識/modeling-awareness-changed-by-front-end-engineers
uggds
32
13k
RustのWebフレームワーク周りの概観
hayao
0
180
Dagger, la CI, autrement
guikingone
1
120
SwiftUI+TCAに挑戦!NewsPicks iOSアプリのリアーキテクチャ/re-architecture-newspicks-ios-app-with-swiftui-and-tca
takehilo
0
410
FargateとAthenaで作る、機械学習システム
nayuts
0
190
パラメタライズドテスト
ledsun
0
220
SGGとは
inoue2002
0
440
NestJS_meetup_atamaplus
atamaplus
0
220
動画合成アーキテクチャを実装してみて
satorunooshie
0
570
プロダクトの成長とSREと
takuyatezuka
0
120
Efficient UI testing in Android
alexzhukovich
2
130
Google I/O 2022 Android関連概要 / Google I/O 2022 Android summary
phicdy
1
410
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
223
49k
Typedesign – Prime Four
hannesfritz
34
1.4k
How to train your dragon (web standard)
notwaldorf
60
3.9k
Building an army of robots
kneath
299
40k
We Have a Design System, Now What?
morganepeng
35
3k
Building Better People: How to give real-time feedback that sticks.
wjessup
344
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
15
3.9k
The Pragmatic Product Professional
lauravandoore
19
3.1k
Testing 201, or: Great Expectations
jmmastey
21
5.5k
What the flash - Photography Introduction
edds
63
10k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
39
13k
Support Driven Design
roundedbygravity
87
8.6k
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ͳͲͷΈʹΑΓɺ࠶ར༻ੑͷ ߴ͍෦͕࡞Γ͍͢ͷͰɺ͑͏ఔָʹͳ ͍͖ͬͯ·͢ɻ