Modern angular 02_angular_mit_type_script
11
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
-
Upload
manfred-steyer -
Category
Internet
-
view
294 -
download
0
Transcript of Modern angular 02_angular_mit_type_script
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
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
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
Alternative für AngularJS
Page 7
angular.module('flug').controller('FlugSuchenVM', function ($http, $log) {
[…]});
ÜBERBLICK: ANGULARJS UND ES 6
Page 8
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.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
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
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) ladenSystem.import('app')
.catch(function(err) { console.error(err); });
</script>
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
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
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
DEMO: NG & TYPESCRIPT
Page 21
DEMO: NG & ES6 (BABEL, GULP)
Page 22
