Das Dokument bietet einen Überblick über Angular 2, einschließlich seiner Entwicklungsgeschichte, der Zielsetzungen und der technischen Aspekte, die bei der Arbeit mit Angular 2 relevant sind. Es werden grundlegende Komponenten und deren Implementierung in einer Beispielanwendung beschrieben, sowie Informationen zu Release-Zeitplänen und Beta-Versionen. Zudem wird die Usability und Performance moderner Webanwendungen hervorgehoben.

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