SlideShare ist ein Scribd-Unternehmen logo
1 von 31
Downloaden Sie, um offline zu lesen
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
Immutable
Data
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-Bindings
kombinieren
Page  65
<input [ng-model]="from" (ng-model)="updateFrom($event)">
updateFrom(newValue) {
this.from = newValue;
}
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
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 Kontrolle
Imperativ
• 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
SPA
Platzhalter
Routing unter AngularJS
Page  84
Logo + Menü
Menü2
Fußzeile
SPA
Passagier.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] manfred.steyer@softwarearchitekt.at
[blog] www.softwarearchitekt.at
[twitter] ManfredSteyer
Kontakt
www.software-engineering-leadership.de

Weitere ähnliche Inhalte

Ähnlich wie Angular 2 Workshop November 2015 von der w-jax 2015

Angular 2: Neuerungen und Migration
Angular 2: Neuerungen und MigrationAngular 2: Neuerungen und Migration
Angular 2: Neuerungen und MigrationManfred Steyer
 
.NET Summit 2016 München: Angular 2 mit TypeScript
.NET Summit 2016 München: Angular 2 mit TypeScript.NET Summit 2016 München: Angular 2 mit TypeScript
.NET Summit 2016 München: Angular 2 mit TypeScriptManfred Steyer
 
Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015Manfred Steyer
 
PHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzePHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzeRalf Lütke
 
Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2Manfred Steyer
 
Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2Manfred Steyer
 
.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1Manfred Steyer
 
Web APIs mit ASP.NET Core 1
Web APIs mit ASP.NET Core 1Web APIs mit ASP.NET Core 1
Web APIs mit ASP.NET Core 1Manfred Steyer
 
Große Applikationen mit AngularJS
Große Applikationen mit AngularJSGroße Applikationen mit AngularJS
Große Applikationen mit AngularJSSebastian Springer
 
Migrationspfade für Angular 2
Migrationspfade für Angular 2Migrationspfade für Angular 2
Migrationspfade für Angular 2Manfred Steyer
 
EnterJS 2015 - JavaScript von Morgen schon heute
EnterJS 2015 - JavaScript von Morgen schon heuteEnterJS 2015 - JavaScript von Morgen schon heute
EnterJS 2015 - JavaScript von Morgen schon heutePhilipp Burgmer
 
Angular 2: Custom Components
Angular 2: Custom ComponentsAngular 2: Custom Components
Angular 2: Custom ComponentsManfred Steyer
 
Komponenten mit Angular 2, Deep Dive
Komponenten mit Angular 2, Deep DiveKomponenten mit Angular 2, Deep Dive
Komponenten mit Angular 2, Deep DiveManfred Steyer
 

Ähnlich wie Angular 2 Workshop November 2015 von der w-jax 2015 (20)

Angular 2: Neuerungen und Migration
Angular 2: Neuerungen und MigrationAngular 2: Neuerungen und Migration
Angular 2: Neuerungen und Migration
 
.NET Summit 2016 München: Angular 2 mit TypeScript
.NET Summit 2016 München: Angular 2 mit TypeScript.NET Summit 2016 München: Angular 2 mit TypeScript
.NET Summit 2016 München: Angular 2 mit TypeScript
 
Was bringt Angular 2?
Was bringt Angular 2?Was bringt Angular 2?
Was bringt Angular 2?
 
Workshop Vue js
Workshop Vue jsWorkshop Vue js
Workshop Vue js
 
Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
Überblick zu Angular2 auf DevCon der Fox-Pro-Usergroup in Frankfurt, Nov 2015
 
PHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzePHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-Ansätze
 
AngularJS
AngularJSAngularJS
AngularJS
 
Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2
 
Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2
 
react-de.pdf
react-de.pdfreact-de.pdf
react-de.pdf
 
.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1
 
Web APIs mit ASP.NET Core 1
Web APIs mit ASP.NET Core 1Web APIs mit ASP.NET Core 1
Web APIs mit ASP.NET Core 1
 
Große Applikationen mit AngularJS
Große Applikationen mit AngularJSGroße Applikationen mit AngularJS
Große Applikationen mit AngularJS
 
Net@night asp.net mvc
Net@night asp.net mvcNet@night asp.net mvc
Net@night asp.net mvc
 
AngularJs
AngularJsAngularJs
AngularJs
 
Migrationspfade für Angular 2
Migrationspfade für Angular 2Migrationspfade für Angular 2
Migrationspfade für Angular 2
 
Automatisierung mit grunt
Automatisierung mit gruntAutomatisierung mit grunt
Automatisierung mit grunt
 
EnterJS 2015 - JavaScript von Morgen schon heute
EnterJS 2015 - JavaScript von Morgen schon heuteEnterJS 2015 - JavaScript von Morgen schon heute
EnterJS 2015 - JavaScript von Morgen schon heute
 
Angular 2: Custom Components
Angular 2: Custom ComponentsAngular 2: Custom Components
Angular 2: Custom Components
 
Komponenten mit Angular 2, Deep Dive
Komponenten mit Angular 2, Deep DiveKomponenten mit Angular 2, Deep Dive
Komponenten mit Angular 2, Deep Dive
 

Mehr von Manfred Steyer

Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2Manfred Steyer
 
Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store
Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/storeSingle Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store
Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/storeManfred Steyer
 
Datengetriebene Web APIs mit Entity Framework
Datengetriebene Web APIs mit Entity FrameworkDatengetriebene Web APIs mit Entity Framework
Datengetriebene Web APIs mit Entity FrameworkManfred Steyer
 
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0Manfred Steyer
 
The newst new Router for Angular 2 ("Version 3")
The newst new Router for Angular 2 ("Version 3")The newst new Router for Angular 2 ("Version 3")
The newst new Router for Angular 2 ("Version 3")Manfred Steyer
 
Databinding and Performance-Tuning in Angular 2
Databinding and Performance-Tuning in Angular 2Databinding and Performance-Tuning in Angular 2
Databinding and Performance-Tuning in Angular 2Manfred Steyer
 
Modern authentication solutions in Angular 2 with OAuth 2.0 and OpenId Connect
Modern authentication solutions in Angular 2 with OAuth 2.0 and OpenId ConnectModern authentication solutions in Angular 2 with OAuth 2.0 and OpenId Connect
Modern authentication solutions in Angular 2 with OAuth 2.0 and OpenId ConnectManfred Steyer
 
Progressive web apps with Angular 2
Progressive web apps with Angular 2Progressive web apps with Angular 2
Progressive web apps with Angular 2Manfred Steyer
 
Der neueste neue Router (Version 3) für Angular 2
Der neueste neue Router (Version 3) für Angular 2Der neueste neue Router (Version 3) für Angular 2
Der neueste neue Router (Version 3) für Angular 2Manfred Steyer
 
ASP.NET Core 1 for MVC- and WebAPI-Devs
ASP.NET Core 1 for MVC- and WebAPI-DevsASP.NET Core 1 for MVC- and WebAPI-Devs
ASP.NET Core 1 for MVC- and WebAPI-DevsManfred Steyer
 
EF Core 1: News features and changes
EF Core 1: News features and changesEF Core 1: News features and changes
EF Core 1: News features and changesManfred Steyer
 
Angular 2: Migration - SSD 2016 London
Angular 2: Migration - SSD 2016 LondonAngular 2: Migration - SSD 2016 London
Angular 2: Migration - SSD 2016 LondonManfred Steyer
 
Angular 2 - SSD 2016 London
Angular 2 - SSD 2016 LondonAngular 2 - SSD 2016 London
Angular 2 - SSD 2016 LondonManfred Steyer
 
ASP.NET Web API Deep Dive - SSD 2016 London
ASP.NET Web API Deep Dive - SSD 2016 LondonASP.NET Web API Deep Dive - SSD 2016 London
ASP.NET Web API Deep Dive - SSD 2016 LondonManfred Steyer
 
Web APIs mit ASP.NET MVC Core 1
Web APIs mit ASP.NET MVC Core 1Web APIs mit ASP.NET MVC Core 1
Web APIs mit ASP.NET MVC Core 1Manfred Steyer
 
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScriptManfred Steyer
 
Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.	Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co. Manfred Steyer
 
Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.	Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co. Manfred Steyer
 

Mehr von Manfred Steyer (20)

Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2Datenbindung und Performance in Angular 2
Datenbindung und Performance in Angular 2
 
Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store
Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/storeSingle Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store
Single Page Applications neu gedacht: Redux in Angular 2 mit @ngrx/store
 
Datengetriebene Web APIs mit Entity Framework
Datengetriebene Web APIs mit Entity FrameworkDatengetriebene Web APIs mit Entity Framework
Datengetriebene Web APIs mit Entity Framework
 
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0
Angular 2 Upgrade: Migration von AngularJS 1.x zu 2.0
 
The newst new Router for Angular 2 ("Version 3")
The newst new Router for Angular 2 ("Version 3")The newst new Router for Angular 2 ("Version 3")
The newst new Router for Angular 2 ("Version 3")
 
Databinding and Performance-Tuning in Angular 2
Databinding and Performance-Tuning in Angular 2Databinding and Performance-Tuning in Angular 2
Databinding and Performance-Tuning in Angular 2
 
Modern authentication solutions in Angular 2 with OAuth 2.0 and OpenId Connect
Modern authentication solutions in Angular 2 with OAuth 2.0 and OpenId ConnectModern authentication solutions in Angular 2 with OAuth 2.0 and OpenId Connect
Modern authentication solutions in Angular 2 with OAuth 2.0 and OpenId Connect
 
Progressive web apps with Angular 2
Progressive web apps with Angular 2Progressive web apps with Angular 2
Progressive web apps with Angular 2
 
Der neueste neue Router (Version 3) für Angular 2
Der neueste neue Router (Version 3) für Angular 2Der neueste neue Router (Version 3) für Angular 2
Der neueste neue Router (Version 3) für Angular 2
 
Webpack
WebpackWebpack
Webpack
 
ASP.NET Core 1 for MVC- and WebAPI-Devs
ASP.NET Core 1 for MVC- and WebAPI-DevsASP.NET Core 1 for MVC- and WebAPI-Devs
ASP.NET Core 1 for MVC- and WebAPI-Devs
 
EF Core 1: News features and changes
EF Core 1: News features and changesEF Core 1: News features and changes
EF Core 1: News features and changes
 
Angular 2: Migration - SSD 2016 London
Angular 2: Migration - SSD 2016 LondonAngular 2: Migration - SSD 2016 London
Angular 2: Migration - SSD 2016 London
 
Angular 2 - SSD 2016 London
Angular 2 - SSD 2016 LondonAngular 2 - SSD 2016 London
Angular 2 - SSD 2016 London
 
ASP.NET Web API Deep Dive - SSD 2016 London
ASP.NET Web API Deep Dive - SSD 2016 LondonASP.NET Web API Deep Dive - SSD 2016 London
ASP.NET Web API Deep Dive - SSD 2016 London
 
Web APIs mit ASP.NET MVC Core 1
Web APIs mit ASP.NET MVC Core 1Web APIs mit ASP.NET MVC Core 1
Web APIs mit ASP.NET MVC Core 1
 
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
.NET Summit 2016 München: EcmaScript 2015+ with TypeScript
 
Angular 2: Routing
Angular 2: RoutingAngular 2: Routing
Angular 2: Routing
 
Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.	Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.
 
Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.	Datenbasierte Services mit Entity Framework und Co.
Datenbasierte Services mit Entity Framework und Co.
 

Angular 2 Workshop November 2015 von der w-jax 2015

  • 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