Modern angular 02_angular_mit_type_script
0 gefällt mir407 aufrufe
Das Dokument bietet eine Einführung in AngularJS unter Verwendung von ES6 und TypeScript, einschließlich einer Übersicht über die Entwicklung von Anwendungen und wichtigen Konzepten wie Klassen, Lambda-Ausdrücke und Transpilation. Es enthält auch praktische Demos zur Verwendung von TypeScript und ES6 in AngularJS-Anwendungen. Der Inhalt richtet sich an Entwickler, die diese Technologien effektiv nutzen möchten.
![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);](https://image.slidesharecdn.com/modernangular02angularmittypescript-151006101142-lva1-app6892/85/Modern-angular-02_angular_mit_type_script-2-320.jpg)
![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);
})();](https://image.slidesharecdn.com/modernangular02angularmittypescript-151006101142-lva1-app6892/85/Modern-angular-02_angular_mit_type_script-3-320.jpg)
![4
Alternative für AngularJS
Page 7
angular
.module('flug')
.controller('FlugSuchenVM', function ($http, $log) {
[…]
});
ÜBERBLICK:
ANGULARJS UND ES 6
Page 8](https://image.slidesharecdn.com/modernangular02angularmittypescript-151006101142-lva1-app6892/85/Modern-angular-02_angular_mit_type_script-4-320.jpg)
![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](https://image.slidesharecdn.com/modernangular02angularmittypescript-151006101142-lva1-app6892/85/Modern-angular-02_angular_mit_type_script-5-320.jpg)
![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!";
});
}](https://image.slidesharecdn.com/modernangular02angularmittypescript-151006101142-lva1-app6892/85/Modern-angular-02_angular_mit_type_script-6-320.jpg)
![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);](https://image.slidesharecdn.com/modernangular02angularmittypescript-151006101142-lva1-app6892/85/Modern-angular-02_angular_mit_type_script-8-320.jpg)
![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](https://image.slidesharecdn.com/modernangular02angularmittypescript-151006101142-lva1-app6892/85/Modern-angular-02_angular_mit_type_script-9-320.jpg)
Modern angular 02_angular_mit_type_script
- 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