Download as PDF, PPTX
![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](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2fangularjs-141127050623-conversion-gate01%2f75%2fHTML5-AngularJS-14-2048.jpg&f=jpg&w=240)
Recommended
More Related Content
What's hot
Viewers also liked
Similar to HTML5 ビギナーのための AngularJS
More from Kenichi Kanai
HTML5 ビギナーのための AngularJS
- 1.HTML5 ビギナーのための AngularJS2014.11.27
- 2.About me !金井 健一 / Kenichi Kanai ! ! ! @can_i_do_web ! Web先端技術味見部部長 AngularJS Japan User Group
- 3.
- 4.Agenda • AboutAngularJS • Data Binding • Template Engine • Directive / Filter • Conclusion
- 6.About AngularJS •for Web Application • Fullstack • HTML enhanced
- 7.
- 8.
- 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.
- 12.Data Binding ByjQuery <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 ByAngularJS <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.
- 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 超ざっくり！ それでも足りなければ作りましょう！
- 23.
- 24.
- 25.
- 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.
- 30.Web Components AngularJSで Web Components の予習ができる！
- 31.Conclusion • DataBinding が超簡単 • Template は HTML 拡張なのでわかりやすい • Directive っていうカスタム要素・属性 • Filter 便利！ ビギナー向けまとめ そこから先はまた別の機会に！
- 32.Conclusion わからないことがあれば！ AngularJSJapan User Group #ng_jp
- 33.