![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/85/Building-Universal-Applications-with-Angular-2-15-320.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/85/Building-Universal-Applications-with-Angular-2-16-320.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/85/Building-Universal-Applications-with-Angular-2-17-320.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/85/Building-Universal-Applications-with-Angular-2-28-320.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/85/Building-Universal-Applications-with-Angular-2-29-320.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/85/Building-Universal-Applications-with-Angular-2-30-320.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/85/Building-Universal-Applications-with-Angular-2-42-320.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/85/Building-Universal-Applications-with-Angular-2-43-320.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/85/Building-Universal-Applications-with-Angular-2-44-320.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/85/Building-Universal-Applications-with-Angular-2-45-320.jpg)
Building Universal Applications with Angular 2
- 1. Building Universal Applications with Angular 2 Minko Gechev github.com/mgechev twitter.com/mgechev blog.mgechev.com
- 3. 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?
- 4. 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. 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. 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. 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. 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?
- 9. What is Angular 2?
- 12. Core concepts of Angular 2 • Directives • Components • Pipes • Services • Dependency Injection
- 13. Directives
- 14. Primitive used for encapsulation 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… this looks like Java
- 19. Angular 2 is written in TypeScript
- 22. TypeScript is…
- 25. open source
- 27. …you can still use 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. Components
- 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. Pipes
- 37. Encapsulate the data transformation logic
- 38. 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(); } }
- 39. Services
- 40. Simply, ES2015 classes which can be wired together with…
- 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 know the basics!
- 51. Lets take a step back…
- 54. Angular 2 is platform agnostic
- 55. Not coupled with DOM, even HTML
- 57. …and even more…
- 58. Client Server
- 59. Client Server
- 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
- 65. Client Server
- 66. Client Server
- 68. Client Server GET / Running JavaScript
- 69. Client Server GET / GET * loop
- 70. Client Server GET / GET * loop Running JavaScript
- 71. Client Server GET / GET * loop
- 73. Change detection can be run into separate process
- 75. so…what’s wrong with Angular 2?
- 80. Google
- 81. Google Angular 1
- 85. Angular 2 is…
- 87. …developed in a different language
- 90. Why?
- 91. Web have moved forward
- 93. WebWorkers
- 97. Learnt lessons
- 98. Mutable state
- 101. …we will make the transition process boring…
- 103. ngUpgrade
- 104. How to migrate to Angular 2? (2 easy steps)
- 105. Step 1
- 109. A B C D E F
- 111. Step 2