AngularJS Using AngularJS with TypeScript Angular Controllers in Typescript


As defined in the AngularJS Documentation

When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. A new child scope will be created and made available as an injectable parameter to the Controller's constructor function as $scope.

Controllers can be very easily made using the typescript classes.

module App.Controllers {
    class Address {
        line1: string;
        line2: string;
        city: string;
        state: string;
    export class SampleController {
        firstName: string;
        lastName: string;
        age: number;
        address: Address;
        setUpWatches($scope: ng.IScope): void {
            $scope.$watch(() => this.firstName, (n, o) => {
                //n is string and so is o
        constructor($scope: ng.IScope) {

The Resulting Javascript is

var App;
(function (App) {
    var Controllers;
    (function (Controllers) {
        var Address = (function () {
            function Address() {
            return Address;
        var SampleController = (function () {
            function SampleController($scope) {
            SampleController.prototype.setUpWatches = function ($scope) {
                var _this = this;
                $scope.$watch(function () { return _this.firstName; }, function (n, o) {
                    //n is string and so is o
            return SampleController;
        Controllers.SampleController = SampleController;
    })(Controllers = App.Controllers || (App.Controllers = {}));
})(App || (App = {}));

After making the controller class let the angular js module about the controller can be done simple by using the class

 .controller('exampleController', App.Controller.SampleController)