Vortrag von .NET Cologne, Mai 2016, Kölln

1. 1
Was bringt AngularJS 2.0?
Manfred Steyer
ManfredSteyer
Über mich …
Manfred Steyer
Trainer & Berater
Angular & ASP.NET
Page  2

2. 2
Ziel
Überblick über Angular 2
Beispiel mit Visual Studio Code
Ausblick: Angular 2 und ASP.NET
Folie 3
MOTIVATION
Page  4

3. 3
Plattformen und Usability
HTML + JavaScript
Single Page Application
High-Level Architektur
Page  6
Services
HTML/
JavaScript-Client
HTTP
Single Page Application (SPA)

4. 4
Angular 1
Page  10
Community Verbreitung
Eco-
System
Angular 1
1.1 Million
Developers

5. 5
angular-connect, Herbst 2015, London
Folie 12
angular-connect, Herbst 2015, London
Folie 13

6. 6
ANGULAR 2
Page  14
Fokus
Folie 15
Performance Mobile
Komponenten Modern Web

7. 7
KOMPONENTEN IN ANGULAR 2
Page  16
Component Controller
Page  17
@Component({
selector: 'flug-suchen',
templateUrl: 'flug-suchen.html',
directives: [NgFor, NgIf]
})
export class FlugSuchen {
von: string;
nach: string;
fluege: Array<Flug>;
constructor(flugService: FlugService) { }
flugSuchen() { [...] }
selectFlug(flug) { [...] }
}

8. 8
Bindings
Page  18
<input [(ngModel)]="von">
[…]
<table [hidden]="fluege.length == 0">
<tr *ngFor="#flug of fluege">
<td>{{flug.id}}</td>
<td>{{flug.datum}}</td>
<td>{{flug.von}}</td>
<td>{{flug.zu}}</td>
<td><a href="#" (click)="selectFlight(flug)">Select</a></td>
</tr>
</table>
View
Page  19
<input bindon-ngModel="von">
[…]
<table bind-hidden="fluege.length == 0">
<tr template="ngFor: var flug of fluege">
<td>{{flug.id}}</td>
<td>{{flug.datum}}</td>
<td>{{flug.abflugOrt}}</td>
<td>{{flug.zielOrt}}</td>
<td><a href="#" on-click="selectFlug(flug)">Auswählen</a></td>
</tr>
</table>

9. 9
DEMO
Page  20
ANGULAR & ASP.NET ?
Page  21

10. 10
Angedachte Möglichkeiten
[Metadaten aus Models für Formulare und
Validierung]
Serverseitiges Rendering
10 x Startup-Performance
SEO
Reichweite
Folie 22
DEMO
Page  23

11. 11
manfred.steyer@SOFTWAREarchitekt.at
SOFTWAREarchitekt.at
ManfredSteyer
Kontakt