Building Universal Applications with Angular 2

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();
}
}

View Slide

tooltip.ts
@Directive({
host: {
}
})
this.el = el;
}
onMouseEnter() {
}
onMouseLeave() {
}
}

View Slide

tooltip.ts
@Directive({
host: {
}
})
this.el = el;
}
onMouseEnter() {
}
onMouseLeave() {
}
}

View Slide

Wait a minute…
this looks like Java

View Slide

Angular 2 is written in
TypeScript

View Slide

TypeScript is…

View Slide

superset of ECMAScript

View Slide

optional type
checking

View Slide

open source

View Slide

…you can still use ES5…

View Slide

tooltip.js
var Tooltip = ng.Directive({
host: {
}
})
.Class({
constructor: [ng.Inject(ng.ElementRef),
ng.Inject(OverlayManager),
function (tooltip, el, manager) {
this.el = el;
this.overlay = manager.get(tooltip);
}],
onMouseEnter() {
},
onMouseLeave() {
}
});

View Slide

tooltip.js
host: {
}
})
.Class({
this.el = el;
}],
onMouseEnter() {
},
onMouseLeave() {
}
});

View Slide

tooltip.js
host: {
}
})
.Class({
this.el = el;
}],
onMouseEnter() {
},
onMouseLeave() {
}
});

View Slide

Components

View Slide

Directives with views

View Slide

hello-world.ts
@Component({
selector: 'hello-world',
template: 'Hello, {{this.target}}!'
})
class HelloWorld {
target:string;
constructor() {
this.target = 'world';
}
}

View Slide

hello-world.ts
@Component({
})
class HelloWorld {
target:string;
constructor() {
}
}

View Slide

hello-world.ts
@Component({
})
class HelloWorld {
target:string;
constructor() {
}
}

View Slide

Pipes

View Slide

Encapsulate the
data transformation logic

View Slide

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();
}
}

View Slide

Services

View Slide

Simply, ES2015 classes which can
be wired together with…

View Slide

Dependency Injection

View Slide

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);

View Slide

di.ts
class Http {}
@Injectable()
class DataMapper {
}
DataMapper
]);

View Slide

di.ts
class Http {}
@Injectable()
class DataMapper {
}
DataMapper
]);

View Slide

di.ts
class Http {}
@Injectable()
class DataMapper {
}
DataMapper
]);

View Slide