Downloaded 843 times
![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(); } }](https://image.slidesharecdn.com/universal-apps-with-angular-2-151107174641-lva1-app6892/75/Building-Universal-Applications-with-Angular-2-15-2048.jpg)
![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(); } }](https://image.slidesharecdn.com/universal-apps-with-angular-2-151107174641-lva1-app6892/75/Building-Universal-Applications-with-Angular-2-16-2048.jpg)
![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(); } }](https://image.slidesharecdn.com/universal-apps-with-angular-2-151107174641-lva1-app6892/75/Building-Universal-Applications-with-Angular-2-17-2048.jpg)
![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(); } });](https://image.slidesharecdn.com/universal-apps-with-angular-2-151107174641-lva1-app6892/75/Building-Universal-Applications-with-Angular-2-28-2048.jpg)
![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(); } });](https://image.slidesharecdn.com/universal-apps-with-angular-2-151107174641-lva1-app6892/75/Building-Universal-Applications-with-Angular-2-29-2048.jpg)
![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(); } });](https://image.slidesharecdn.com/universal-apps-with-angular-2-151107174641-lva1-app6892/75/Building-Universal-Applications-with-Angular-2-30-2048.jpg)
![di.ts import { provide, Injector, Injectable } from 'angular2/angular2'; @Injectable() class DataMapper { constructor(private http: Http) {} } class Http {} let injector = Injector.resolveAndCreate([ provide(Http).toValue(new Http()), DataMapper ]); injector.get(DataMapper);](https://image.slidesharecdn.com/universal-apps-with-angular-2-151107174641-lva1-app6892/75/Building-Universal-Applications-with-Angular-2-42-2048.jpg)
![di.ts import { provide, Injector, Injectable } from 'angular2/angular2'; @Injectable() class DataMapper { constructor(private http: Http) {} } class Http {} let injector = Injector.resolveAndCreate([ provide(Http).toValue(new Http()), DataMapper ]); injector.get(DataMapper);](https://image.slidesharecdn.com/universal-apps-with-angular-2-151107174641-lva1-app6892/75/Building-Universal-Applications-with-Angular-2-43-2048.jpg)
![di.ts import { provide, Injector, Injectable } from 'angular2/angular2'; @Injectable() class DataMapper { constructor(private http: Http) {} } class Http {} let injector = Injector.resolveAndCreate([ provide(Http).toValue(new Http()), DataMapper ]); injector.get(DataMapper);](https://image.slidesharecdn.com/universal-apps-with-angular-2-151107174641-lva1-app6892/75/Building-Universal-Applications-with-Angular-2-44-2048.jpg)
![di.ts import { provide, Injector, Injectable } from 'angular2/angular2'; @Injectable() class DataMapper { constructor(private http: Http) {} } class Http {} let injector = Injector.resolveAndCreate([ provide(Http).toValue(new Http()), DataMapper ]); injector.get(DataMapper);](https://image.slidesharecdn.com/universal-apps-with-angular-2-151107174641-lva1-app6892/75/Building-Universal-Applications-with-Angular-2-45-2048.jpg)
Building Universal Applications with Angular 2
- 1. Building Universal Applicationswith Angular 2 Minko Gechev github.com/mgechev twitter.com/mgechev blog.mgechev.com
- 2.
- 3. Agenda What is Angular? What’swrong with Angular 2? Introduction to Angular 2 Why Angular 2 is awesome? Should I use Angular 2 in my next project?
- 4. Agenda What is Angular2? 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. Agenda What is Angular2? 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. Agenda What is Angular2? 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. Agenda What is Angular2? 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. Agenda What is Angular2? 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?
- 9.
- 12. Core concepts ofAngular 2 • Directives • Components • Pipes • Services • Dependency Injection
- 13.
- 14. Primitive used forencapsulation of basic UI related logic
- 15. 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(); } }
- 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(); } }
- 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(); } }
- 18. What a minute… thislooks like Java
- 19. Angular 2 iswritten in TypeScript
- 22.
- 23.
- 24.
- 25.
- 27. …you can stilluse ES5…
- 28. 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(); } });
- 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(); } });
- 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(); } });
- 31.
- 32.
- 33. hello-world.ts @Component({ selector: 'hello-world' }) @View({ template: '<h1>Hello,{{this.target}}!</h1>' }) class HelloWorld { target:string; constructor() { this.target = 'world'; } }
- 34. hello-world.ts @Component({ selector: 'hello-world' }) @View({ template: '<h1>Hello,{{this.target}}!</h1>' }) class HelloWorld { target:string; constructor() { this.target = 'world'; } }
- 35. hello-world.ts @Component({ selector: 'hello-world' }) @View({ template: '<h1>Hello,{{this.target}}!</h1>' }) class HelloWorld { target:string; constructor() { this.target = 'world'; } }
- 36.
- 37.
- 38. lowercase-pipe.ts @Pipe({ name: 'lowercase' }) class LowerCasePipeimplements PipeTransform { transform(value: string): string { if (!value) return value; if (typeof value !== 'string') { throw new Error('Invalid pipe value', value); } return value.toLowerCase(); } }
- 39.
- 40. Simply, ES2015 classeswhich can be wired together with…
- 41.
- 42. di.ts import { provide,Injector, Injectable } from 'angular2/angular2'; @Injectable() class DataMapper { constructor(private http: Http) {} } class Http {} let injector = Injector.resolveAndCreate([ provide(Http).toValue(new Http()), DataMapper ]); injector.get(DataMapper);
- 43. di.ts import { provide,Injector, Injectable } from 'angular2/angular2'; @Injectable() class DataMapper { constructor(private http: Http) {} } class Http {} let injector = Injector.resolveAndCreate([ provide(Http).toValue(new Http()), DataMapper ]); injector.get(DataMapper);
- 44. di.ts import { provide,Injector, Injectable } from 'angular2/angular2'; @Injectable() class DataMapper { constructor(private http: Http) {} } class Http {} let injector = Injector.resolveAndCreate([ provide(Http).toValue(new Http()), DataMapper ]); injector.get(DataMapper);
- 45. di.ts import { provide,Injector, Injectable } from 'angular2/angular2'; @Injectable() class DataMapper { constructor(private http: Http) {} } class Http {} let injector = Injector.resolveAndCreate([ provide(Http).toValue(new Http()), DataMapper ]); injector.get(DataMapper);
- 50. Now you knowthe basics!
- 51. Lets take astep back…
- 54. Angular 2 isplatform agnostic
- 55. Not coupled withDOM, even HTML
- 57.
- 58.
- 59.
- 60. Client Server GET / GET* loop
- 61. Client Server GET / GET* loop Running JavaScript
- 62. Client Server GET / GET* loop GET * loop
- 63. Client Server GET / GET* loop GET * loop
- 64.
- 65.
- 66.
- 67.
- 68. Client Server GET / RunningJavaScript
- 69. Client Server GET / GET* loop
- 70. Client Server GET / GET* loop Running JavaScript
- 71. Client Server GET / GET* loop
- 73. Change detection canbe run into separate process
- 75.
- 80.
- 81.
- 82.
- 85.
- 86.
- 87. …developed in a differentlanguage
- 88.
- 89.
- 90.
- 91. Web have movedforward
- 93.
- 97.
- 98.
- 99.
- 101. …we will makethe transition process boring…
- 103.
- 104. How to migrateto Angular 2? (2 easy steps)
- 105.
- 109.
- 111.
- 119.