Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (20)
Similaire à HTML5 ビギナーのための AngularJS
Similaire à HTML5 ビギナーのための AngularJS (20)
Plus de Kenichi Kanai
Dernier
Dernier (9)
HTML5 ビギナーのための AngularJS
- 1. HTML5 ビギナーのための AngularJS 2014.11.27
- 2. About me ! 金井 健一 / Kenichi Kanai ! ! ! @can_i_do_web ! Web先端技術味見部部長 AngularJS Japan User Group
- 3. Now On Sale.
- 4. Agenda • About AngularJS • Data Binding • Template Engine • Directive / Filter • Conclusion
- 6. About AngularJS • for Web Application • Fullstack • HTML enhanced
- 7. Others etc…
- 8. Trends
- 9. About AngularJS • Data Binding • Template Engine • Routing • Ajax Support • Test • Security • DI ( Dependency Injection ) • Service / Directive / Filter
- 10. About AngularJS • Data Binding • Template Engine • Routing • Ajax Support • Test • Security • DI ( Dependency Injection ) • Service / Directive / Filter 今日はコレだけ！
- 11. Data Binding コレを ココに
- 12. Data Binding By jQuery <body> <input type="text" id="someWord"> <p>Hello <span id=“greeting"></span></p> </body> $('#someWord').on('keyup', function(event){ var textBoxValue = $(this).val(); $('#greeting').html(textBoxValue); }); HTML JavaScript
- 13. Data Binding By AngularJS <body> <input type="text" ng-model=“greeting”> <p>Hello <span ng-bind=“greeting”></span></p> </body> // no code. HTML JavaScript
- 14. Template Engine <ul> @for(order <- orders) { <li>@order.title</li> } </ul> <ul> <% writers.each do |writer| %> <li><%= writer %></li> <% end %> Play Framework </ul> Ruby on Rails <ul> <% foreach ($this->data as $d): %> <li><%=$d[‘title']%> & <%=$d[‘description']%></li> <% endforeach %> </ul> PHP
- 15. Template Engine
- 16. Template Engine <ul> <li ng-repeat=“person in list”> <p ng-bind=“person”></p> </li> </ul> AngularJS
- 17. Template Engine <body> <input type="text" ng-model=“myModel”> <p>Hello <span ng-bind=“myModel”></span></p> </body> HTML の要素に カスタム属性 として定義 ※ 一部、カスタム要素でも定義できたりする HTML
- 18. Service / Directive / Filter • Directive 超ざっくり！ • AngularJS 流 カスタム要素・カスタム属性 ( 最初から70 個くらい用意されている！) • Filter • 表示項目の一時的なフィルタリング ex）201411271930 -> 2014/11/27 19:30
- 19. Service / Directive / Filter Filter Directive
- 20. Service / Directive / Filter built-in-Directive <input type=“checkbox” ng-model=“checked”> <p ng-show=“checked”>こんにちわ</p> <p ng-hide=“checked”>こんばんわ</p>
- 21. Service / Directive / Filter <div ng-init=“model = 123.456”> <p ng-bind=“model | number: 1”></p> </div> Filter 123.5 Browser
- 22. Service / Directive / Filter 超ざっくり！ それでも足りなければ作りましょう！
- 24. Web Components
- 25. Web Components
- 26. Web Components <x-twitter-button ( type=“tweet” )> default <x-twitter-button type=“follow”> <x-twitter-button type=“hashtag”> <x-twitter-button type=“mention”>
- 27. Web Components <body> <header></header> <x-user></x-user> <x-trend></x-trend> <x-timeline></x-timeline> <x-recommend-user></x-recommend-user> <footer></footer> </body>
- 28. Web Components <header> <x-user> <x-trend> <x-timeline> <x-recommend -user> <footer>
- 29. Web Components
- 30. Web Components AngularJS で Web Components の予習ができる！
- 31. Conclusion • Data Binding が超簡単 • Template は HTML 拡張なのでわかりやすい • Directive っていうカスタム要素・属性 • Filter 便利！ ビギナー向けまとめ そこから先はまた別の機会に！
- 32. Conclusion わからないことがあれば！ AngularJS Japan User Group #ng_jp