Your SlideShare is downloading. ×
  • Like
あの時AngularJSと出会った僕らは
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 1,579 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,579
On SlideShare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
2
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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