준비하세요 Angular js 2.0

준비하세요
AngularJS 2.0

+jeado.ko
haibane84@gmail.com

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

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

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

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

AngularJS 2.0의 새로운 기능

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

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));
}
};
}]);

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

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

Ideal Development Environment
Optional Metadata
Types
AtScript
Introspection

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

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

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

ES6
class Blink {
constructor(element,
options,
timeout) {
}
}
Blink.annotations = [
Blink.parameters = [

TypeScript
class Blink {
public static annotations = [
public static parameters = [
options:Options,
timeout:Timeout) { }
}

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

CoffeeScript
class Blink {
@annotations = [
@parameters = [
constructor: (element, options, timeout){
}
}

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

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>
...

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>
...

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>

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

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

Components
= Building block
(LEGO)

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

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( ... ) { ... }

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

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

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

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

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

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

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>

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

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

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

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)

준비하세요 Angular js 2.0

More Related Content

What's hot

Viewers also liked

Similar to 준비하세요 Angular js 2.0

Recently uploaded

준비하세요 Angular js 2.0