Post on 12-Jul-2015
준비하세요
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)