AngularJS
Utiliser AngularJS avec TypeScript

Syntaxe

• $ scope: ng.IScope - c'est une façon de dactylographier un type pour une variable particulière.

Contrôleurs angulaires en caractères dactylographiés

Comme défini dans la documentation AngularJS

Lorsqu'un contrôleur est connecté au DOM via la directive ng-controller, Angular instanciera un nouvel objet Controller, en utilisant la fonction constructeur du contrôleur spécifiée. Une nouvelle étendue enfant sera créée et mise à disposition en tant que paramètre injectable à la fonction constructeur du contrôleur en tant que $ scope.

Les contrôleurs peuvent être réalisés très facilement en utilisant les classes dactylographiées.

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

Le Javascript résultant est

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

Après avoir fait la classe de contrôleur laisser le module angulaire js autour du contrôleur peut être fait simple en utilisant la classe

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

Utilisation du contrôleur avec la syntaxe ControllerAs

Le contrôleur que nous avons créé peut être instancié et utilisé en utilisant le controller as syntaxe. C'est parce que nous avons placé la variable directement sur la classe du contrôleur et non sur la $scope .

Utiliser controller as someName consiste à controller as someName le contrôleur de $scope même. Il n'est donc pas nécessaire d'injecter $ scope en tant que dépendance dans le contrôleur.

Façon traditionnelle :

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

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

Maintenant, avec le controller as syntaxe :

// 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 vous instanciez une "classe" en JavaScript, vous pouvez le faire:

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

Donc, maintenant, nous pouvons utiliser l'instance jsObj pour accéder à toute méthode ou propriété de jsClass .

En angulaire, nous faisons le même type de chose. Nous utilisons le contrôleur comme syntaxe pour l'instanciation.

Utilisation de groupage / minification

La manière dont $ scope est injecté dans les fonctions de constructeur du contrôleur est une façon de démontrer et d'utiliser l'option de base de l' injection de dépendance angulaire, mais n'est pas prête pour la production car elle ne peut pas être réduite. C'est parce que le système de minification modifie les noms de variables et l'injection de dépendance d'anguar utilise les noms de paramètres pour savoir ce qui doit être injecté. Ainsi, pour un exemple, la fonction constructeur de ExampleController est réduite au code suivant.

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

et $scope est changé en n !
pour surmonter cela, nous pouvons ajouter un tableau $ inject ( string[] ). Ainsi, l'ID angulaire sait quoi injecter à quelle position se trouve la fonction constructeur du contrôleur.
Donc, le texte ci-dessus change pour

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

Pourquoi la syntaxe ControllerAs?

Fonction du contrôleur

La fonction de contrôleur n'est rien d'autre qu'une fonction de constructeur JavaScript. Par conséquent, lorsqu'une vue se charge, le function context ( this ) est défini sur l'objet contrôleur.

Cas 1 :

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

Il est créé dans l' controller object , pas sur $scope . les vues ne peuvent pas accéder aux fonctions définies sur l'objet contrôleur.

Exemple :

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

Cas 2:

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

Il est créé dans l' $scope object , pas sur controller object . les vues ne peuvent accéder qu'aux fonctions définies sur l'objet $scope .

Exemple :

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

Pourquoi les contrôleurs?

• ControllerAs syntaxe rend beaucoup plus claire où les objets sont en cours manipulated.Having oneCtrl.name et anotherCtrl.name rend beaucoup plus facile d'identifier que vous avez un name attribué par plusieurs contrôleurs différents à des fins différentes , mais si les deux mêmes que celles utilisées $scope.name et ayant deux éléments HTML différents sur une page, tous deux liés à {{name}} il est alors difficile d'identifier celui qui provient de quel contrôleur.

• Masquer la $scope et exposer les membres du contrôleur à la vue via un intermediary object . En définissant this.* , Nous pouvons exposer exactement ce que nous voulons exposer du contrôleur à la vue.

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

Ici, dans le cas ci-dessus, {{ name }} sera très déroutant à utiliser et nous ne savons pas non plus lequel est lié à quel contrôleur.

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

Pourquoi $ scope

• Utilisez $scope lorsque vous avez besoin d'accéder à une ou plusieurs méthodes de $ scope telles que $watch , $digest , $emit , $http etc.
• limiter les propriétés et / ou méthodes exposées à $scope , puis les transmettre explicitement à $scope si nécessaire.