Angular 2.0 focuses on performance, mobile, and modern web capabilities. It uses TypeScript and ES6 for cleaner code and emphasizes building applications with reusable components. The growing Angular ecosystem includes tools for development, debugging, and mobile/desktop installation.

1. 1
What does Angular 2.0 hold in store?
Manfred Steyer
ManfredSteyer
About me …
Manfred Steyer
Trainer & Consultant
Angular & .NET
Page  2

2. 2
Contents
Overview about Angular 2
Sample with Visual Studio Code (Live-Coding)
Folie 3
MOTIVATION
Page  4

3. 3
Platforms and Usability
HTML + JavaScript
Single Page Application
High-Level Architecture
Page  6
Services
HTML/
JavaScript-Client
HTTP
Single Page Application (SPA)

4. 4
Page  7
HTML + JavaScript => Complexity
Page  8
HTML + JavaScript + jQuery => Complexity

5. 5
Page  9
Several SPA-Frameworks
AngularJS 1.x
Page  10
Community Dispersion
Eco-
System

6. 6
Angular 1
1.1 Million
Developers
angular-connect, Autumn 2015, London
Folie 12

7. 7
angular-connect, Autumn 2015, London
Folie 13
ANGULAR 2
Page  14

8. 8
Focus
Folie 15
Performance Mobile
Components Modern Web
State
RC since May 2016
Folie 16

9. 9
TypeScriptES 6
Languages
Page  17
ES 5
Folie 18
Performance

10. 10
Angular
Universal
Web
Workers
HTML
Template
JavaScript
Template Compiler
Performance
1
4
3
2
Via routes!
Lazy Loading

11. 11
ECO-SYSTEM
Page  21
Installed Mobile

12. 12
Chrome Node
Electron
Installed Desktop
Angular CLI
Folie 24

13. 13
Augury
Folie 25
Mobile Toolkit
Folie 26

14. 14
Component Toolkits
Folie 27
SELECTED PROJECTS
Page  28

15. 15
70 developers
300K LOC
500 components
100s developers
Millions of LOC

16. 16
COMPONENTS
WITH ANGULAR 2
Page  31
Component Controller
Page  32
@Component({
selector: 'flight-list',
templateUrl: 'flight-list.html'
})
export class FlightListComponent {
from: string;
to: string;
flights: Array<Flight>;
constructor(flightService: FlightService) { }
search() { [...] }
select(flight: Flight) { [...] }
}

17. 17
Template
Page  33
<input [(ngModel)]="from">
<input [(ngModel)]="to">
<button [disabled]="!from || !to" (click)="search()">
Search
</button>
<table>
<tr *ngFor="let flight of flights">
<td>{{flight.id}}</td>
<td>{{flight.datum}}</td>
<td>{{flight.von}}</td>
<td>{{flight.zu}}</td>
</tr>
</table>
DEMO
Page  35

18. 18
DEMO
Page  38
Summary
Folie 40
Components
ES6 &
TypeScript
Performance
Ecosystem Browser
Installed
Mobile
Installed
Desktop

19. 19
manfred.steyer@SOFTWAREarchitekt.at
SOFTWAREarchitekt.at
ManfredSteyer
Contact
Credits
Brad Green, Jules Kremer:
Keynote, ngconf 2016,
https://docs.google.com/presentation/d/1GII-
DABSG5D7Yhik4Be5RvL6IXPt-
Kg8lXFLnxkhKsU/edit?pref=2&pli=1
Brad Green, Igor Minar, Jules Kremer: Keynote,
AngularConnect 2015:
https://docs.google.com/presentation/d/1r1ffV-
shRXHXct9DbJRVesNs6oLLk8PFGQvlE1zLpRE/edi
t?pref=2&pli=1#slide=id.ge4d624f6e_1_0
Folie 42