AngularJS


Using AngularJS with TypeScript All Versions

0.9.0
0.9.1
0.9.2
0.9.3
0.9.4
0.9.5
0.9.6
0.9.7
0.9.9
0.9.10
0.9.11
0.9.12
0.9.13
0.9.14
0.9.15
0.9.16
0.9.17
0.9.18
0.9.19
0.10.0
0.10.1
0.10.2
0.10.3
0.10.4
0.10.5
0.10.6
1.0.0rc1
g3-v1.0.0rc1
g3-v1.0.0-rc2
v1.0.0rc2
v1.0.0rc3
v1.0.0rc4
v1.0.0rc5
v1.0.0rc6
v1.0.0rc7
v1.0.0rc8
v1.0.0rc9
v1.0.0rc10
v1.0.0rc11
v1.0.0rc12
1.0.0
1.0.1
1.0.2
1.1.0
1.0.3
1.1.1
1.0.4
1.1.2
1.0.5
1.1.3
1.0.6
1.1.4
1.0.7
1.1.5
1.2.0rc1
1.0.8
1.2.0-rc.2
1.2.0-rc.3
1.2.0
1.2.1
1.2.2
1.2.3
1.2.4
1.2.5
1.2.6
1.2.7
1.2.8
1.2.9
1.2.10
1.2.11
1.2.12
1.2.13
1.2.14
1.3.0-beta.1
1.3.0-beta.2
1.3.0-beta.3
1.2.15
1.3.0-beta.4
1.2.16
1.3.0-beta.5
1.3.0-beta.6
1.3.0-beta.7
1.3.0-beta.8
1.3.0-beta.9
1.3.0-beta.10
1.2.17
1.3.0-beta.11
1.2.18
1.3.0-beta.12
1.3.0-beta.13
1.2.19
1.3.0-beta.14
1.2.20
1.3.0-beta.15
1.3.0-beta.16
1.2.21
1.3.0-beta.17
1.2.22
1.3.0-beta.18
1.2.23
1.3.0-beta.19
1.3.0-rc.0
1.2.24
1.3.0-rc.1
1.2.25
1.3.0-rc.2
1.3.0-rc.3
1.3.0-rc.4
1.2.26
1.3.0-rc.5
1.3.0
1.3.1
1.3.2
1.3.3
1.2.27
1.3.4
1.3.5
1.3.6
1.3.7
1.2.28
1.3.8
1.4.0-beta.0
1.3.9
1.3.10
1.4.0-beta.1
1.3.11
1.4.0-beta.2
1.3.12
1.4.0-beta.3
1.3.13
1.4.0-beta.4
1.3.14
1.4.0-beta.5
1.3.15
1.4.0-beta.6
1.4.0-rc.0
1.4.0-rc.1
1.4.0-rc.2
1.4.0
1.3.16
1.4.1
1.3.17
1.4.2
1.4.3
1.4.4
1.3.18
1.4.5
1.3.19
1.4.6
1.5.0-beta.0
1.2.29
1.3.20
1.4.7
1.5.0-beta.1
1.5.0-beta.2
1.4.8
1.5.0-rc.0
1.5.0-rc.1
1.4.9
1.5.0-rc.2
1.5.0
1.4.10
1.5.1
1.5.2
1.5.3
1.5.4
1.5.5
1.4.11
1.5.6
1.4.12
1.5.7
1.2.30
1.5.8

This draft deletes the entire topic.

expand all collapse all

Examples

  • 4

    The way the $scope is injected in the controller's constructor functions is a way to demonstrate and use the basic option of angular dependency injection but is not production ready as it cannot be minified. Thats because the minification system changes the variable names and anguar's dependency injection uses the parameter names to know what has to be injected. So for an example the ExampleController's constructor function is minified to the following code.

    function n(n){this.setUpWatches(n)
    

    and $scope is changed to n!
    to overcome this we can add an $inject array(string[]). So that angular's DI knows what to inject at what position is the controllers constructor function.
    So the above typescript changes to

    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
                });
            };
            static $inject : string[] = ['$scope'];
            constructor($scope: ng.IScope) {
                this.setUpWatches($scope);
            }
        }
    }
    
  • 3

    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) {
                this.setUpWatches($scope);
            }
        }
    }
    

    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) {
                    this.setUpWatches($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 = {}));
    //# sourceMappingURL=ExampleController.js.map
    

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

    app
     .module('app')
     .controller('exampleController', App.Controller.SampleController)
    
  • 1

    The Controller we have made can be instantiated and used using controller as Syntax. That's because we have put variable directly on the controller class and not on the $scope.

    Using controller as someName is to seperate the controller from $scope itself.So, there is no need of injecting $scope as the dependency in the controller.

    Traditional way :

    // we are using $scope object.
    app.controller('MyCtrl', function ($scope) {
      $scope.name = 'John';
    });
    
    <div ng-controller="MyCtrl">
      {{name}}
    </div>
    

    Now, with controller as Syntax :

    // we are using the "this" Object instead of "$scope"
    app.controller('MyCtrl', function() {
      this.name = 'John';
    });
    
    <div ng-controller="MyCtrl as info">
      {{info.name}}
    </div>
    

    If you instantiate a "class" in JavaScript, you might do this :

    var jsClass = function () {
      this.name = 'John';
    }
    var jsObj = new jsClass();
    

    So, now we can use jsObj instance to access any method or property of jsClass.

    In angular, we do same type of thing.we use controller as syntax for instantiation.

I am downvoting this example because it is...

Syntax

  • $scope : ng.IScope - this is way in typescript to define type for a particular variable.

Parameters

Parameters

Remarks

Remarks

Still have a question about Using AngularJS with TypeScript? Ask Question

Using Bundling / Minification

4

The way the $scope is injected in the controller's constructor functions is a way to demonstrate and use the basic option of angular dependency injection but is not production ready as it cannot be minified. Thats because the minification system changes the variable names and anguar's dependency injection uses the parameter names to know what has to be injected. So for an example the ExampleController's constructor function is minified to the following code.

function n(n){this.setUpWatches(n)

and $scope is changed to n!
to overcome this we can add an $inject array(string[]). So that angular's DI knows what to inject at what position is the controllers constructor function.
So the above typescript changes to

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
            });
        };
        static $inject : string[] = ['$scope'];
        constructor($scope: ng.IScope) {
            this.setUpWatches($scope);
        }
    }
}

Angular Controllers in Typescript

3

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) {
            this.setUpWatches($scope);
        }
    }
}

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) {
                this.setUpWatches($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 = {}));
//# sourceMappingURL=ExampleController.js.map

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

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

Using the Controller using the Controller as Syntax

1

The Controller we have made can be instantiated and used using controller as Syntax. That's because we have put variable directly on the controller class and not on the $scope.

Using controller as someName is to seperate the controller from $scope itself.So, there is no need of injecting $scope as the dependency in the controller.

Traditional way :

// we are using $scope object.
app.controller('MyCtrl', function ($scope) {
  $scope.name = 'John';
});

<div ng-controller="MyCtrl">
  {{name}}
</div>

Now, with controller as Syntax :

// we are using the "this" Object instead of "$scope"
app.controller('MyCtrl', function() {
  this.name = 'John';
});

<div ng-controller="MyCtrl as info">
  {{info.name}}
</div>

If you instantiate a "class" in JavaScript, you might do this :

var jsClass = function () {
  this.name = 'John';
}
var jsObj = new jsClass();

So, now we can use jsObj instance to access any method or property of jsClass.

In angular, we do same type of thing.we use controller as syntax for instantiation.

Topic Outline