Building Universal Applications with Angular 2

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=47 Minko Gechev
November 07, 2015

Building Universal Applications with Angular 2

Angular is one of the most popular frameworks for the development of Single-Page Applications (SPA). Recently Google announced its second major version, which brings some brand new ideas and improvements. For instance, Angular 2 is written in TypeScript, has much faster change detection and allows development of universal (isomorphic) applications.

In this talk we're going to introduce the motivation behind the new design decisions and the improvements in Angular 2. We'll take a look at the building blocks the framework provides for the development of professional single-page applications.

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=128

Minko Gechev

November 07, 2015
Tweet

Transcript

  1. 2.
  2. 4.

    Agenda What is Angular? What’s wrong with Angular 2? Introduction

    to Angular 2 Why Angular 2 is awesome? Should I use Angular 2 in my next project?
  3. 5.

    Agenda What is Angular 2? What’s wrong with Angular 2?

    What are the core concepts of Angular 2? Why Angular 2 is awesome? Should I use Angular 2 in my next project?
  4. 6.

    Agenda What is Angular 2? What’s wrong with Angular 2?

    What are the core concepts of Angular 2? Why Angular 2 is awesome? Should I use Angular 2 in my next project?
  5. 7.

    Agenda What is Angular 2? What’s wrong with Angular 2?

    What are the core concepts of Angular 2? Why Angular 2 is awesome? Should I use Angular 2 in my next project?
  6. 8.

    Agenda What is Angular 2? What’s wrong with Angular 2?

    What are the core concepts of Angular 2? Why Angular 2 is awesome? Should I use Angular 2 in my next project?
  7. 9.

    Agenda What is Angular 2? What’s wrong with Angular 2?

    What are the core concepts of Angular 2? Why Angular 2 is awesome? Should I use Angular 2 in my next project?
  8. 11.
  9. 12.
  10. 13.

    Core concepts of Angular 2 • Directives • Components •

    Pipes • Services • Dependency Injection
  11. 16.

    tooltip.ts @Directive({ selector: '[tooltip]', inputs: ['tooltip'], host: { '(mouseenter)': 'onMouseEnter()',

    '(mouseleave)': 'onMouseLeave()' } }) export class Tooltip { private overlay:Overlay; private tooltip:string; constructor(private el:ElementRef, manager: OverlayManager) { this.el = el; this.overlay = manager.get(); } onMouseEnter() { this.overlay.open(this.el, this.tooltip); } onMouseLeave() { this.overlay.close(); } }
  12. 17.

    tooltip.ts @Directive({ selector: '[tooltip]', inputs: ['tooltip'], host: { '(mouseenter)': 'onMouseEnter()',

    '(mouseleave)': 'onMouseLeave()' } }) export class Tooltip { private overlay:Overlay; private tooltip:string; constructor(private el:ElementRef, manager: OverlayManager) { this.el = el; this.overlay = manager.get(); } onMouseEnter() { this.overlay.open(this.el, this.tooltip); } onMouseLeave() { this.overlay.close(); } }
  13. 18.

    tooltip.ts @Directive({ selector: '[tooltip]', inputs: ['tooltip'], host: { '(mouseenter)': 'onMouseEnter()',

    '(mouseleave)': 'onMouseLeave()' } }) export class Tooltip { private overlay:Overlay; private tooltip:string; constructor(private el:ElementRef, manager: OverlayManager) { this.el = el; this.overlay = manager.get(); } onMouseEnter() { this.overlay.open(this.el, this.tooltip); } onMouseLeave() { this.overlay.close(); } }
  14. 21.
  15. 22.
  16. 27.
  17. 29.

    tooltip.js var Tooltip = ng.Directive({ selector: '[tooltip]', inputs: ['tooltip'], host:

    { '(mouseenter)': 'onMouseEnter()', '(mouseleave)': 'onMouseLeave()' } }) .Class({ constructor: [ng.Inject(ng.ElementRef), ng.Inject(OverlayManager), function (tooltip, el, manager) { this.el = el; this.overlay = manager.get(tooltip); }], onMouseEnter() { this.overlay.open(this.el, this.tooltip); }, onMouseLeave() { this.overlay.close(); } });
  18. 30.

    tooltip.js var Tooltip = ng.Directive({ selector: '[tooltip]', inputs: ['tooltip'], host:

    { '(mouseenter)': 'onMouseEnter()', '(mouseleave)': 'onMouseLeave()' } }) .Class({ constructor: [ng.Inject(ng.ElementRef), ng.Inject(OverlayManager), function (tooltip, el, manager) { this.el = el; this.overlay = manager.get(tooltip); }], onMouseEnter() { this.overlay.open(this.el, this.tooltip); }, onMouseLeave() { this.overlay.close(); } });
  19. 31.

    tooltip.js var Tooltip = ng.Directive({ selector: '[tooltip]', inputs: ['tooltip'], host:

    { '(mouseenter)': 'onMouseEnter()', '(mouseleave)': 'onMouseLeave()' } }) .Class({ constructor: [ng.Inject(ng.ElementRef), ng.Inject(OverlayManager), function (tooltip, el, manager) { this.el = el; this.overlay = manager.get(tooltip); }], onMouseEnter() { this.overlay.open(this.el, this.tooltip); }, onMouseLeave() { this.overlay.close(); } });
  20. 37.
  21. 39.

    lowercase-pipe.ts @Pipe({ name: 'lowercase' }) class LowerCasePipe implements PipeTransform {

    transform(value: string): string { if (!value) return value; if (typeof value !== 'string') { throw new Error('Invalid pipe value', value); } return value.toLowerCase(); } }
  22. 40.
  23. 43.

    di.ts import { provide, Injector, Injectable } from 'angular2/angular2'; class

    Http {} @Injectable() class DataMapper { constructor(private http: Http) {} } let injector = Injector.resolveAndCreate([ provide(Http, { useValue: new Http() }), DataMapper ]); injector.get(DataMapper);
  24. 44.

    di.ts import { provide, Injector, Injectable } from 'angular2/angular2'; class

    Http {} @Injectable() class DataMapper { constructor(private http: Http) {} } let injector = Injector.resolveAndCreate([ provide(Http, { useValue: new Http() }), DataMapper ]); injector.get(DataMapper);
  25. 45.

    di.ts import { provide, Injector, Injectable } from 'angular2/angular2'; class

    Http {} @Injectable() class DataMapper { constructor(private http: Http) {} } let injector = Injector.resolveAndCreate([ provide(Http, { useValue: new Http() }), DataMapper ]); injector.get(DataMapper);
  26. 46.

    di.ts import { provide, Injector, Injectable } from 'angular2/angular2'; class

    Http {} @Injectable() class DataMapper { constructor(private http: Http) {} } let injector = Injector.resolveAndCreate([ provide(Http, { useValue: new Http() }), DataMapper ]); injector.get(DataMapper);
  27. 47.
  28. 48.
  29. 49.
  30. 50.
  31. 53.
  32. 54.
  33. 57.
  34. 73.
  35. 75.
  36. 77.
  37. 78.
  38. 79.
  39. 80.
  40. 81.
  41. 84.
  42. 85.
  43. 91.
  44. 93.
  45. 95.
  46. 96.
  47. 97.
  48. 101.
  49. 103.
  50. 104.
  51. 106.
  52. 107.
  53. 108.
  54. 109.
  55. 111.
  56. 112.
  57. 113.
  58. 114.
  59. 115.
  60. 116.
  61. 117.
  62. 118.
  63. 119.