AngularJS 1.x mit TypeScript und ES6

1. 1
AngularJS mit ES6 und TypeScript
Manfred Steyer
ManfredSteyer
Inhalt
Recap: AngularJS und ES5
Überblick: AngularJS und ES6
Überblick: AngularJS und TypeScript
DEMO: Angular mit TypeScript
DEMO: Angular mit ES6 (Babel, Gulp)
Page  2

2. 2
RECAP:
ANGULARJS UND ES5
Page  3
Konstruktor-Funktion
Page  4
function FlugSuchenVM($http, $log) {
var that = this;
that.vonFilter = "Graz";
that.nachFilter = "Hamburg";
that.selectedFlug = null;
that.fluege = [];
that.message = "";
that.suchen = function() { … }
that.select = function() { … }
}
var vm = new FlugSuchenVM($http, $log);

3. 3
Namensraum
Page  5
function FlugSuchenVM($http, $log) {
[…]
}
„Verschmutzt“ den globalen Namensraum.
Immediately-Invoked Function
Expression (IIFE)
Page  6
(function () {
function FlugSuchenVM($http, $log) {
[…]
}
angular
.module('flug')
.controller('FlugSuchenVM', FlugSuchenVM);
})();

4. 4
Alternative für AngularJS
Page  7
angular
.module('flug')
.controller('FlugSuchenVM', function ($http, $log) {
[…]
});
ÜBERBLICK:
ANGULARJS UND ES 6
Page  8

5. 5
Klassen
Page  9
export class FlugSuchenVM {
constructor($http, $log) {
this.$http = $http;
this.$http = $http;
this.vonFilter = "Graz";
this.nachFilter = "Hamburg";
}
suchen() { […] }
select() { […] }
}
var vm = new FlugSuchenVM($http, $log);
Exportierte Elemente importieren
Page  10
// 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

6. 6
Lambda-Ausdrücke (Arrow Functions)
Page  11
search() {
var options = { params: […] };
var url = "[…]";
return this
.$http
.get(url, options)
.then((result) => {
this.events = result.data;
})
.catch((result) => {
this.message = "Fehler!";
});
}
Lambda-Ausdrücke (Arrow Functions)
Page  12
search() {
var options = { params: […] };
var url = "[…]";
return this
.$http
.get(url, options)
.then((result) => {
this.events = result.data;
})
.catch((result) => {
this.message = "Fehler!";
});
}

7. 7
EcmaScript 6 heute schon nutzen
Cross-Kompilieren zu ES5 („Transpilation“)
Populärer Transpiler: Babel
Package-Manager: jspm
Page  13
Module laden via System.js
Page  14
<!– 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>

8. 8
ÜBERBLICK ZU
TYPESCRIPT
Page  15
ES6
Page  16
export class FlugSuchenVM {
$http;
$log;
$vonFilter;
$nachFilter;
constructor($http, $log) {
this.$http = $http;
this.$http = $http;
this.vonFilter = "Graz";
this.nachFilter = "Hamburg";
}
suchen() { […] }
select() { […] }
}
var vm = new FlugSuchenVM($http, $log);

9. 9
TypeScript
Page  17
export class FlugSuchenVM {
$http: ng.IHttpService;
$log: ng.ILogService;
$vonFilter: string;
$nachFilter: string;
constructor($http: ng.IHttpService,
$log : ng.ILogService) {
this.$http = $http;
this.$http = $http;
this.vonFilter = "Graz";
this.nachFilter = "Hamburg";
}
suchen() { […] }
select() { […] }
}
Typ-Deklarationen für die
meisten Frameworks erhältlich!
Datentypen
Page  18
number string boolean
Function Object any
Eigene
Kassen
Eigene
Interfaces

10. 10
TypeScript heute nutzen
TypeScript-Compiler kompiliert TypeScript
wahlweise nach ES6, ES5 oder ES3
Page  19
Werkzeuge
tsc: TypeScript-Compiler
tsd: Packet-Manager für Typ-Deklarationen
jspm: Packet-Manager mit Unterstützung für
ES6-Module
Page  20

11. 11
DEMO:
NG & TYPESCRIPT
Page  21
DEMO:
NG & ES6 (BABEL, GULP)
Page  22