AngularJs – Typescript integrieren

Downloads:

Hauptmodul

angular.module('app', ['ngRoute']);

angular.module('app').config(function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: 'views/home.html',
        controller: 'HomeController'
    });

    $routeProvider.otherwise({
        redirectTo: '/'
    });
});

Controller

class HomeController {
   static $inject = ['$scope'];
   constructor(private $scope: ng.IScope) {
       ($scope).vm = this;
       this.title = "hello Typescript";
   }
   public title: string;
}
angular.module('app').controller('HomeController', HomeController);

Interface

interface ITest {
   name: string;
}

Service

class TestService {
    constructor() {
    }
}

angular.module('app').service("TestService", TestService);

Directive

var TestFactory = (): ng.IDirective => {
   return new Test();
}

class Test implements ng.IDirective {
   constructor() {
   }
   public restrict = 'EA';
   public templateUrl = 'directives/testTemplate.html';
   public scope = {
   }

   public link = (scope: ng.IScope, instanceElement: ng.IAugmentedJQuery, instanceAttributes: ng.IAttributes, transclude: ng.ITranscludeFunction) => {
   }
}

angular.module('app').directive("test", TestFactory);