1.
Building Universal Applications with
Angular 2
Minko Gechev
github.com/mgechev
twitter.com/mgechev
blog.mgechev.com

2.
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?

10.
Core concepts of Angular 2
• Directives
• Components
• Pipes
• Services
• Dependency Injection

11.
Directives

12.
Primitive used for encapsulation of
basic UI related logic

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

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.
What a minute…
this looks like Java

17.
Angular 2 is written in
TypeScript

18.
TypeScript is…

19.
superset of ECMAScript

20.
optional type
checking

21.
open source

22.
…you can still use ES5…

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

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

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

26.
Components

27.
Directives with views

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

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

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

31.
Pipes

32.
Encapsulate the
data transformation logic

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

34.
Services

35.
Simply, ES2015 classes which can
be wired together with…

36.
Dependency Injection

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

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

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

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

41.
Now you know the basics!

42.
Lets take a step back…

43.
Angular 2 is platform agnostic

44.
Not coupled with DOM, even HTML

45.
…and even more…

46.
Client Server

47.
Client Server

48.
Client Server
GET /
GET *
loop

49.
Client Server
GET /
GET *
loop
Running JavaScript

50.
Client Server
GET /
GET *
loop
GET *
loop

51.
Client Server
GET /
GET *
loop
GET *
loop

52.
server-side rendering

53.
Client Server

54.
Client Server

55.
Client Server
GET /

56.
Client Server
GET /
Running JavaScript

57.
Client Server
GET /
GET *
loop

58.
Client Server
GET /
GET *
loop
Running JavaScript

59.
Client Server
GET /
GET *
loop

60.
Change detection can be
run into separate process

61.
so…what’s wrong with
Angular 2?

62.
Google

63.
Google
Angular 1

64.
Angular 2
Google
Angular 1

65.
Angular 2 is…

66.
rewritten from scratch

67.
…developed in a
different language

68.
…completely
incompatible API

69.
…brand
new building blocks

70.
Why?

71.
Web have moved forward

72.
WebWorkers

73.
Learnt lessons

74.
Mutable state

75.
Tangled data-flow

76.
…we will make the
transition process boring…

77.
ngUpgrade

78.
How to migrate to Angular 2?
(2 easy steps)

79.
Step 1

80.
A
B C
D E F

81.
Step 2

82.
Thank you!
github.com/mgechev
twitter.com/mgechev
blog.mgechev.com