More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to HTML5 ビギナーのための AngularJS
Similar to HTML5 ビギナーのための AngularJS (20)
More from Kenichi Kanai
Recently uploaded
Recently uploaded (16)
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