1.
Angular 1 & 2
2015.4.28 HTML5とか勉強会

2.
Kenichi Kanai
can_i_do_web

3.
Web先端技術味見部
http://bit.ly/1Fq9kDe

4.
!
AngularJS Japan User Group
http://bit.ly/1vBMMHl

5.
now on sale.

6.
Agenda
!
• AngularJS 1.x
• Angular 2
• vs React

7.
AngularJS 1.x

8.
Concepts
• ( Two-way ) Data Binding
• Template Engine
• Ajax Support
• Routing
• Test
• Security

9.
Syntax - View

10.
Syntax - Controller

11.
Syntax - Result

12.
Difference between others
!
• Fullstack
• HTML enhanced

13.
Feature - HTML enhanced
!
Template を *.html ファイルに書ける！

14.
// HTML は xxx.html ファイルに。
in Angular

15.
よそのフレームワーク
// .js ファイルに書きたくない

16.
Feature - HTML enhanced
!
Template を *.html ファイルに書ける！
HTML の構文で Template が書ける！

17.
Feature - HTML enhanced

18.
Feature - HTML enhanced
!
Template を *.html ファイルに書ける！
HTML の構文で Template が書ける！
Custom Directive ≒ Web Components

19.
Feature - HTML enhanced

20.
Angular loves Web Standards

21.
Custom Element は x-foo
Custom Attribute は data-bar

22.
どっちでもOK!

23.
v 1.4.0-rc.1
• new Router ( 新機能 )
• i18n ( 改善 )
• $http ( 改善 )
• Forms ( 改善 )
• Cookies ( 改善 )
• Pluralization and Gender ( 改善 / 追加 )

24.
Angular2

25.
※現時点(2015.4.28)でのお話です

26.
Keywords
• Components based
• ES6
• TypeScript
• Object.observe ( ES7 )
• Shadow DOM
• Virtual DOM

27.
変わること

28.
( Two-way ) Data Binding
双方向データバインディングはしない
(再考中)

29.
R.I.P - Controllers, $scope and
angular.module

30.
R.I.P - DDO(Directive Definition
Object)

31.
お疲れさまでした！

32.
Syntax
HTML Attribute -> DOM Property

33.
Syntax binding
Angular 1.x
Angular 2
HTMLInputElement.prototype.value

34.
Syntax event-binding
Angular 1.x
Angular 2
HTMLButtonElement.prototype.click

35.
Syntax JavaScript
<sample-app> Tag

36.
https://angularjs.org

37.
https://angular.io/

38.
vs React

39.
JSX キモい

40.
File Size 大きい割に…

41.
この辺どうしてる？
• ( Two-way ) Data Binding
• Template Engine
• Ajax Support
• Routing
• Test
• Security

42.
Thank you !
can_i_do_web