AngularJS
Usando AngularJS con TypeScript

Sintaxis

• $ scope: ng.IScope - esta es una forma en mecanografiado para definir el tipo para una variable en particular.

Controladores angulares en mecanografiado

Como se define en la Documentación de AngularJS.

Cuando se conecta un Controlador al DOM a través de la directiva ng-controller, Angular creará una instancia de un nuevo objeto Controlador, utilizando la función de constructor del Controlador especificado. Se creará un nuevo ámbito secundario y estará disponible como un parámetro inyectable para la función del constructor del Controlador como $ alcance.

Los controladores se pueden hacer muy fácilmente utilizando las clases de escritura.

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);
        }
    }
}

El Javascript resultante es

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

Después de hacer la clase de controlador, deje que el módulo angular js sobre el controlador se pueda hacer simple usando la clase

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

Uso del controlador con la sintaxis de ControllerAs

El controlador que hemos creado puede ser instanciado y usado usando el controller as Sintaxis. Eso es porque hemos puesto la variable directamente en la clase del controlador y no en el $scope .

Usar el controller as someName es controller as someName el controlador de $scope sí mismo. Por lo tanto, no hay necesidad de inyectar $ scope como la dependencia en el controlador.

Forma tradicional:

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

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

Ahora, con el controller as Sintaxis :

// 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>

Si crea una instancia de una "clase" en JavaScript, puede hacer esto:

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

Entonces, ahora podemos usar la instancia jsObj para acceder a cualquier método o propiedad de jsClass .

En angular, hacemos el mismo tipo de cosa. Usamos el controlador como sintaxis para la instanciación.

Usando Bundling / Minification

La forma en que se inyecta $ scope en las funciones del constructor del controlador es una forma de demostrar y usar la opción básica de inyección de dependencia angular, pero no está lista para la producción ya que no se puede minimizar. Eso es porque el sistema de minificación cambia los nombres de las variables y la inyección de dependencia de anguar utiliza los nombres de los parámetros para saber qué se debe inyectar. Entonces, para un ejemplo, la función constructora de ExampleController se reduce al siguiente código.

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

y $scope se cambia a n !
para superar esto podemos agregar una matriz $ inject ( string[] ). De modo que la DI de angular sabe qué inyectar en qué posición está la función de constructor de los controladores.
Así que el texto escrito arriba cambia a

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);
        }
    }
}

¿Por qué ControllerAs Syntax?

Función del controlador

La función de controlador no es más que una función de constructor de JavaScript. Por lo tanto, cuando una vista carga el function context la function context ( this ) se establece en el objeto controlador.

Caso 1 :

this.constFunction = function() { ... }

Se crea en el controller object , no en $scope . Las vistas no pueden acceder a las funciones definidas en el objeto controlador.

Ejemplo:

<a href="#123" ng-click="constFunction()"></a> // It will not work

Caso 2:

$scope.scopeFunction = function() { ... }

Se crea en el $scope object , no en el controller object . Las vistas solo pueden acceder a las funciones definidas en el objeto $scope .

Ejemplo:

<a href="#123" ng-click="scopeFunction()"></a> // It will work

¿Por qué ControllerAs?

• ControllerAs sintaxis de ControllerAs hace que sea mucho más claro dónde se manipulan los oneCtrl.name anotherCtrl.name oneCtrl.name y anotherCtrl.name hace que sea mucho más fácil identificar que tiene un name asignado por varios controladores diferentes para diferentes propósitos, pero si ambos usan el mismo $scope.name y dos elementos HTML diferentes en una página que están vinculados a {{name}} lo que es difícil identificar cuál es de cuál controlador.

• Ocultando el $scope y exponiendo a los miembros desde el controlador a la vista a través de un intermediary object . Al configurar this.* , Podemos exponer solo lo que queremos exponer desde el controlador a la vista.

    <div ng-controller="FirstCtrl">
        {{ name }}
        <div ng-controller="SecondCtrl">
            {{ name }}
            <div ng-controller="ThirdCtrl">
                {{ name }}
            </div>
        </div>
    </div>
  

Aquí, en el caso anterior, {{ name }} será muy confuso de usar y tampoco sabemos cuál está relacionado con qué controlador.

<div ng-controller="FirstCtrl as first">
    {{ first.name }}
    <div ng-controller="SecondCtrl as second">
        {{ second.name }}
        <div ng-controller="ThirdCtrl as third">
            {{ third.name }}
        </div>
    </div>
</div>

¿Por qué $ alcance?

• Utilice $scope cuando necesite acceder a uno o más métodos de $ scope como $watch , $digest , $emit , $http etc.
• limite qué propiedades y / o métodos están expuestos a $scope , luego, explícitamente pasándolos a $scope según sea necesario.