Verwenden von AngularJS mit TypeScript

Der folgende Beitrag zeigt wie man, über Visual Sudio, AngularJS 1.X mit wenigen Schritten in einem TypeScript Projekt einbinden und verwenden kann.

Einrichten von TypeScript

Um in TypeSctipt AngularJS verwenden zu können wird die Type Definition „angularjs.TypeScript.DefinitelyTyped“ benötigt. Diese kann als NuGet package in dem Projekt hinzugefügt werden. Im Anschluss ist die Verwendung von AngularJS mit IntelliSense innerhalb der TypeSctipt Dateien möglich.

angularjs.TypeScript.DefinitelyTyped

Anschließend müssen die JavaScript Bibliotheken von AngularJS sowie jQuery eingebunden werden, falls dies noch nicht geschehen ist. Die JavaScript Bibliotheken sind ebenfalls als NuGet package vorhanden.

AngularJS Applikation

In TypeSctipt wird eine AngularJS Anwendung wie in JavaSctipt über ein Modul geladen, welches durch das HTML Attribut ng-app angegeben wird.

Das Modul wird in der myApp.ts geladen und kann wie in dem folgenden Beispiel aussehen:

var app: ng.IModule = angular.module("myApp", [])

Datenbindung

Die Datenbindung erfolgt über den Scope. Um den Scope in TypeScript verwenden zu können wird ein eigenes Interface benötigt, welches von ng.IScope ableitet.

export interface IMyScope extends ng.IScope {
message: string
}

Controller

Controller werden als eigene Klasse erstellt und können wie folgt aussehen:

app.controller("myController", ["$scope", ($scope) => new MyController($scope)]);

export class MyController {
constructor(private $scope: IMyScope) {
$scope.message = "MyController";
}
}

Alternativ ist auch die folgende Schreibweise möglich:

app.controller("myController", MyController);

export class MyController {
static $inject = ["$scope"];
constructor(private $scope: IMyScope) {
$scope.message = "MyController";
}
}

Direktiven

Direktiven wergen ebenfalls als eigene Klasse erstellt und verwenden das Interface ng.IDirective. Eine Direktive kann wie in dem folgenden Beispiel aussehen:

app.directive("myDirective", () => new MyDirective());

export class MyDirective implements ng.IDirective {
constructor() {
return {
restrict: 'A',
template: '<div>myDirective</div>',
replace: true

};
}
}

Service

Für einen Service wird ebenfalls eine eigene Klasse erstellt. Außerdem benötigt jeder Service ein eigenes Interface. Ein Service kann folgendermaßen erstellt werden:

app.service("myService", ["$http", "$q", ($http, $q) => new MyService($http, $q)])

export interface IMyService {
getData()
}

export class MyService implements IMyService {
http: ng.IHttpService;
q: ng.IQService;
constructor($http: ng.IHttpService, $q: ng.IQService) {
this.http = $http;
this.q = $q;
}
public getData(): string {
return "MyServiceData";
}
}

Ein Service kann beispielsweise in einem Controller wie folgt verwendet werden:

app.controller("myController", ["$scope", "myService", ($scope, myService) => new MyController($scope, myService)]);

export class MyController {
constructor(private $scope: IMyScope, myService: IMyService) {
$scope.message = myService.getData();
}
}