あの時AngularJSと出会った僕らは
春のJavaScript祭り
{{about-me}}
名前
所属
職種
Facebook
Twitter
Blog
Mail
むゆう
フリーランス
IT僧侶, Webエンジニア
http://facebook.com/muyuu/
http://twitter.com/a...
jQueryつらい(´・_・`)
{{DOM-select}}
$(function(){
$(‘.news .btn’).on(‘click’, function(){
$(this).parent()
.next()
.find(‘.item’)
.addClass(‘sp...
密結合になりがち
{{view-update}}
$(function(){
$(‘.btn’).on(‘click’, function(){
// 何か色々処理
view_update(obj);
}
$(‘.prefList’).on(‘change’, ...
いろんなとこでDOMの更新関数
なんだかなー(´・_・`)
HTMLがテンプレート
{{html-template}}
<body ng-app>
<h1>Hello! I’m {{‘muyuu’ + ‘!!’}}</h1>
</body>
<body ng-app>
<p>1 + 2 = {{1 + 2}}</p>
</body>
{{html-template}}
双方向データバインディング
{{2way-data-binding}}
<body ng-app>
<div>
<label>name:</label>
<input type=‘text’ ng-model=‘myName’>
</div>
<p>Hello! I’m ...
<body ng-app>
<div>
<label>name:</label>
<input type=‘text’ ng-model=‘myName’>
</div>
<p>Hello! I’m {{myName}}!!</p>
</bod...
<body ng-app>
<div>
<label>name:</label>
<input type=‘text’ ng-model=‘myName’>
</div>
<p>Hello! I’m {{myName}}!!</p>
</bod...
repeat
{{repeat}}
<body ng-app=‘itemApp’>
<ul ng-controller=‘itemCtrl’>
<li ng-repeat=‘item in items’>
<p>name: {{item.name}}</p>...
filter
{{filter}}
<body ng-app="itemApp">
<input type="text" ng-model="query">
<ul ng-controller="itemCtrl">
<li ng-repeat="item ...
<body ng-app="itemApp">
<input type="text" ng-model="query">
<ul ng-controller="itemCtrl">
<li ng-repeat="item in items | ...
<body ng-app="itemApp">
<input type="text" ng-model="query">
<ul ng-controller="itemCtrl">
<li ng-repeat="item in items | ...
routing
{{routing}}
デモ
まとめ
{{まとめ}}
• 双方向データバインディングやばい
• 双方向データバインディングやばい
• 双方向データバインディングやばい
{{まとめ}}
• htmlがテンプレートになるから分かりやすい
• 双方向データバインディングやばい
• ルーティング機能でSPA
• htmlが進化する!
おわりに
世はJavaScript戦国時代
次から次に新しい
ライブラリが出てくる
「そんなにいっぱい覚えてる
時間ねーんだよ!!」
「今まだjQueryクラスのシェ
アがないから投資時間が無駄に
なるかもだし様子見」
わーかーるー
でもそれじゃ何も変われない
1歩踏み出せば必ず
何かの力になる
それを続けていけば
戦国時代を勝ち抜く力もつく
触り始めるのに敷居が凄く高い
ライブラリはそんなにない
Don’t think
Write code
あの時AngularJSと出会った僕らは
あの時AngularJSと出会った僕らは
Upcoming SlideShare
Loading in...5
×

あの時AngularJSと出会った僕らは

1,810

Published on

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,810
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
3
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

あの時AngularJSと出会った僕らは

  1. 1. あの時AngularJSと出会った僕らは 春のJavaScript祭り
  2. 2. {{about-me}} 名前 所属 職種 Facebook Twitter Blog Mail むゆう フリーランス IT僧侶, Webエンジニア http://facebook.com/muyuu/ http://twitter.com/anticyborg/ http://stackstock.net/ anticyborg@gmail.com
  3. 3. jQueryつらい(´・_・`)
  4. 4. {{DOM-select}} $(function(){ $(‘.news .btn’).on(‘click’, function(){ $(this).parent() .next() .find(‘.item’) .addClass(‘splash’); } });
  5. 5. 密結合になりがち
  6. 6. {{view-update}} $(function(){ $(‘.btn’).on(‘click’, function(){ // 何か色々処理 view_update(obj); } $(‘.prefList’).on(‘change’, function(){ // 何か色々処理 view_update(obj); } });
  7. 7. いろんなとこでDOMの更新関数
  8. 8. なんだかなー(´・_・`)
  9. 9. HTMLがテンプレート
  10. 10. {{html-template}} <body ng-app> <h1>Hello! I’m {{‘muyuu’ + ‘!!’}}</h1> </body>
  11. 11. <body ng-app> <p>1 + 2 = {{1 + 2}}</p> </body> {{html-template}}
  12. 12. 双方向データバインディング
  13. 13. {{2way-data-binding}} <body ng-app> <div> <label>name:</label> <input type=‘text’ ng-model=‘myName’> </div> <p>Hello! I’m {{myName}}!!</p> </body>
  14. 14. <body ng-app> <div> <label>name:</label> <input type=‘text’ ng-model=‘myName’> </div> <p>Hello! I’m {{myName}}!!</p> </body> {{2way-data-binding}}
  15. 15. <body ng-app> <div> <label>name:</label> <input type=‘text’ ng-model=‘myName’> </div> <p>Hello! I’m {{myName}}!!</p> </body> {{2way-data-binding}}
  16. 16. repeat
  17. 17. {{repeat}} <body ng-app=‘itemApp’> <ul ng-controller=‘itemCtrl’> <li ng-repeat=‘item in items’> <p>name: {{item.name}}</p> <p>price: {{item.price}}</p> </li> </ul> </body>
  18. 18. filter
  19. 19. {{filter}} <body ng-app="itemApp"> <input type="text" ng-model="query"> <ul ng-controller="itemCtrl"> <li ng-repeat="item in items | filter:query"> <p>name: {{item.name}}</p> <p>price: {{item.price}}</p> </li> </ul> </body>
  20. 20. <body ng-app="itemApp"> <input type="text" ng-model="query"> <ul ng-controller="itemCtrl"> <li ng-repeat="item in items | filter:query"> <p>name: {{item.name}}</p> <p>price: {{item.price}}</p> </li> </ul> </body> {{filter}}
  21. 21. <body ng-app="itemApp"> <input type="text" ng-model="query"> <ul ng-controller="itemCtrl"> <li ng-repeat="item in items | filter:query"> <p>name: {{item.name}}</p> <p>price: {{item.price}}</p> </li> </ul> </body> {{filter}}
  22. 22. routing
  23. 23. {{routing}} デモ
  24. 24. まとめ
  25. 25. {{まとめ}} • 双方向データバインディングやばい • 双方向データバインディングやばい • 双方向データバインディングやばい
  26. 26. {{まとめ}} • htmlがテンプレートになるから分かりやすい • 双方向データバインディングやばい • ルーティング機能でSPA • htmlが進化する!
  27. 27. おわりに
  28. 28. 世はJavaScript戦国時代
  29. 29. 次から次に新しい ライブラリが出てくる
  30. 30. 「そんなにいっぱい覚えてる 時間ねーんだよ!!」
  31. 31. 「今まだjQueryクラスのシェ アがないから投資時間が無駄に なるかもだし様子見」
  32. 32. わーかーるー
  33. 33. でもそれじゃ何も変われない
  34. 34. 1歩踏み出せば必ず 何かの力になる
  35. 35. それを続けていけば 戦国時代を勝ち抜く力もつく
  36. 36. 触り始めるのに敷居が凄く高い ライブラリはそんなにない
  37. 37. Don’t think Write code
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×