![Page 1: What does Angular 2.0 hold in store? - SDD Conferencesddconf.com/brands/sdd/library/steyer_angular2.pdf · 5 Page 9 Several SPA-Frameworks AngularJS 1 Page 10 Community Dispersion](https://reader031.vdocuments.us/reader031/viewer/2022030407/5a84a52f7f8b9a14748b88ee/html5/thumbnails/1.jpg)
1
What does Angular 2.0 hold in store?
Manfred Steyer
ManfredSteyer
About me …
Manfred Steyer
Trainer & Consultant
Angular & .NET
Page 2
![Page 2: What does Angular 2.0 hold in store? - SDD Conferencesddconf.com/brands/sdd/library/steyer_angular2.pdf · 5 Page 9 Several SPA-Frameworks AngularJS 1 Page 10 Community Dispersion](https://reader031.vdocuments.us/reader031/viewer/2022030407/5a84a52f7f8b9a14748b88ee/html5/thumbnails/2.jpg)
2
Contents
Overview about Angular 2
Sample with Visual Studio Code
Outlook: Angular 2 and ASP.NET
Folie 3
MOTIVATION
Page 4
![Page 3: What does Angular 2.0 hold in store? - SDD Conferencesddconf.com/brands/sdd/library/steyer_angular2.pdf · 5 Page 9 Several SPA-Frameworks AngularJS 1 Page 10 Community Dispersion](https://reader031.vdocuments.us/reader031/viewer/2022030407/5a84a52f7f8b9a14748b88ee/html5/thumbnails/3.jpg)
3
Platforms and Usability
HTML + JavaScript
Single Page Application
High-Level Architecture
Page 6
Services
HTML/
JavaScript-Client
HTTP
Single Page Application (SPA)
![Page 4: What does Angular 2.0 hold in store? - SDD Conferencesddconf.com/brands/sdd/library/steyer_angular2.pdf · 5 Page 9 Several SPA-Frameworks AngularJS 1 Page 10 Community Dispersion](https://reader031.vdocuments.us/reader031/viewer/2022030407/5a84a52f7f8b9a14748b88ee/html5/thumbnails/4.jpg)
4
Page 7
HTML + JavaScript => Complexity
Page 8
HTML + JavaScript + jQuery => Complexity
![Page 5: What does Angular 2.0 hold in store? - SDD Conferencesddconf.com/brands/sdd/library/steyer_angular2.pdf · 5 Page 9 Several SPA-Frameworks AngularJS 1 Page 10 Community Dispersion](https://reader031.vdocuments.us/reader031/viewer/2022030407/5a84a52f7f8b9a14748b88ee/html5/thumbnails/5.jpg)
5
Page 9
Several SPA-Frameworks
AngularJS 1
Page 10
Community Dispersion
Eco-System
![Page 6: What does Angular 2.0 hold in store? - SDD Conferencesddconf.com/brands/sdd/library/steyer_angular2.pdf · 5 Page 9 Several SPA-Frameworks AngularJS 1 Page 10 Community Dispersion](https://reader031.vdocuments.us/reader031/viewer/2022030407/5a84a52f7f8b9a14748b88ee/html5/thumbnails/6.jpg)
6
Angular 1
1.1 MillionDevelopers
angular-connect, Autumn 2015, London
Folie 12
![Page 7: What does Angular 2.0 hold in store? - SDD Conferencesddconf.com/brands/sdd/library/steyer_angular2.pdf · 5 Page 9 Several SPA-Frameworks AngularJS 1 Page 10 Community Dispersion](https://reader031.vdocuments.us/reader031/viewer/2022030407/5a84a52f7f8b9a14748b88ee/html5/thumbnails/7.jpg)
7
angular-connect, Autumn 2015, London
Folie 13
ANGULAR 2
Page 14
![Page 8: What does Angular 2.0 hold in store? - SDD Conferencesddconf.com/brands/sdd/library/steyer_angular2.pdf · 5 Page 9 Several SPA-Frameworks AngularJS 1 Page 10 Community Dispersion](https://reader031.vdocuments.us/reader031/viewer/2022030407/5a84a52f7f8b9a14748b88ee/html5/thumbnails/8.jpg)
8
Focus
Folie 15
Performance Mobile
Components Modern Web
TypeScriptES6ES5 Dart
No JS
TypeScriptES6
Languages
JavaScript-Based Syntax
![Page 9: What does Angular 2.0 hold in store? - SDD Conferencesddconf.com/brands/sdd/library/steyer_angular2.pdf · 5 Page 9 Several SPA-Frameworks AngularJS 1 Page 10 Community Dispersion](https://reader031.vdocuments.us/reader031/viewer/2022030407/5a84a52f7f8b9a14748b88ee/html5/thumbnails/9.jpg)
9
Folie 17
Performance
Angular
UniversalWeb
Workers
HTML
TemplateJavaScript
Template Compiler
Performance
![Page 10: What does Angular 2.0 hold in store? - SDD Conferencesddconf.com/brands/sdd/library/steyer_angular2.pdf · 5 Page 9 Several SPA-Frameworks AngularJS 1 Page 10 Community Dispersion](https://reader031.vdocuments.us/reader031/viewer/2022030407/5a84a52f7f8b9a14748b88ee/html5/thumbnails/10.jpg)
10
1
4
3
2
Via routes!
Lazy Loading
ECO-SYSTEM
Page 20
![Page 11: What does Angular 2.0 hold in store? - SDD Conferencesddconf.com/brands/sdd/library/steyer_angular2.pdf · 5 Page 9 Several SPA-Frameworks AngularJS 1 Page 10 Community Dispersion](https://reader031.vdocuments.us/reader031/viewer/2022030407/5a84a52f7f8b9a14748b88ee/html5/thumbnails/11.jpg)
11
Installed Mobile
Chrome Node
Electron
Installed Desktop
![Page 12: What does Angular 2.0 hold in store? - SDD Conferencesddconf.com/brands/sdd/library/steyer_angular2.pdf · 5 Page 9 Several SPA-Frameworks AngularJS 1 Page 10 Community Dispersion](https://reader031.vdocuments.us/reader031/viewer/2022030407/5a84a52f7f8b9a14748b88ee/html5/thumbnails/12.jpg)
12
Angular CLI
Folie 23
Augury
Folie 24
![Page 13: What does Angular 2.0 hold in store? - SDD Conferencesddconf.com/brands/sdd/library/steyer_angular2.pdf · 5 Page 9 Several SPA-Frameworks AngularJS 1 Page 10 Community Dispersion](https://reader031.vdocuments.us/reader031/viewer/2022030407/5a84a52f7f8b9a14748b88ee/html5/thumbnails/13.jpg)
13
Mobile Toolkit
Folie 25
Component Toolkits
Folie 26
![Page 14: What does Angular 2.0 hold in store? - SDD Conferencesddconf.com/brands/sdd/library/steyer_angular2.pdf · 5 Page 9 Several SPA-Frameworks AngularJS 1 Page 10 Community Dispersion](https://reader031.vdocuments.us/reader031/viewer/2022030407/5a84a52f7f8b9a14748b88ee/html5/thumbnails/14.jpg)
14
SELECTED PROJECTS
Page 27
70 developers
300K LOC
500 components
![Page 15: What does Angular 2.0 hold in store? - SDD Conferencesddconf.com/brands/sdd/library/steyer_angular2.pdf · 5 Page 9 Several SPA-Frameworks AngularJS 1 Page 10 Community Dispersion](https://reader031.vdocuments.us/reader031/viewer/2022030407/5a84a52f7f8b9a14748b88ee/html5/thumbnails/15.jpg)
15
100s developers
Millions of LOC
COMPONENTS WITH ANGULAR 2
Page 30
![Page 16: What does Angular 2.0 hold in store? - SDD Conferencesddconf.com/brands/sdd/library/steyer_angular2.pdf · 5 Page 9 Several SPA-Frameworks AngularJS 1 Page 10 Community Dispersion](https://reader031.vdocuments.us/reader031/viewer/2022030407/5a84a52f7f8b9a14748b88ee/html5/thumbnails/16.jpg)
16
Component Controller
Page 31
@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) { [...] }
}
Template
Page 32
<input [(ngModel)]="from">
<input [(ngModel)]="to">
<button [disabled]="!from || !to" (click)="search()">
Search
</button>
<table>
<tr *ngFor="let flug of fluege">
<td>{{flug.id}}</td>
<td>{{flug.datum}}</td>
<td>{{flug.von}}</td>
<td>{{flug.zu}}</td>
</tr>
</table>
![Page 17: What does Angular 2.0 hold in store? - SDD Conferencesddconf.com/brands/sdd/library/steyer_angular2.pdf · 5 Page 9 Several SPA-Frameworks AngularJS 1 Page 10 Community Dispersion](https://reader031.vdocuments.us/reader031/viewer/2022030407/5a84a52f7f8b9a14748b88ee/html5/thumbnails/17.jpg)
17
DEMO
Page 34
ANGULAR & ASP.NET ?
Page 35
![Page 18: What does Angular 2.0 hold in store? - SDD Conferencesddconf.com/brands/sdd/library/steyer_angular2.pdf · 5 Page 9 Several SPA-Frameworks AngularJS 1 Page 10 Community Dispersion](https://reader031.vdocuments.us/reader031/viewer/2022030407/5a84a52f7f8b9a14748b88ee/html5/thumbnails/18.jpg)
18
Ideas
[Model-Metadata for Validation and Forms]
Serverside Rendering
10 x Startup-Performance
SEO
Reach
Folie 36
DEMO
Page 37