More Related Content
What's hot
What's hot (14)
Similar to あの時AngularJSと出会った僕らは
Similar to あの時AngularJSと出会った僕らは (20)
More from Muyuu Fujita
More from Muyuu Fujita (14)
Recently uploaded
Recently uploaded (14)
あの時AngularJSと出会った僕らは
- 5. 密結合になりがち
- 6. {{view-update}} $(function(){ $(‘.btn’).on(‘click’, function(){ // 何か色々処理 view_update(obj); } $(‘.prefList’).on(‘change’, function(){ // 何か色々処理 view_update(obj); } });
- 11. HTMLがテンプレート
- 12. {{html-template}} <body ng-app> <h1>Hello! I’m {{‘muyuu’ + ‘!!’}}</h1> </body>
- 13. <body ng-app> <p>1 + 2 = {{1 + 2}}</p> </body> {{html-template}}
- 14. 双方向データバインディング
- 15. {{2way-data-binding}} <body ng-app> <div> <label>name:</label> <input type=‘text’ ng-model=‘myName’> </div> <p>Hello! I’m {{myName}}!!</p> </body>
- 16. <body ng-app> <div> <label>name:</label> <input type=‘text’ ng-model=‘myName’> </div> <p>Hello! I’m {{myName}}!!</p> </body> {{2way-data-binding}}
- 17. <body ng-app> <div> <label>name:</label> <input type=‘text’ ng-model=‘myName’> </div> <p>Hello! I’m {{myName}}!!</p> </body> {{2way-data-binding}}
- 18. repeat
- 19. {{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>
- 20. filter
- 21. {{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>
- 22. <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}}
- 23. <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}}
- 24. routing
- 25. {{routing}} デモ
- 26. まとめ
- 27. {{まとめ}} • 双方向データバインディングやばい • 双方向データバインディングやばい • 双方向データバインディングやばい
- 28. {{まとめ}} • htmlがテンプレートになるから分かりやすい • 双方向データバインディングやばい • ルーティング機能でSPA • htmlが進化する！
- 29. おわりに
- 30. 世はJavaScript戦国時代
- 34. わーかーるー
- 35. でもそれじゃ何も変われない