Embed Size (px)
Citation preview
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
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
Inhalt
Motivation
Überblick zu Angular 2
DEMO
Binding und Forms-Handling
DEMO
Routing
DEMO
Komponenten
DEMO
Migration
Fazit
MOTIVATION
Page 7
4
Plattformen und Usability
HTML + JavaScript
Single Page Application
Page 15
HTML + JavaScript + jQuery => Komplexität
5
Page 16
Frameworks machen SPA beherrschbar
AngularJS
Page 17
Community Verbreitung
Eco-System
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
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
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
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
BINDINGS NÄHER BETRACHTET
Page 46
Architektur-Ziele von Angular 2
Page 47
Performance Komponenten
Vorhersagbarkeit
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
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
Weitere Performance-Verbesserungen
Page 54
ImmutableData
Observables
Event-Bindings (One-Way, Bottom/Up)
Page 56
{{ item.title }} {{ item.title }}
Event-Handler
Event-Handler
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
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-Bindingskombinieren
Page 65
<input [ng-model]="from" (ng-model)="updateFrom($event)">
updateFrom(newValue) {
this.from = newValue;
}
16
Property- und Event-Bindingskombinieren
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
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
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 KontrolleImperativ
• Angular generiert Formular für Datenmodell
• Noch nicht implementiert
Daten-getrieben
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
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
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
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
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
Routing unter AngularJS
Page 83
Logo + Menü
Men
ü 2
Fußzeile
SPAPlatzhalter
Routing unter AngularJS
Page 84
Logo + Menü
Men
ü 2
Fußzeile
SPAPassagier.html
/FlugDemo#flugbuchen/passagier
25
COMPONENT ROUTER
Page 85
Provider
ROUTER_PROVIDERS
provide(LocationStrategy,
{useClass: HashLocationStrategy})
Page 86
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
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
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
MIGRATION
Page 114
Migration
Page 116
Angular 1.x
Angular 2
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
[mail] [email protected]
[blog] www.softwarearchitekt.at
[twitter] ManfredSteyer
Kontakt
www.software-engineering-leadership.de
