Das Dokument bietet einen Überblick über Angular 2, einschließlich seines aktuellen Entwicklungsstandes und bevorstehender Versionen, sowie Anleitungen zur Erstellung moderner Webanwendungen mit Visual Studio Code. Es werden Entwicklungstools, Komponentenstrukturen und Usability-Aspekte hervorgehoben, um die Leistungsfähigkeit von Single Page Applications zu demonstrieren. Zudem enthält es Beispiele für die Implementierung von Flugservices und Datentabellen in Angular 2.

1. 1
Moderne Web-Anwendungen mit Angular 2
Manfred Steyer
ManfredSteyer
Buch-Projekt
Page  2

2. 2
Ziel
Überblick über den Stand der Dinge in Angular 2
Beispiel mit Visual Studio Code
Folie 3
ANGULARJS
Page  4

3. 3
Angular 1
1.1 Million
Developers
Angular 1
Page  6
Community Verbreitung
Eco-
System

4. 4
angular-connect, Herbst 2015, London
Folie 7
angular-connect, Herbst 2015, London
Folie 8

5. 5
Plattformen und Usability
HTML + JavaScript
Single Page Application
ANGULAR 2
Page  10

6. 6
Fokus
Folie 11
Performance Mobile
Komponenten Modern Web
ROADMAP
Page  12

7. 7
Roadmap
 41 Alpha-Versionen
 Seit Dezember: BETA
 Kern: Stabil
 Moving Parts: Jenseits des Kerns
 Aktuelle BETA: Beta 9
 Arbeiten an Release Candidate gestartet
 Finale Version: Mai 2016
Folie 13
KOMPONENTEN IN ANGULAR 2
Page  14

8. 8
Component Controller
Page  15
@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) { [...] }
}
Bindings
Page  16
<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>

9. 9
View
Page  17
<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  18

10. 10
[mail] manfred.steyer@SOFTWAREarchitekt.at
[web] SOFTWAREarchitekt.at
[twitter] ManfredSteyer
Contact