준비하세요 angular js 2.0

준비하세요

AngularJS 2.0

+jeado.kohaibane84@gmail.com

현재 버젼AngularJS 1.3

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

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(); 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(); element.query(selectors.join(',')) .forEach(e => options.apply(e)); } };}]);

Array<CssSelectors>

Element

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

Introspection

Ideal Development Environment

MetadataOptionalTypes

AtScript

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

function Blink(element, options, timeout) {}

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

ES5

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

ES6

TypeScriptclass Blink { public static annotations = [ new Directive({selector: '[blink]'})];

public static parameters = [ Element, Options, Timeout];

constructor(element:Element, options:Options, timeout:Timeout) { }}

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

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

AtScript != new language

AtScript = ES6 + Types + Annotations + Introspections

Template

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

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

AngularJS 2.0

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>

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

AngularJS 2.0

Property binding<div [property-name]="expression">

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

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

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

AngularJS 2.0

Databinding

Databinding to Element`s propertiesnot to Element`s attributes

<elm attr=”...”> elm.property=...

Controller

controllers2009-2014

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( ... ) { ... } }, // or // link: { // pre: function preLink(scope, iElement, iAttrs, controller) { ... }, // post: function postLink(scope, iElement, iAttrs, controller) { ... } // } // or // link: function postLink( ... ) { ... } };});

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

Directive

DDO2009-2014

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

SantaTodoApp component@ComponentDirective({ ... })class SantaTodoApp { ... }

@TemplateDirective({ ... })class NgRepeat { ... }

@DecoratorDirective({ ... })class NgClass { ... }

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

어? $scope 은 어딨지?

$scope2009-2014

컴포넌트의 모든 속성과 메소드는 템플릿에서 사용할 수 있

다.

Component is the execution context for the template

Dependency Injection

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

angular.module2009-2014

Using servicesimport {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 TabContainer { constructor(tabs:Query<TabPane>) { ... } ...}

class TabPane { constructor( tabContainer:TabContainer, element:HTMLElement ) { ... } ...}

요약

사망 : Controller, $scope, DDO, Module, jqLite

출생 : AtScript, Web Component 지원, more?

다이어트를 했다?

Angular 2.0 Source

https://github.com/angular/angular

referenceAngular 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)