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.

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?

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…

23. superset of ECMAScript

24. optional type
checking

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

32. Directives with views

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…

41. Dependency Injection

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

64. server-side rendering

65. Client Server

66. Client Server

67. Client Server
GET /

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

82. Angular 2
Google
Angular 1

85. Angular 2 is…

86. rewritten from scratch

87. …developed in a
different language

88. …completely
incompatible API

89. …brand
new building blocks

90. Why?

91. Web have moved forward

93. WebWorkers

97. Learnt lessons

98. Mutable state

99. Tangled data-flow

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

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