AngularJS 2.0 aims to improve performance, support modern web standards like ES6, and have an easier programming model compared to AngularJS 1.x. Key changes include dropping controllers and scopes in favor of components as the fundamental building block. Templates will use property and event binding rather than directives. AtScript is a new syntax that adds types, annotations and introspection to ES6 for better development experience.

1. 준비하세요
AngularJS 2.0

2. +jeado.ko
haibane84@gmail.com

3. 현재 버젼
AngularJS 1.3

4. Motivation for AngularJS 2.0
● 성능
● 웹의 변화
● 쓰기 편함

5. 성능
최초 AngularJS는 디자이너를 위해 만들어 졌
다.

6. 웹의 변화
ES6
Web Components
● Custom Elements
● HTML Imports
● Template Element
● Shadow Dom

7. 쓰기 어려움
출처 http://www.bennadel.com/blog/2439-my-experience-with-angularjs-
the-super-heroic-javascript-mvw-framework.htm

8. AngularJS 2.0의 새로운 기능

9. AtScript

10. AtScript?
언어를 만드는거냐?
더 어렵게 만들려는 수작이야?

12. module.directive('blink',
['$timeout', function($timeout) {
return {
require: 'options',
restrict: 'A',
link: function(_,element,__,options){
var selectors = someThirdPartyAPI();
element.query(selectors.join(','))
.forEach(e => options.apply(e));
}
};
}]);

13. module.directive('blink',
['$timeout', function($timeout) {
return {
require: 'options',
restrict: 'A',
link: function(_,element,__,options){
var selectors = someThirdPartyAPI();
element.query(selectors.join(','))
.forEach(e => options.apply(e));
}
};
}]);

14. module.directive('blink',
['$timeout', function($timeout) {
return {
require: 'options',
restrict: 'A',
link: function(_,element,__,options){
var selectors = someThirdPartyAPI();
element.query(selectors.join(','))
.forEach(e => options.apply(e));
}
};
}]);
Array<CssSelectors>
Element

15. @Directive({
selector: ['[blink]']
})
class Blink {
constructor(element:Element,
options:Options,
timeout:Timeout) {
var selectors:Array<CssSelectors> =
someThirdPartyAPI();
element.query(selectors.join(','))
.forEach(e => options.apply(e));
}
}

16. Ideal Development Environment
Optional Metadata
Types
AtScript
Introspection

17. ES3 '99
- try/catch
- RegExp
ES4 '07
- Types
- Classes
- Modules
- (other)
ES5 '09
- strict mode
ES6 '15
- Classes
- Modules
- (other)
ES? '??
- Types
- Annotation
- Introspection

18. AtScript
- Annotations
- Introspection
TypeScript
- Types
ES6
- classes
- modules
ES5

19. ES5
function Blink(element,
options,
timeout) {
}
Blink.annotations = [
new Directive({selector: '[blink]'})];
Blink.parameters = [
Element, Options, Timeout];

20. ES6
class Blink {
constructor(element,
options,
timeout) {
}
}
Blink.annotations = [
new Directive({selector: '[blink]'})];
Blink.parameters = [
Element, Options, Timeout];

21. TypeScript
class Blink {
public static annotations = [
new Directive({selector: '[blink]'})];
public static parameters = [
Element, Options, Timeout];
constructor(element:Element,
options:Options,
timeout:Timeout) { }
}

22. AtScript
@Directive({
selector: '[blink]'
})
class Blink {
constructor(element:Element,
options:Options,
timeout:Timeout) {
}
}

23. CoffeeScript
class Blink {
@annotations = [
new Directive({selector: '[blink]'})];
@parameters = [
Element, Options, Timeout];
constructor: (element, options, timeout){
}
}

24. AtScript != new language
AtScript = ES6
+ Types
+ Annotations
+ Introspections

25. Template

27. AngularJS 1.3
<div ng-controller="SantaTodoController">
<input type="text" ng-model="newTodoTitle">
<button ng-click="addTodo()">+</button>
<tab-container>
<tab-pane title="Tobias">
<div ng-repeat="todo in todosOf('tobias')">
<input type="checkbox"
ng-model="todo.done">
{{todo.title}}
<button ng-click="deleteTodo(todo)">
X
</button>
</div>
</tab-pane>
...

28. AngularJS 2.0
<div>
<input type="text" [value]="newTodoTitle">
<button (click)="addTodo()">+</buton>
<tab-container>
<tab-pane title="Good kids">
<div [ng-repeat|todo]="todosOf('good')">
<input type="checkbox"
[checked]="todo.done">
{{todo.title}}
<button (click)="deleteTodo(todo)">
X
</button>
</div>
</tab-pane>
...

29. Event binding
<button (click)="doSomething()">click me</button>
<div (^click)="doSomithing">
<img src="..."><span>text</span>
</div>
<zippy #zippy title="Greeting">
Body of the text which is shown conditionally.
<a href (hover)="zippy.close()">hover to close</a>.
</zippy>
<button (click)="zippy.toggle()">toggle</button>

30. AngularJS 2.0
<div>
<input type="text" [value]="newTodoTitle">
<button (click)="addTodo()">+</buton>
<tab-container>
<tab-pane title="Good kids">
<div [ng-repeat|todo]="todosOf('good')">
<input type="checkbox"
[checked]="todo.done">
{{todo.title}}
<button (click)="deleteTodo(todo)">
X
</button>
</div>
</tab-pane>
...

31. Property binding
<div [property-name]="expression">
<div [ng-repeat|person]="people">
<span [text]="person.name"></span>
</div>

32. AngularJS 2.0
<div>
<input type="text" [value]="newTodoTitle">
<button (click)="addTodo()">+</buton>
<tab-container>
<tab-pane title="Good kids">
<div [ng-repeat|todo]="todosOf('good')">
<input type="checkbox"
[checked]="todo.done">
{{todo.title}}
<button (click)="deleteTodo(todo)">
X
</button>
</div>
</tab-pane>
...

33. AngularJS 2.0
<div>
<input type="text" [value]="newTodoTitle">
<button (click)="addTodo()">+</buton>
<tab-container>
<tab-pane title="Good kids">
<div [ng-repeat|todo]="todosOf('good')">
<input type="checkbox"
[checked]="todo.done">
{{todo.title}}
<button (click)="deleteTodo(todo)">
X
</button>
</div>
</tab-pane>
...

34. Databinding
Databinding to
Element`s properties
not to
Element`s attributes
<elm attr=”...”> elm.property=...

35. Controller

36. controllers
2009-2014

37. Components
= Building block
(LEGO)

38. <ng-search-icon>
<ng-paper-fab>
<ng-drawer-panel>
<ng-field>

39. Directive Definition Object ("DDO")
myModule.directive('directiveName', function factory(injectables) {
return {
priority: 0,
template: '<div></div>', // or // function(tElement, tAttrs) { ... },
// or
// templateUrl: 'directive.html', // or // function(tElement, tAttrs) { ... },
transclude: false,
restrict: 'A',
templateNamespace: 'html',
scope: false,
controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ...
},
controllerAs: 'stringAlias',
require: 'siblingDirectiveName', // or // ['^parentDirectiveName', '?
optionalDirectiveName', '?^optionalParent'],
compile: function compile(tElement, tAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) { ... },
post: function postLink(scope, iElement, iAttrs, controller) { ... }
}
// or
// return function postLink( ... ) { ... }

40. Component = Directive …
그 지저분한 Directive 만 가지고
만들라고?

41. Directive

42. DDO
2009-2014

43. SantaTodoApp component
@ComponentDirective
class SantaTodoApp {
constructor() {
this.newTodoTitle = '';
}
addTodo: function() { ... }
removeTodo: function(todo) { ... }
todosOf: function(filter) { ... }
}

44. SantaTodoApp component
@ComponentDirective({ ... })
class SantaTodoApp { ... }
@TemplateDirective({ ... })
class NgRepeat { ... }
@DecoratorDirective({ ... })
class NgClass { ... }

45. SantaTodoApp component
@ComponentDirective
class SantaTodoApp {
constructor() {
this.newTodoTitle = '';
}
addTodo: function() { ... }
removeTodo: function(todo) { ... }
todosOf: function(filter) { ... }
}

46. 어? $scope 은 어딨지?

47. $scope
2009-2014

48. Component is the execution
context for the template
컴포넌트의 모든 속성과 메소
드는 템플릿에서 사용할 수 있
다.

49. Dependency Injection

50. Defining services
class TodoStore {
constructor(win:Window) {
this.win = win;
}
add(todo) {
// access this.win.localStorage ...
}
remove(todo) { ... }
todosOf(filter) { ... }
}

51. angular
.module
2009-2014

52. Using services
import {TodoStore} from './store';
@ComponentDirective({
directives: [TabContainer, TabPane, NgRepeat]
})
class SantaTodoApp {
constructor(store:TodoStore) {
...
}
...
}

53. Directives and DI
<tab-container>
<tab-pane title="Tobias">
New Macbook Pro
Tesla Model X
...
</tab-pane>
<tab-pane title="Good kids">
...
</tab-pane>
<tab-pane title="Bad kids">
...
</tab-pane>
</tab-container>

54. Directives and DI
class TabPane {
constructor(
tabContainer:TabContainer,
element:HTMLElement
) { ... }
...
}
class TabContainer {
constructor(tabs:Query<TabPane>) { ... }
...
}

55. 요약
사망 : Controller, $scope, DDO, Module, jqLite
출생 : AtScript, Web Component 지원, more?
다이어트를 했다?

56. Angular 2.0 Source
https://github.com/angular/angular

57. reference
Angular 2.0 Core by Igor Minar & Tobias Bosch at ng-europe 2014(Youtube)
Miško Hevery - Keynote on AtScript at ng-europe 2014 (Youtube)
Angular v2 Template Syntax Summary (Google Doc)
Databinding with Web Components (Google Doc)