Recommended
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 (7)
あの時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. でもそれじゃ何も変われない