SlideShare ist ein Scribd-Unternehmen logo
1
Angular 2.0:
Migrationspfade von 1.x zu 2.0
Manfred Steyer
ManfredSteyer
Aktuelles Buch
Page  2
2
Ziel
Möglichkeiten zur Migration von AngularJS 1.x
auf 2.0 kennen lernen
Fokus auf Maßnahmen, die heute schon
möglich sind, um Migration vorzubereiten
Ausblick auf weitere geplante Möglichkeiten
Page  3
Inhalt
 Überblick zu Angular 2
 Überblick zu Migrationspfade
 Controller-As & BindToController
 AngularJS & ES6 (ES 2015)
 AngularJS & TypeScript
 AngularJS & ES7-Dekoratoren
 DEMO
 Ausblick
 Zusammenfassung
3
ÜBERBLICK ZU ANGULAR 2
Page  6
Was ist Angular 2?
 Neuimplementierung
 Performance
 Komponenten
 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  8
4
Component Controller
Page  9
@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  10
<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>
5
View
Page  11
<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>
ÜBERBLICK ZU
MIGRATIONS-PFADE
Page  12
6
Migration
Page  13
Angular
1.x
Angular
2
Möglichkeiten
 Parallelbetrieb über Component Router
 Komponenten in Angular 1
 Angular 2 mit Angular 1.x-Komponenten
und vice versa
 Angular-2-Dekoratoren für Angular 1
 Automatische Upgrade-Tools, Guides und Best
Practices
Page  14
[https://github.com/angular/ngUpgrade]
7
Auf Angular 2 heute schon vorbereiten
 Modernes AngularJS 1.x schreiben
 Controller-As, BindToController
 EcmaScript 6/ TypeScript für neuen Code
 ES7-Dekoratoren für neuen Code
 ng-forward
Page  15
CONTROLLER-AS &
BIND-TO-CONTROLLER
Page  16
8
Controller als Factory für VM (Old Style)
Page  18
function FlugSuchenCtrl($scope, $http, $log) {
$scope.vm = new FlugSuchenVM($http, $log);
}
var app = angular.module('app', []);
app.controller('flugSuchenCtrl', FlugSuchenCtrl);
<body ng-app='app' ng-controller='flugSuchenCtrl'>
[…]
{{ vm.fluege.length }} Flüge gefunden …
[…]
</body>
Controller-As (Modern Style)
Page  19
function FlugSuchenCtrl($scope, $http, $log) {
$scope.vm = new FlugSuchenVM($http, $log);
}
var app = angular.module('app', []);
app.controller('flugSuchenVM', FlugSuchenVM);
<body ng-app='app' ng-controller='flugSuchenVM as vm'>
[…]
{{ vm.fluege.length }} Flüge gefunden …
[…]
</body>
9
Controller-As bei Direktiven
Folie 20
app.directive("coolCheckbox", function () {
return {
controller: […],
controllerAs: 'model',
templateUrl:
"/templates/coolCheckBoxTemplateWithNg.html",
[…]
};
});<div
ng-class="(model.isChecked) ? 'On' : 'Off' "
ng-click="model.toggleState()">
{{model.isChecked}}
</div>
app.directive("coolCheckbox", function () {
return {
[…]
scope: {
isChecked: "=isChecked",
stateChanged: "&onchange"
},
controller: […],
controllerAs: 'model'
}
}
Isolated Scopes definieren
Folie 21
Variable im Scope
Attribut
10
app.directive("coolCheckbox", function () {
return {
[…]
scope: {
isChecked: "=isChecked",
stateChanged: "&onchange"
},
controller: […],
controllerAs: 'model',
bindToController: true
}
}
Isolated Scopes definieren
Folie 22
Eigenschaften im Controller
Attribut
BindToController & ControllerAs
Verwenden Sie bindToController und
controllerAs gemeinsam!
Folie 23
11
ANGULARJS & ES 6
Page  24
Klassen
Page  25
export class FlugSuchenVM {
constructor($http, $log) {
this.$http = $http;
this.$http = $http;
this.vonFilter = "Graz";
this.nachFilter = "Hamburg";
}
suchen() { […] }
select() { […] }
}
12
Exportierte Elemente importieren
Page  26
// app.js
import { FlugSuchenVM } from 'flug-suchen-vm';
import * as angular from 'angular';
var app = angular.module('flug', []);
app.controller('FlugSuchenVM', FlugSuchenVM);
Relative Pfadangaben oder über Mapping definiert
Lambda-Ausdrücke (Arrow Functions)
Page  27
search() {
var options = { params: […] };
var url = "[…]";
return this
.$http
.get(url, options)
.then((result) => {
this.events = result.data;
})
.catch((result) => {
this.message = "Fehler!";
});
}
13
Lambda-Ausdrücke (Arrow Functions)
Page  28
search() {
var options = { params: […] };
var url = "[…]";
return this
.$http
.get(url, options)
.then((result) => {
this.events = result.data;
})
.catch((result) => {
this.message = "Fehler!";
});
}
EcmaScript 6 heute schon nutzen
Kompilieren zu ES5 („Transpilation“)
Populärer Transpiler: Babel
Package-Manager: jspm
Page  29
14
Module laden via System.js
Page  30
<!– Moduleloader System.js -->
<script src="jspm_packages/system.js"></script>
<!– Konfiguration mit Mappings für System.js -->
<script src="config.js"></script>
<script>
// „Erste“ Java-Script-Datei (hier app.js) laden
System.import('app')
.catch(function(err) { console.error(err); });
</script>
ANGULARJS & TYPESCRIPT
Page  31
15
ES6
Page  32
export class FlugSuchenVM {
$http;
$log;
vonFilter;
nachFilter;
constructor($http, $log) {
this.$http = $http;
this.$log = $log;
this.vonFilter = "Graz";
this.nachFilter = "Hamburg";
}
suchen() { […] }
select() { […] }
}
TypeScript
Page  33
export class FlugSuchenVM {
$http: ng.IHttpService;
$log: ng.ILogService;
vonFilter: string;
nachFilter: string;
constructor($http: ng.IHttpService,
$log : ng.ILogService) {
this.$http = $http;
this.$log = $log;
this.vonFilter = "Graz";
this.nachFilter = "Hamburg";
}
suchen() { […] }
select() { […] }
}
Typ-Deklarationen für die
meisten Frameworks erhältlich!
16
TypeScript heute nutzen
TypeScript-Compiler kompiliert TypeScript
wahlweise nach ES6, ES5 oder ES3
Page  34
Werkzeuge
tsc: TypeScript-Compiler
tsd: Packet-Manager für Typ-Deklarationen
jspm: Packet-Manager mit Unterstützung für
ES6-Module
Page  35
17
ANGULARJS &
ES7-DEKORATOREN
Page  36
Dekoratoren
Page  37
import { Controller } from './decorators/Controller';
@Controller({
selector: 'demoVM'
})
export class DemoVM {
[…]
}
// ES5
function DemoVM() { […] }
DemoVM = Controller({selector: 'demoVM'})(DemoVM) || DemoVM;
18
Implementierung
Page  38
import { app } from '../app-module';
export function Controller(options) {
return function(target) {
app.controller(options.selector, target);
}
}
DEMO
Page  39
19
AUSBLICK
Page  40
Ausblick
 NgForward
 Angular 2-Decoratoren und -Binding-Syntax für
Angular 1.x
 NgUpgrade
 2.0-Komponenten und 1.x-Direktiven mixen
 Wrapper
 Component Router
 Parallelbetrieb
Page  41
20
Component Router
 Noch in Entwicklung!!
 Ziel einer Route --> Komponente
 Komponente in Angular 1.x:
Controller + Template
 Konvention für Controller: XYController
 Konvention für Template: xy/xy.html
 Konvention für Controller-Instanz: xy
 Konfigurieren: $componentLoaderProvider
Page  42
Beispiel
Page  43
class AppController {
constructor($router) {
$router.config([
{path: '/', component: 'home'},
{path: '/flugbuchen', component: 'flugBuchen'}
]);
}
}
21
Zusammenfassung
 Möglichkeiten heute
 Modernes AngularJS 1.x
 ControllerAs, BindToController
 ES6, Dekoratoren, TypeScript
 Künftige Möglichkeiten
 NgUpgrade
 NgForward
 Component Router
Page  44
[mail] manfred.steyer@SOFTWAREarchitekt.at
[web] SOFTWAREarchitekt.at
[twitter] ManfredSteyer
Kontakt

Weitere ähnliche Inhalte

Andere mochten auch

resume
resumeresume
resume
Peggy Britt
 
Lobbyism
LobbyismLobbyism
Lobbyism
Alex Chismar
 
The MoU between NNRA & Nigerian Customs Services
   The MoU between NNRA & Nigerian Customs Services   The MoU between NNRA & Nigerian Customs Services
The MoU between NNRA & Nigerian Customs Services
Abdulhadi Attah Abdullahi
 
Natal
Natal Natal
Natal
Paula Lopes
 
Global Delivery Center Mexico
Global Delivery Center MexicoGlobal Delivery Center Mexico
Global Delivery Center Mexico
Ronan Soares
 
biomedical waste management
biomedical waste management biomedical waste management
biomedical waste management
Aditya Singh
 
Stages of Teachers Development
Stages of Teachers DevelopmentStages of Teachers Development
Stages of Teachers Development
Fatin Alia
 
Time inc uk
Time inc ukTime inc uk
Time inc uk
AmanpreetBhopal
 

Andere mochten auch (8)

resume
resumeresume
resume
 
Lobbyism
LobbyismLobbyism
Lobbyism
 
The MoU between NNRA & Nigerian Customs Services
   The MoU between NNRA & Nigerian Customs Services   The MoU between NNRA & Nigerian Customs Services
The MoU between NNRA & Nigerian Customs Services
 
Natal
Natal Natal
Natal
 
Global Delivery Center Mexico
Global Delivery Center MexicoGlobal Delivery Center Mexico
Global Delivery Center Mexico
 
biomedical waste management
biomedical waste management biomedical waste management
biomedical waste management
 
Stages of Teachers Development
Stages of Teachers DevelopmentStages of Teachers Development
Stages of Teachers Development
 
Time inc uk
Time inc ukTime inc uk
Time inc uk
 

Ähnlich wie Migrationspfade für Angular 2

.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
Manfred Steyer
 
Was bringt Angular 2?
Was bringt Angular 2?Was bringt Angular 2?
Was bringt Angular 2?
Manfred Steyer
 
Angular von 0 auf 100
Angular von 0 auf 100Angular von 0 auf 100
Angular von 0 auf 100
Yvette Teiken
 
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
Manfred Steyer
 
Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015
Manfred Steyer
 
Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015
Manfred 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 1
Manfred 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 1
Manfred Steyer
 
Informatik Seminar Groovy Und Grails
Informatik Seminar Groovy Und GrailsInformatik Seminar Groovy Und Grails
Informatik Seminar Groovy Und Grails
schmichri
 
Automatisierung mit grunt
Automatisierung mit gruntAutomatisierung mit grunt
Automatisierung mit grunt
Christian Keuerleber
 
Testing tools
Testing toolsTesting tools
Testing tools
Sebastian Springer
 
Karlsruher Entwicklertag 2016 - Monitoring 2.0: Alles im Lot?
Karlsruher Entwicklertag 2016 - Monitoring 2.0: Alles im Lot?Karlsruher Entwicklertag 2016 - Monitoring 2.0: Alles im Lot?
Karlsruher Entwicklertag 2016 - Monitoring 2.0: Alles im Lot?
Marc Müller
 
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
Manfred Steyer
 
Web APIs mit ASP.NET Core MVC 1
Web APIs mit ASP.NET Core MVC 1Web APIs mit ASP.NET Core MVC 1
Web APIs mit ASP.NET Core MVC 1
Manfred Steyer
 
Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2
Manfred Steyer
 
Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2
Manfred Steyer
 
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtetAngular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
Manfred Steyer
 
Angular 2 Überblick Oktober 2015
Angular 2 Überblick Oktober 2015Angular 2 Überblick Oktober 2015
Angular 2 Überblick Oktober 2015
Manfred Steyer
 
DWX 2016 - Monitoring 2.0 - Monitoring 2.0: Alles im Lot?
DWX 2016 - Monitoring 2.0 - Monitoring 2.0: Alles im Lot?DWX 2016 - Monitoring 2.0 - Monitoring 2.0: Alles im Lot?
DWX 2016 - Monitoring 2.0 - Monitoring 2.0: Alles im Lot?
Marc Müller
 
ApEx effektiv - DOAG 2010 - OPITZ CONSULTING - Stephan Engel
ApEx effektiv - DOAG 2010 - OPITZ CONSULTING - Stephan EngelApEx effektiv - DOAG 2010 - OPITZ CONSULTING - Stephan Engel
ApEx effektiv - DOAG 2010 - OPITZ CONSULTING - Stephan Engel
OPITZ CONSULTING Deutschland
 

Ähnlich wie Migrationspfade für Angular 2 (20)

.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
 
Was bringt Angular 2?
Was bringt Angular 2?Was bringt Angular 2?
Was bringt Angular 2?
 
Angular von 0 auf 100
Angular von 0 auf 100Angular von 0 auf 100
Angular von 0 auf 100
 
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
 
Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015
 
Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015
 
.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 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
 
Informatik Seminar Groovy Und Grails
Informatik Seminar Groovy Und GrailsInformatik Seminar Groovy Und Grails
Informatik Seminar Groovy Und Grails
 
Automatisierung mit grunt
Automatisierung mit gruntAutomatisierung mit grunt
Automatisierung mit grunt
 
Testing tools
Testing toolsTesting tools
Testing tools
 
Karlsruher Entwicklertag 2016 - Monitoring 2.0: Alles im Lot?
Karlsruher Entwicklertag 2016 - Monitoring 2.0: Alles im Lot?Karlsruher Entwicklertag 2016 - Monitoring 2.0: Alles im Lot?
Karlsruher Entwicklertag 2016 - Monitoring 2.0: Alles im Lot?
 
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
 
Web APIs mit ASP.NET Core MVC 1
Web APIs mit ASP.NET Core MVC 1Web APIs mit ASP.NET Core MVC 1
Web APIs mit ASP.NET Core MVC 1
 
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
 
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtetAngular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
Angular 2: Die Ideen hinter Datenbindung und Formularen im Detail betrachtet
 
Angular 2 Überblick Oktober 2015
Angular 2 Überblick Oktober 2015Angular 2 Überblick Oktober 2015
Angular 2 Überblick Oktober 2015
 
DWX 2016 - Monitoring 2.0 - Monitoring 2.0: Alles im Lot?
DWX 2016 - Monitoring 2.0 - Monitoring 2.0: Alles im Lot?DWX 2016 - Monitoring 2.0 - Monitoring 2.0: Alles im Lot?
DWX 2016 - Monitoring 2.0 - Monitoring 2.0: Alles im Lot?
 
ApEx effektiv - DOAG 2010 - OPITZ CONSULTING - Stephan Engel
ApEx effektiv - DOAG 2010 - OPITZ CONSULTING - Stephan EngelApEx effektiv - DOAG 2010 - OPITZ CONSULTING - Stephan Engel
ApEx effektiv - DOAG 2010 - OPITZ CONSULTING - Stephan Engel
 

Mehr von Manfred 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/store
Manfred Steyer
 
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Manfred Steyer
 
Datengetriebene Web APIs mit Entity Framework
Datengetriebene Web APIs mit Entity FrameworkDatengetriebene Web APIs mit Entity Framework
Datengetriebene Web APIs mit Entity Framework
Manfred 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.0
Manfred 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 2
Manfred 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 Connect
Manfred Steyer
 
Progressive web apps with Angular 2
Progressive web apps with Angular 2Progressive web apps with Angular 2
Progressive web apps with Angular 2
Manfred 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 2
Manfred Steyer
 
Webpack
WebpackWebpack
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
Manfred 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 changes
Manfred Steyer
 
Angular 2: Migration - SSD 2016 London
Angular 2: Migration - SSD 2016 LondonAngular 2: Migration - SSD 2016 London
Angular 2: Migration - SSD 2016 London
Manfred Steyer
 
Angular 2 - SSD 2016 London
Angular 2 - SSD 2016 LondonAngular 2 - SSD 2016 London
Angular 2 - SSD 2016 London
Manfred 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 London
Manfred Steyer
 
Wiederverwendbare Komponenten mit Angular 2.0 – Deep Dive
Wiederverwendbare Komponenten mit Angular 2.0 – Deep DiveWiederverwendbare Komponenten mit Angular 2.0 – Deep Dive
Wiederverwendbare Komponenten mit Angular 2.0 – Deep Dive
Manfred Steyer
 
Angular 2: Routing
Angular 2: RoutingAngular 2: Routing
Angular 2: Routing
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
 
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
 
Komponenten mit Angular 2, Deep Dive
Komponenten mit Angular 2, Deep DiveKomponenten mit Angular 2, Deep Dive
Komponenten mit Angular 2, Deep Dive
Manfred Steyer
 

Mehr von Manfred Steyer (20)

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
 
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
Offlinefähige Browseranwendungen: Progressive Web-Apps mit Angular 2
 
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
 
Wiederverwendbare Komponenten mit Angular 2.0 – Deep Dive
Wiederverwendbare Komponenten mit Angular 2.0 – Deep DiveWiederverwendbare Komponenten mit Angular 2.0 – Deep Dive
Wiederverwendbare Komponenten mit Angular 2.0 – Deep Dive
 
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.
 
Komponenten mit Angular 2, Deep Dive
Komponenten mit Angular 2, Deep DiveKomponenten mit Angular 2, Deep Dive
Komponenten mit Angular 2, Deep Dive
 

Migrationspfade für Angular 2

  • 1. 1 Angular 2.0: Migrationspfade von 1.x zu 2.0 Manfred Steyer ManfredSteyer Aktuelles Buch Page  2
  • 2. 2 Ziel Möglichkeiten zur Migration von AngularJS 1.x auf 2.0 kennen lernen Fokus auf Maßnahmen, die heute schon möglich sind, um Migration vorzubereiten Ausblick auf weitere geplante Möglichkeiten Page  3 Inhalt  Überblick zu Angular 2  Überblick zu Migrationspfade  Controller-As & BindToController  AngularJS & ES6 (ES 2015)  AngularJS & TypeScript  AngularJS & ES7-Dekoratoren  DEMO  Ausblick  Zusammenfassung
  • 3. 3 ÜBERBLICK ZU ANGULAR 2 Page  6 Was ist Angular 2?  Neuimplementierung  Performance  Komponenten  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  8
  • 4. 4 Component Controller Page  9 @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  10 <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>
  • 5. 5 View Page  11 <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> ÜBERBLICK ZU MIGRATIONS-PFADE Page  12
  • 6. 6 Migration Page  13 Angular 1.x Angular 2 Möglichkeiten  Parallelbetrieb über Component Router  Komponenten in Angular 1  Angular 2 mit Angular 1.x-Komponenten und vice versa  Angular-2-Dekoratoren für Angular 1  Automatische Upgrade-Tools, Guides und Best Practices Page  14 [https://github.com/angular/ngUpgrade]
  • 7. 7 Auf Angular 2 heute schon vorbereiten  Modernes AngularJS 1.x schreiben  Controller-As, BindToController  EcmaScript 6/ TypeScript für neuen Code  ES7-Dekoratoren für neuen Code  ng-forward Page  15 CONTROLLER-AS & BIND-TO-CONTROLLER Page  16
  • 8. 8 Controller als Factory für VM (Old Style) Page  18 function FlugSuchenCtrl($scope, $http, $log) { $scope.vm = new FlugSuchenVM($http, $log); } var app = angular.module('app', []); app.controller('flugSuchenCtrl', FlugSuchenCtrl); <body ng-app='app' ng-controller='flugSuchenCtrl'> […] {{ vm.fluege.length }} Flüge gefunden … […] </body> Controller-As (Modern Style) Page  19 function FlugSuchenCtrl($scope, $http, $log) { $scope.vm = new FlugSuchenVM($http, $log); } var app = angular.module('app', []); app.controller('flugSuchenVM', FlugSuchenVM); <body ng-app='app' ng-controller='flugSuchenVM as vm'> […] {{ vm.fluege.length }} Flüge gefunden … […] </body>
  • 9. 9 Controller-As bei Direktiven Folie 20 app.directive("coolCheckbox", function () { return { controller: […], controllerAs: 'model', templateUrl: "/templates/coolCheckBoxTemplateWithNg.html", […] }; });<div ng-class="(model.isChecked) ? 'On' : 'Off' " ng-click="model.toggleState()"> {{model.isChecked}} </div> app.directive("coolCheckbox", function () { return { […] scope: { isChecked: "=isChecked", stateChanged: "&onchange" }, controller: […], controllerAs: 'model' } } Isolated Scopes definieren Folie 21 Variable im Scope Attribut
  • 10. 10 app.directive("coolCheckbox", function () { return { […] scope: { isChecked: "=isChecked", stateChanged: "&onchange" }, controller: […], controllerAs: 'model', bindToController: true } } Isolated Scopes definieren Folie 22 Eigenschaften im Controller Attribut BindToController & ControllerAs Verwenden Sie bindToController und controllerAs gemeinsam! Folie 23
  • 11. 11 ANGULARJS & ES 6 Page  24 Klassen Page  25 export class FlugSuchenVM { constructor($http, $log) { this.$http = $http; this.$http = $http; this.vonFilter = "Graz"; this.nachFilter = "Hamburg"; } suchen() { […] } select() { […] } }
  • 12. 12 Exportierte Elemente importieren Page  26 // app.js import { FlugSuchenVM } from 'flug-suchen-vm'; import * as angular from 'angular'; var app = angular.module('flug', []); app.controller('FlugSuchenVM', FlugSuchenVM); Relative Pfadangaben oder über Mapping definiert Lambda-Ausdrücke (Arrow Functions) Page  27 search() { var options = { params: […] }; var url = "[…]"; return this .$http .get(url, options) .then((result) => { this.events = result.data; }) .catch((result) => { this.message = "Fehler!"; }); }
  • 13. 13 Lambda-Ausdrücke (Arrow Functions) Page  28 search() { var options = { params: […] }; var url = "[…]"; return this .$http .get(url, options) .then((result) => { this.events = result.data; }) .catch((result) => { this.message = "Fehler!"; }); } EcmaScript 6 heute schon nutzen Kompilieren zu ES5 („Transpilation“) Populärer Transpiler: Babel Package-Manager: jspm Page  29
  • 14. 14 Module laden via System.js Page  30 <!– Moduleloader System.js --> <script src="jspm_packages/system.js"></script> <!– Konfiguration mit Mappings für System.js --> <script src="config.js"></script> <script> // „Erste“ Java-Script-Datei (hier app.js) laden System.import('app') .catch(function(err) { console.error(err); }); </script> ANGULARJS & TYPESCRIPT Page  31
  • 15. 15 ES6 Page  32 export class FlugSuchenVM { $http; $log; vonFilter; nachFilter; constructor($http, $log) { this.$http = $http; this.$log = $log; this.vonFilter = "Graz"; this.nachFilter = "Hamburg"; } suchen() { […] } select() { […] } } TypeScript Page  33 export class FlugSuchenVM { $http: ng.IHttpService; $log: ng.ILogService; vonFilter: string; nachFilter: string; constructor($http: ng.IHttpService, $log : ng.ILogService) { this.$http = $http; this.$log = $log; this.vonFilter = "Graz"; this.nachFilter = "Hamburg"; } suchen() { […] } select() { […] } } Typ-Deklarationen für die meisten Frameworks erhältlich!
  • 16. 16 TypeScript heute nutzen TypeScript-Compiler kompiliert TypeScript wahlweise nach ES6, ES5 oder ES3 Page  34 Werkzeuge tsc: TypeScript-Compiler tsd: Packet-Manager für Typ-Deklarationen jspm: Packet-Manager mit Unterstützung für ES6-Module Page  35
  • 17. 17 ANGULARJS & ES7-DEKORATOREN Page  36 Dekoratoren Page  37 import { Controller } from './decorators/Controller'; @Controller({ selector: 'demoVM' }) export class DemoVM { […] } // ES5 function DemoVM() { […] } DemoVM = Controller({selector: 'demoVM'})(DemoVM) || DemoVM;
  • 18. 18 Implementierung Page  38 import { app } from '../app-module'; export function Controller(options) { return function(target) { app.controller(options.selector, target); } } DEMO Page  39
  • 19. 19 AUSBLICK Page  40 Ausblick  NgForward  Angular 2-Decoratoren und -Binding-Syntax für Angular 1.x  NgUpgrade  2.0-Komponenten und 1.x-Direktiven mixen  Wrapper  Component Router  Parallelbetrieb Page  41
  • 20. 20 Component Router  Noch in Entwicklung!!  Ziel einer Route --> Komponente  Komponente in Angular 1.x: Controller + Template  Konvention für Controller: XYController  Konvention für Template: xy/xy.html  Konvention für Controller-Instanz: xy  Konfigurieren: $componentLoaderProvider Page  42 Beispiel Page  43 class AppController { constructor($router) { $router.config([ {path: '/', component: 'home'}, {path: '/flugbuchen', component: 'flugBuchen'} ]); } }
  • 21. 21 Zusammenfassung  Möglichkeiten heute  Modernes AngularJS 1.x  ControllerAs, BindToController  ES6, Dekoratoren, TypeScript  Künftige Möglichkeiten  NgUpgrade  NgForward  Component Router Page  44 [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer Kontakt