Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AngularJSのご紹介

B9dd885e3ef94ac5e0bcfdf4800ba703?s=47 tmaeda
July 27, 2013
Programming
12
5.6k

 AngularJSのご紹介

B9dd885e3ef94ac5e0bcfdf4800ba703?s=128

tmaeda

July 27, 2013
Tweet

More Decks by tmaeda

See All by tmaeda
B9dd885e3ef94ac5e0bcfdf4800ba703?s=48 tmaedax
7
1.1k
B9dd885e3ef94ac5e0bcfdf4800ba703?s=48 tmaedax
1
860
B9dd885e3ef94ac5e0bcfdf4800ba703?s=48 tmaedax
2
1.6k
B9dd885e3ef94ac5e0bcfdf4800ba703?s=48 tmaedax
18
10k
B9dd885e3ef94ac5e0bcfdf4800ba703?s=48 tmaedax
3
840

Other Decks in Programming

See All in Programming
E66449b8260b07a1cf51c5ab5eaa8180?s=48 dunglas
5
5.4k
7b606c5039f083d13e2d2320ce6ddcfa?s=48 dqneo
0
100
9184d05c3493636df20a38b8bcfd66df?s=48 kazuhei0108
3
950
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
6
710
Dee9a95c0e5483692c54cc5e60e8b09e?s=48 yusuke57
2
280
14d83dc17e2c893d7564b609ff8da4ca?s=48 techharmony
0
160
81689b093f75cf3f383e581ca57188df?s=48 minecr
0
120
Ba0adbbfa699d09f6ee7b4402e4dcf9f?s=48 kulkarniankita09
0
270
5b3338b3676d4f7091a575e584f3a4f4?s=48 coe401_
3
160
438799c739f93d00abc30fa2da33c543?s=48 rukiadia
3
870
8673a339e4002704b42bc66c43c65445?s=48 scrpgil
0
100
993ef638264def4334358f986fb4a91d?s=48 uhyo
19
9.2k

Featured

See All Featured
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
8
590
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
167
7.3k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
32
3.5k
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
776
200k
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
613
55k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
193
8.7k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1346
200k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
155
11k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
359
62k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
71
270k
11c84dff30266b907714802088852677?s=48 jasonvnalue
81
8.1k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
258
36k

Transcript

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

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

    w +BWBTDSJQUͷ͜ͱ͸ྑ͘஌Γ·ͤΜͷͰɺ͓खॊΒ͔ʹɻ

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

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

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

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

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

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

  9. ͸͡Ίͯͷ"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>

  10. ͸͡Ίͯͷ"OHVMBS+4

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

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

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

  14. ͸͡Ίͯͷ"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>

  15. ͳΜͰʁʁʁ

  16. ίϯύΠϧޙ <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>

  17. ίϯύΠϧޙ

  18. ͭ·Γʁ

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

    View {{name}} <input>

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

    View {{name}} <input> "OHVMBS͸ಠ ࣗʹ)5.-λάΛ ఆٛ͢Δ࢓૊ΈΛ ఏڙ͍ͯ͠Δ

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

    View {{name}} <input> "OHVMBS ͸QVSF )5.-Λ ίϯύΠϧ ͯ͠.7Λ ࣗಈੜ੒͢ Δ

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

    View {{name}} <input> 7ͱ.͸૒ํ޲ʹ ઀ଓ͞Ε͍ͯΔ

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

    View {{name}} <input> .PEFM͸ͲΜͳσ ʔλߏ଄Ͱ΋ྑ͍ ಛघͳΫϥεΛܧঝ͢ Δඞཁ͸ͳ͍

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

    View {{name}} <input> 7JFX͸ςΩετͰ ͸ͳ͘ੜ͖ͨΦϒδΣΫ τͰ͋Δ

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

    શମΛඳը͠௚͠

  26. Browser "OHVMBSͷ7JFX model View template Angular $compile ඳը݁Ռ NPEFMΛมߋ͢Δͱɺͦͷมߋ ʹؔ܎͋Δ෦෼͚ͩॻ͖มΘΔ

    ※͋·Γਖ਼֬ͳֆ͡Όͳ͍Ͱ͢ɺ͢Έ·ͤΜɻ֓೦͚ͩ἞Έऔ͍ͬͯͩ͘͞ɻ

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

    View {{name}} <input> 7JFX͸ςΩετͰ ͸ͳ͘ੜ͖ͨΦϒδΣΫ τͰ͋Δ

  28. ͸͡Ίͯͷ"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>

  29. ͸͡Ίͯͷ"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> શ͘ແବͷͳ͘௚ ײతͳهड़

  30. ྫ͑͹CBDLCPOFͩͱ <input id="new-todo" type="text"> events: { "keypress #new-todo": "createOnEnter", createOnEnter:

    function(e) { ... Todos.create({title: this.input.val()}); ... }, template: controller:

  31. ྫ͑͹CBDLCPOFͩͱ <input id="new-todo" type="text"> events: { "keypress #new-todo": "createOnEnter", createOnEnter:

    function(e) { ... Todos.create({title: this.input.val()}); ... }, template: controller: ݁ͼ͚ͭΔͨΊ͚ͩ ʹJEఆٛͯ͠

  32. ྫ͑͹CBDLCPOFͩͱ <input id="new-todo" type="text"> events: { "keypress #new-todo": "createOnEnter", createOnEnter:

    function(e) { ... Todos.create({title: this.input.val()}); ... }, template: controller: 7JFX ͔ΒσʔλΛऔΓ ग़ͯ͠ɺϞσϧʹೖ ΕΔॲཧ΋ࣗ෼Ͱ ॻ͍ͯ

  33. ྫ͑͹CBDLCPOFͩͱ <input id="new-todo" type="text"> events: { "keypress #new-todo": "createOnEnter", createOnEnter:

    function(e) { ... Todos.create({title: this.input.val()}); ... }, template: controller: ݁ͼ͚ͭΔ

  34. ͸͡Ίͯͷ"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> શ͘ແବͷͳ͘௚ ײతͳهड़

  35. ϧʔϓͱ͔͸ʁ

  36. ུ <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> ུ

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

  38. ུ <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> ུ

  39. %%Ͱฒ΂ସ͑

  40. <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"> ฒ΂ସ͑Ͱ͖ΔΑ͏ʹ͠·͢Αɻ ͦΕʹΑͬͯɺฒͼมΘΔϞσϧ͸͜ΕͰ͢Αɻ ʢશ͘ແବͷͳ͍هड़ʣ

  41. άϦου

  42. <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/

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

    wSPVUFS wQSPNJTF R wIUUQSFTPVSDF wUFTUJOH w

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

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

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

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

    ଟ͍

  48. "OHVMBS+4ͷར఺ wϑϨʔϜϫʔΫ͔ΒΫϦʔϯͳίʔυΛॻ͔ͳ͖ Ό͍͚ͳ͍ѹྗΛड͚Δ ඪ४Ͱ༻ҙ͞Ε͍ͯΔ ػೳͰ͸.7 ʹ߹Θͳ͍ίʔυ͸جຊతʹॻ͚ͳ ͍ ͷͰɺίʔυ͕៉ྷʹͳΓ΍͍͢ɻ w%*΍%JSFDUJWFͳͲͷڧྗͳ෦඼Խػߏͷ͓͔͛ Ͱ෦඼ͷ࠶ར༻͕͠΍͍͢ɻඇৗʹ୹͍ίʔυͰ

    Ϧονͳػೳ͕࣮ݱͰ͖Δɻࠓޙɺࣗ࡞΍Φʔϓ ϯιʔεͷ෦඼ͷࢿ࢈͕ͨ·͍ͬͯ͘ͱͲΜͲΜ ָʹͳ͍ͬͯ͘͜ͱ͕ݟࠐ·ΕΔɻ

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