AngularJS
Utilizzo di AngularJS con TypeScript

Sintassi

• $ scope: ng.IScope - questo è il modo in typescript per definire il tipo per una particolare variabile.

Controller angolari in dattiloscritto

Come definito nella documentazione di AngularJS

Quando un controller è collegato al DOM tramite la direttiva ng-controller, Angular crea un'istanza di un nuovo oggetto Controller, utilizzando la funzione di costruzione del controller specificata. Un nuovo ambito figlio verrà creato e reso disponibile come parametro iniettabile alla funzione di costruzione del Controller come $ scope.

I controller possono essere creati molto facilmente utilizzando le classi dattiloscritto.

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

Il Javascript risultante è

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

Dopo aver effettuato la classe controller, il modulo angular js sul controller può essere eseguito in modo semplice utilizzando la classe

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

Uso del controller con la sintassi ControllerAs

Il Controller che abbiamo creato può essere istanziato e utilizzato usando il controller as Sintassi. Questo perché abbiamo messo la variabile direttamente sulla classe controller e non su $scope .

Usando controller as someName è necessario separare il controller da $scope Quindi, non è necessario iniettare $ scope come dipendenza nel controller.

Modo tradizionale:

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

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

Ora, con controller as Sintassi :

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

Se istanziate una "classe" in JavaScript, potreste fare questo:

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

Quindi, ora possiamo usare jsObj istanza di jsObj per accedere a qualsiasi metodo o proprietà di jsClass .

In angolare, facciamo lo stesso tipo di cosa. Usiamo il controller come sintassi per l'istanziazione.

Utilizzo di bundling / minification

Il modo in cui viene iniettato $ scope nelle funzioni di costruzione del controllore è un modo per dimostrare e utilizzare l'opzione di base dell'iniezione di dipendenza angolare, ma non è pronta per la produzione in quanto non può essere minimizzata. Questo perché il sistema di minificazione modifica i nomi delle variabili e l'iniezione delle dipendenze di anguar utilizza i nomi dei parametri per sapere cosa deve essere iniettato. Quindi per un esempio la funzione di costruzione di ExampleController viene ridotta al seguente codice.

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

e $scope è cambiato in n !
per ovviare a ciò possiamo aggiungere un array di $ inject ( string[] ). In modo che il DI angolare sa cosa iniettare in quale posizione è la funzione di costruzione del controllore.
Quindi il dattiloscritto sopra diventa

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

Perché la sintassi di ControllerAs?

Funzione controller

La funzione controller non è altro che una funzione di costruzione JavaScript. Quindi, quando una vista carica il function context della function context ( this ) viene impostato sull'oggetto controller.

Caso 1 :

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

Viene creato controller object , non in $scope . le viste non possono accedere alle funzioni definite sull'oggetto controller.

Esempio :

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

Caso 2:

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

Viene creato $scope object , non controller object . le viste possono accedere solo alle funzioni definite sull'oggetto $scope .

Esempio :

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

Perché ControllerAs?

• ControllerAs sintassi ControllerAs rende molto più chiaro dove gli oggetti vengono manipolati. oneCtrl.name e anotherCtrl.name rende molto più facile identificare che si ha un name assegnato da più controller diversi per scopi diversi, ma se entrambi hanno usato lo stesso $scope.name e due diversi elementi HTML su una pagina che sono entrambi associati a {{name}} quindi è difficile identificare quale sia il controller.

• Nascondere lo $scope ed esporre i membri dal controller alla vista tramite un intermediary object . Impostando this.* , possiamo esporre solo ciò che vogliamo esporre dal controller alla vista.

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

Qui, nel caso di cui sopra {{ name }} sarà molto confuso da usare e inoltre non sappiamo quale sia correlato a quale controller.

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

Perché $ scope?

• Usa $scope quando devi accedere a uno o più metodi di $ scope come $watch , $digest , $emit , $http ecc.
• limitare quali proprietà e / o metodi sono esposti a $scope , quindi passarli esplicitamente a $scope come necessario.