Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (14)
Ähnlich wie あの時AngularJSと出会った僕らは
Ähnlich wie あの時AngularJSと出会った僕らは (20)
Mehr von Muyuu Fujita
Mehr von Muyuu Fujita (14)
Kürzlich hochgeladen
Kürzlich hochgeladen (10)
あの時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. でもそれじゃ何も変われない