Angular 1 & 2
2015.4.28 HTML5とか勉強会
Kenichi Kanai
can_i_do_web
Web先端技術味見部
http://bit.ly/1Fq9kDe
!
AngularJS Japan User Group
http://bit.ly/1vBMMHl
now on sale.
Agenda
!
• AngularJS 1.x
• Angular 2
• vs React
AngularJS 1.x
Concepts
• ( Two-way ) Data Binding
• Template Engine
• Ajax Support
• Routing
• Test
• Security
Syntax - View
Syntax - Controller
Syntax - Result
Difference between others
!
• Fullstack
• HTML enhanced
Feature - HTML enhanced
!
Template を *.html ファイルに書ける!
// HTML は xxx.html ファイルに。
in Angular
よそのフレームワーク
// .js ファイルに書きたくない
Feature - HTML enhanced
!
Template を *.html ファイルに書ける!
HTML の構文で Template が書ける!
Feature - HTML enhanced
Feature - HTML enhanced
!
Template を *.html ファイルに書ける!
HTML の構文で Template が書ける!
Custom Directive ≒ Web Components
Feature - HTML enhanced
Angular loves Web Standards
Custom Element は x-foo
Custom Attribute は data-bar
どっちでもOK!
v 1.4.0-rc.1
• new Router ( 新機能 )
• i18n ( 改善 )
• $http ( 改善 )
• Forms ( 改善 )
• Cookies ( 改善 )
• Pluralization and Gender ( 改善 / 追加 )
Angular2
※現時点(2015.4.28)でのお話です
Keywords
• Components based
• ES6
• TypeScript
• Object.observe ( ES7 )
• Shadow DOM
• Virtual DOM
変わること
( Two-way ) Data Binding
双方向データバインディングはしない

(再考中)
R.I.P - Controllers, $scope and
angular.module
R.I.P - DDO(Directive Definition
Object)
お疲れさまでした!
Syntax
HTML Attribute -> DOM Property
Syntax binding
Angular 1.x
Angular 2
HTMLInputElement.prototype.value
Syntax event-binding
Angular 1.x
Angular 2
HTMLButtonElement.prototype.click
Syntax JavaScript
<sample-app> Tag
https://angularjs.org
https://angular.io/
vs React
JSX キモい
File Size 大きい割に…
この辺どうしてる?
• ( Two-way ) Data Binding
• Template Engine
• Ajax Support
• Routing
• Test
• Security
Thank you !
can_i_do_web

Angular1&2