Migrationspfade für Angular 2

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>
return {
[…]
scope: {
isChecked: "=isChecked",
stateChanged: "&onchange"
},
controller: […],
controllerAs: 'model'
}
}
Isolated Scopes definieren
Folie 21
Variable im Scope
Attribut

10
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
$http;
$log;
vonFilter;
nachFilter;
constructor($http, $log) {
this.$http = $http;
this.$log = $log;
}
suchen() { […] }
select() { […] }
}
TypeScript
Page  33
$http: ng.IHttpService;
$log: ng.ILogService;
vonFilter: string;
nachFilter: string;
constructor($http: ng.IHttpService,
$log : ng.ILogService) {
this.$http = $http;
this.$log = $log;
}
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

Migrationspfade für Angular 2

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (8)

Similar a Migrationspfade für Angular 2

Similar a Migrationspfade für Angular 2 (20)

Más de Manfred Steyer

Más de Manfred Steyer (20)

Migrationspfade für Angular 2