Das Dokument behandelt Angular 2.0 als modernes Framework für die Entwicklung von Webanwendungen und erörtert die Migration von AngularJS auf Angular 2. Es werden Kernkonzepte wie Datenbindung, Routing sowie die Architektur und Usability von Angular 2 vorgestellt, begleitet von praktischen Beispielen und Demos. Abschließend wird auf die Herausforderungen und Verbesserungen im Vergleich zur vorherigen Version eingegangen und der Fokus auf Performance und modulare Komponenten gelegt.

1. 1
Angular 2.0: Moderne Anwendungen für
das Web von morgen und Migrationspfade
Manfred Steyer
ManfredSteyer
Aktuelles Buch
Folie 2
O'Reilly:
AngularJS: Moderne
Webanwendungen und Single Page
Applications mit JavaScript
Steyer, Softic

2. 2
Ziel
Angular 2.0 und zugrundeliegende Konzepte
anhand eines Beispielprojektes kennen lernen
Page  4
Didaktik
Kurze Präsentationen
Live-Coding
Fragen: Gerne jederzeit!
Page  5

3. 3
Inhalt
 Motivation
 Überblick zu Angular 2
 DEMO
 Binding und Forms-Handling
 DEMO
 Routing
 DEMO
 Komponenten
 DEMO
 Migration
 Fazit
MOTIVATION
Page  7

4. 4
Plattformen und Usability
HTML + JavaScript
Single Page Application
Page  15
HTML + JavaScript + jQuery => Komplexität

5. 5
Page  16
Frameworks machen SPA beherrschbar
AngularJS
Page  17
Community Verbreitung
Eco-
System

6. 6
HERAUSFORDERUNGEN IN
ANGULARJS 1.X
Page  36
Herausforderungen in AngularJS 1.x
Page  37
Performance Nachvollziehbarkeit Änderungsverfolgung
Use-Case:
Anwendungen
Zusammenspiel mit
anderen Bibliotheken

7. 7
ANGULAR 2
Page  38
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  39

8. 8
Component Controller
Page  40
@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) { [...] }
}
Kann künftig großteils
entfallen
View
Page  41
<input [(ng-model)]="von">
[…]
<table [hidden]="fluege.length == 0">
<tr *ng-for="#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>

9. 9
View
Page  42
<input bindon-ng-model="von">
[…]
<table bind-hidden="fluege.length == 0">
<tr template="ng-for: 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: ERSTE SCHRITTE
Page  45

10. 10
BINDINGS NÄHER
BETRACHTET
Page  46
Architektur-Ziele von Angular 2
Page  47
Performance Komponenten
Vorhersagbarkeit

11. 11
Data-Binding in Angular 1.x
Page  48
Model Model Directive
Komponenten-Baum in Angular 2
Page  49
Komponente für App
Komponente (z. B. Liste)
Komponente
(z. B. Eintrag)
Komponente
(z. B. Eintrag)

12. 12
Regeln für Property-Bindings
 Eine Komponente hängt nur von ihren eigenen Daten
(und indirekt von denen des Parents) ab
 Eine Komponente hängt nicht von
Daten ihrer Kinder ab!
 Abhängigkeits-Graph ist ein Baum
 Angular benötigt nur einen Digest um Baum mit GUI
abzugleichen
Page  51
Property-Binding
Page  52
model
item item
{{ item.title }} {{ item.title }}
[http://victorsavkin.com/post/110170125256/change-detection-in-angular-2]

13. 13
Weitere Performance-Verbesserungen
Page  54
Immutable
Data
Observables
Event-Bindings (One-Way, Bottom/Up)
Page  56
{{ item.title }} {{ item.title }}
Event-Handler
Event-Handler

14. 14
Event-Bindings (One-Way, Bottom/Up)
Kein Digest um Events zu versenden
Aber: Events können Daten ändern 
Property Binding
Page  57
Property- und Event-Bindings
Page  59
Property-Binding
ausführen
Event-Handler
ausführen
Ereignis tritt ein
App ist bereit
Alle Handler ausgeführt
Properties gebunden

15. 15
Recap
Property-Binding: One-Way; Top/Down
Event-Binding: One-Way; Bottom/Up
Two-Way-Binding?
Two-Way = Property-Binding + Event-Binding
Page  64
Property- und Event-Bindings
kombinieren
Page  65
<input [ng-model]="from" (ng-model)="updateFrom($event)">
updateFrom(newValue) {
this.from = newValue;
}

16. 16
Property- und Event-Bindings
kombinieren
Page  66
<input [ng-model]="from" (ng-model)="from = $event">
Syntax-Zucker für 2-Way-Binding
Page  67
<input [(ng-model)]="from">
<input bindon-ng-model="from">

17. 17
Types of Binding
Page  68
<input [(ng-model)]="from">
[…]
<table [hidden]="flights.length == 0">
<tr *ng-for="#flight of flights">
<td>{{flight.id}}</td>
<td>{{flight.date}}</td>
<td>{{flight.from}}</td>
<td>{{flight.to}}</td>
<td><a href="#" (click)="selectFlight(flight)">Select</a></td>
</tr>
</table>
DEMO: USING NG-MODEL
Page  69

18. 18
HANDLING FORMS
Page  71
Ansätze in Angular 2
• ng-model
• Wie in AngularJS 1.x
• Angular erzeugt „Forms-Controller“
Deklerativ
• Anwendung erzeugt „Forms-
Controller“
• Mehr Kontrolle
Imperativ
• Angular generiert Formular für
Datenmodell
• Noch nicht implementiert
Daten-
getrieben

19. 19
Deklerative Formulare
Page  73
export class FlightList {
constructor(flightService: FlightService) {
[…]
this.filter = {
from: 'Graz',
to: 'Hamburg'
};
[…]
}
}
View
Page  74
<form #f="form">
<input type="text" ng-control="from"
[(ng-model)]="filter.from" required>
<div *ng-if="!f.controls.from.valid">
…Error…
</div>
<div
*ng-if="f.controls.from.hasError('required')">
…Error…
</div>
[…]
</form>
FormDirective
f
ControlGroup
form
Control
from

20. 20
DEMO
Page  75
Imperative Formulare
export class FlightList {
filter: ControlGroup;
constructor(flightService: FlightService, fb: FormBuilder) {
[…]
this.filter = fb.group({
from: ['Graz', Validators.required],
to: ['Hamburg', Validators.required]
});
[…]
}
searchFlights() {
var filter = this.filter.value;
[…]
}
}

21. 21
Imperative Formulare
Page  77
<form [ng-form-model]="filter">
<input id="from" ng-control="from" type="text">
<div *ng-if="!filter.controls.from.valid">…Error…</div>
[…]
</form>
ROUTING
Page  78

22. 22
Motivation
 SPAs bestehen aus einer Seite
 Innerhalb dieser werden Bereiche ein- und
ausgeblendet --> "Logische Seiten"
 Herausforderungen:
 URL-Parameter und Bookmarks
 Back-Button
 Eigene Datei pro logischer Seite --> Übersicht
Page  79
Routing unter AngularJS
 Logische Seiten erhalten eine URL, z. B:
 /FlugDemo#flugbuchen/passagier
 /FlugDemo#flugbuchen/flug
 Logische Seiten erhalten URL-Parameter, z. B.:
 /FlugDemo#flugbuchen/passagier/5
Page  80

23. 23
Routing unter AngularJS
 SPA erhält Platzhalter
 Je nach URL wird in diesen Platzhalter ein Template
geladen
 #flugbuchen/passagier --> passagier.html
 #flugbuchen/flug --> flug.html
 Templates sind i.d.R. eigene Dateien
 Werden bei Bedarf nachgeladen
 Können auch in SPA inkludiert werden
Page  81
Routen (Zustände)
Routen sind Kombination aus u. a.:
Url (mit/ohne Platzhalter)
Template
Controller
Page  82

24. 24
Routing unter AngularJS
Page  83
Logo + Menü
Menü2
Fußzeile
SPA
Platzhalter
Routing unter AngularJS
Page  84
Logo + Menü
Menü2
Fußzeile
SPA
Passagier.html
/FlugDemo#flugbuchen/passagier

25. 25
COMPONENT ROUTER
Page  85
Provider
ROUTER_PROVIDERS
provide(LocationStrategy,
{useClass: HashLocationStrategy})
Page  86

26. 26
AppComponent
Page  87
@Component({
selector: 'app'
})
@View({
directives: [ROUTER_DIRECTIVES],
templateUrl: 'app/app.html'
})
@RouteConfig([
{ path: '/', component: Home, as: 'Home' },
{ path: '/flug-suchen', component: FlugSuchen,
as: 'FlugSuchen' }
])
export class App {
}
View von AppComponent
Page  88
<a [router-link]="['/Home']">Home</a>
<div>
<router-outlet></router-outlet>
</div>

27. 27
ROUTEN MIT PARAMETER
Page  89
Routen mit Parameter
Page  90
@Component({
selector: 'app'
})
@View({
directives: [ROUTER_DIRECTIVES],
templateUrl: 'app/app.html'
})
@RouteConfig([
{ path: '/', component: Home, as: 'Home' },
{ path: '/flug-suchen', component: FlugSuchen,
as: 'FlugSuchen' },
{ path: '/flug-edit/:id', component: FlugEdit,
as: 'FlugEdit' }
])
export class App {
}

28. 28
Links auf Routen mit Parameter
Page  91
<a [router-link]="['/FlugEdit', {id: flug.id}]">Edit</a>
Route-Parameter auslesen
Page  92
@Component({})
@View({
templateUrl: 'app/components/flug-edit/flug-edit.html'
})
export class FlugEdit {
id;
constructor(params: RouteParams) {
this.id = params.get('id');
this.info = 'Flug: #' + this.id;
}
}

29. 29
MIGRATION
Page  114
Migration
Page  116
Angular
1.x
Angular
2

30. 30
Möglichkeiten
 Component Router: Parallelbetrieb
 Angular 1.5: Komponenten in Angular 1
 NgUpgrade: Angular 2 und Angular 1.x mixen
 NgForward: AngularJS 1.x im Angular-2-Stil
 Sinnvoll: Vorbereitung durch Einsatz von modernen
AngularJS 1.x-Code vorbereiten: EcmaScript 6,
TypeScript, Dekoratoren, Controller-As
Page  117
[https://github.com/angular/ngUpgrade]
Fazit
 Angular: SPA-Framework mit großer Verbreitung
 Angular 2 ist Neuimplementierung mit Fokus auf
Performance, Komponenten und modernen Standards
 Parallelbetrieb, u. a. mit neuem Router
 Vorbereitung durch modernen Angular 1.x-Code,
Neuer Component Router, ES 6/ TypeScript
Page  123

31. 31
[mail] manfred.steyer@softwarearchitekt.at
[blog] www.softwarearchitekt.at
[twitter] ManfredSteyer
Kontakt
www.software-engineering-leadership.de