.NET Summit 2016: Angular 2 mit TypeScript

1. 1
Angular 2 mit TypeScript:
Überblick
Manfred Steyer
Über mich …
 Manfred Steyer
 SOFTWAREarchitekt.at
 Trainer & Berater
 Angular am Client
 .NET am Server
Page  3

2. 2
Inhalt
Warum Angular ?
Überblick zu Angular 2
DEMO
Fazit
Page  6
WARUM ANGULAR?
Page  7

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

4. 4
AngularJS
Page  13
Community Verbreitung
Eco-
System
ANGULAR 2
Page  24

5. 5
Was ist Angular 2 ?
 Neuimplementierung
 Performance
 Komponenten (Web Components)
 TypeScript/ ES 6 (ES 5 möglich)
 Kompilierung nach ES 5
 Modularisierung
 Flexibles Rendering (auch: Web-Worker, Server)
 Spielt besser mit anderen Bibliotheken zusammen
Page  25
Stand der Dinge
 BETA seit Dezember 2015
 Kern laut Produkt-Team stabil
 Moving-Parts jenseits des Kerns
 Kommt bereits bei Google zum Einsatz
 Green Tea, CMS, 100s Devs, 1.000.000s LOC
 Google AdWords, 100s Devs, 1.000.000s LOC
Page  26

6. 6
Component Controller
Page  27
@Component({
selector: 'flug-suchen'
})
@View({
templateUrl: 'flug-suchen.html',
directives: [NgFor, NgIf]
})
export class FlugSuchen {
von: string;
nach: string;
fluege: Array<Flug>;
constructor(flugService: FlugService) { }
flugSuchen() { [...] }
selectFlug(flug) { [...] }
}
View
Page  28
<input [(ngModel)]="von">
[…]
<table [hidden]="fluege.length == 0">
<tr *ngFor="#flug of fluege">
<td>{{flug.id}}</td>
<td>{{flug.datum}}</td>
<td>{{flug.abflugOrt}}</td>
<td>{{flug.zielOrt}}</td>
<td><a href="#" (click)="selectFlug(flug)">Auswählen</a></td>
</tr>
</table>

7. 7
View
Page  29
<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>
DEMO
Page  30

8. 8
Fazit
 Angular: SPA-Framework mit großer Verbreitung
 Angular 2 ist Neuimplementierung
 Fokus: Komponenten, Performance, Modern Web
 Komponenten: Wartbarkeit, Wiederverwendbarkeit
 TypeScript, ES6: Wartbarkeit
 Datenbindungskonzept: Performance
 DI: Testbarkeit und Austauschbarkeit
 Flexibles Rendering
 Parallelbetrieb von Version 1 und 2
manfred.steyer@SOFTWAREarchitekt.at
SOFTWAREarchitekt.at
ManfredSteyer
Contact