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