Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

준비하세요 Angular js 2.0

6,403 views

Published on

2014 GDG Korea DevFair 에서 발표한 AngularJS 2.0 자료

Published in: Technology
  • Be the first to comment

준비하세요 Angular js 2.0

  1. 1. 준비하세요 AngularJS 2.0
  2. 2. +jeado.ko haibane84@gmail.com
  3. 3. 현재 버젼 AngularJS 1.3
  4. 4. Motivation for AngularJS 2.0 ● 성능 ● 웹의 변화 ● 쓰기 편함
  5. 5. 성능 최초 AngularJS는 디자이너를 위해 만들어 졌 다.
  6. 6. 웹의 변화 ES6 Web Components ● Custom Elements ● HTML Imports ● Template Element ● Shadow Dom
  7. 7. 쓰기 어려움 출처 http://www.bennadel.com/blog/2439-my-experience-with-angularjs- the-super-heroic-javascript-mvw-framework.htm
  8. 8. AngularJS 2.0의 새로운 기능
  9. 9. AtScript
  10. 10. AtScript? 언어를 만드는거냐? 더 어렵게 만들려는 수작이야?
  11. 11. 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)); } }; }]);
  12. 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. 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)); } }; }]); Array<CssSelectors> Element
  14. 14. @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)); } }
  15. 15. Ideal Development Environment Optional Metadata Types AtScript Introspection
  16. 16. ES3 '99 - try/catch - RegExp ES4 '07 - Types - Classes - Modules - (other) ES5 '09 - strict mode ES6 '15 - Classes - Modules - (other) ES? '?? - Types - Annotation - Introspection
  17. 17. AtScript - Annotations - Introspection TypeScript - Types ES6 - classes - modules ES5
  18. 18. ES5 function Blink(element, options, timeout) { } Blink.annotations = [ new Directive({selector: '[blink]'})]; Blink.parameters = [ Element, Options, Timeout];
  19. 19. ES6 class Blink { constructor(element, options, timeout) { } } Blink.annotations = [ new Directive({selector: '[blink]'})]; Blink.parameters = [ Element, Options, Timeout];
  20. 20. TypeScript class Blink { public static annotations = [ new Directive({selector: '[blink]'})]; public static parameters = [ Element, Options, Timeout]; constructor(element:Element, options:Options, timeout:Timeout) { } }
  21. 21. AtScript @Directive({ selector: '[blink]' }) class Blink { constructor(element:Element, options:Options, timeout:Timeout) { } }
  22. 22. CoffeeScript class Blink { @annotations = [ new Directive({selector: '[blink]'})]; @parameters = [ Element, Options, Timeout]; constructor: (element, options, timeout){ } }
  23. 23. AtScript != new language AtScript = ES6 + Types + Annotations + Introspections
  24. 24. Template
  25. 25. 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> ...
  26. 26. 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> ...
  27. 27. 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>
  28. 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. 29. Property binding <div [property-name]="expression"> <div [ng-repeat|person]="people"> <span [text]="person.name"></span> </div>
  30. 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. 31. 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> ...
  32. 32. Databinding Databinding to Element`s properties not to Element`s attributes <elm attr=”...”> elm.property=...
  33. 33. Controller
  34. 34. controllers 2009-2014
  35. 35. Components = Building block (LEGO)
  36. 36. <ng-search-icon> <ng-paper-fab> <ng-drawer-panel> <ng-field>
  37. 37. 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( ... ) { ... }
  38. 38. Component = Directive … 그 지저분한 Directive 만 가지고 만들라고?
  39. 39. Directive
  40. 40. DDO 2009-2014
  41. 41. SantaTodoApp component @ComponentDirective class SantaTodoApp { constructor() { this.newTodoTitle = ''; } addTodo: function() { ... } removeTodo: function(todo) { ... } todosOf: function(filter) { ... } }
  42. 42. SantaTodoApp component @ComponentDirective({ ... }) class SantaTodoApp { ... } @TemplateDirective({ ... }) class NgRepeat { ... } @DecoratorDirective({ ... }) class NgClass { ... }
  43. 43. SantaTodoApp component @ComponentDirective class SantaTodoApp { constructor() { this.newTodoTitle = ''; } addTodo: function() { ... } removeTodo: function(todo) { ... } todosOf: function(filter) { ... } }
  44. 44. 어? $scope 은 어딨지?
  45. 45. $scope 2009-2014
  46. 46. Component is the execution context for the template 컴포넌트의 모든 속성과 메소 드는 템플릿에서 사용할 수 있 다.
  47. 47. Dependency Injection
  48. 48. Defining services class TodoStore { constructor(win:Window) { this.win = win; } add(todo) { // access this.win.localStorage ... } remove(todo) { ... } todosOf(filter) { ... } }
  49. 49. angular .module 2009-2014
  50. 50. Using services import {TodoStore} from './store'; @ComponentDirective({ directives: [TabContainer, TabPane, NgRepeat] }) class SantaTodoApp { constructor(store:TodoStore) { ... } ... }
  51. 51. 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>
  52. 52. Directives and DI class TabPane { constructor( tabContainer:TabContainer, element:HTMLElement ) { ... } ... } class TabContainer { constructor(tabs:Query<TabPane>) { ... } ... }
  53. 53. 요약 사망 : Controller, $scope, DDO, Module, jqLite 출생 : AtScript, Web Component 지원, more? 다이어트를 했다?
  54. 54. Angular 2.0 Source https://github.com/angular/angular
  55. 55. 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)

×