Migrationspfade für Angular 2
21
1 Angular 2.0: Migrationspfade von 1.x zu 2.0 Manfred Steyer ManfredSteyer Aktuelles Buch Page 2
-
Upload
manfred-steyer -
Category
Internet
-
view
603 -
download
0
Transcript of 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",
[…]
};
});<divng-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.jsimport { 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) ladenSystem.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 {
[…]}
// ES5function 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] [email protected]
[web] SOFTWAREarchitekt.at
[twitter] ManfredSteyer
Kontakt
