AngularJS
Verwenden von AngularJS mit TypeScript

Syntax

• $ scope: ng.IScope - Dies ist eine Methode in Typescript, um den Typ für eine bestimmte Variable zu definieren.

Winkelsteuerungen in Typoscript

Wie in der AngularJS- Dokumentation definiert

Wenn ein Controller über die ng-controller-Direktive an das DOM angeschlossen wird, instanziiert Angular ein neues Controller-Objekt mit der angegebenen Konstruktorfunktion des Controllers. Ein neuer untergeordneter Bereich wird erstellt und der Konstruktorfunktion des Controllers als ein injizierbarer Parameter als $ scope zur Verfügung gestellt.

Controller lassen sich mit den Typoscript-Klassen sehr einfach erstellen.

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

Das resultierende Javascript ist

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

Nachdem Sie die Controller-Klasse erstellt haben, lassen Sie das Winkelmodul js über den Controller mithilfe der Klasse einfach ausführen

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

Verwenden des Controllers mit der ControllerAs-Syntax

Der von uns erstellte Controller kann instanziiert und unter Verwendung des controller as Syntax verwendet werden. Das liegt daran, dass wir Variable direkt in die Controller-Klasse und nicht in den $scope .

controller as someName zu verwenden, bedeutet, den Controller von $scope controller as someName ist es nicht erforderlich, $ scope als Abhängigkeit in den Controller controller as someName .

Traditioneller Weg:

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

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

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

Wenn Sie eine "Klasse" in JavaScript instanziieren, können Sie Folgendes tun:

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

Jetzt können wir die jsObj Instanz verwenden, um auf jede Methode oder Eigenschaft von jsClass .

In angle verwenden wir die gleiche Art von Dingen. Wir verwenden Controller als Syntax für die Instantiierung.

Bündelung / Minimierung verwenden

Durch die Injektion des $ scope in die Konstruktorfunktionen des Controllers kann die grundlegende Option der Winkelabhängigkeitseinspritzung demonstriert und verwendet werden , sie ist jedoch nicht produktionsbereit, da sie nicht minimiert werden kann. Das liegt daran, dass das Minifizierungssystem die Variablennamen ändert und die Abhängigkeitseingabe von Anguar anhand der Parameternamen weiß, was injiziert werden muss. Für ein Beispiel ist die Konstruktorfunktion von ExampleController auf den folgenden Code reduziert.

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

und $scope wird in n geändert!
Um dies zu überwinden, können wir ein $ inject-Array ( string[] ) hinzufügen. Der DI dieses Winkels weiß also, an welcher Position die Konstrukteur der Regler zu injizieren ist.
Das obige Typoskript ändert sich also zu

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

Warum ControllerAs-Syntax?

Controller-Funktion

Die Controller-Funktion ist nichts weiter als eine JavaScript-Konstruktorfunktion. Wenn also eine Ansicht geladen wird, wird der function context ( this ) auf das Controller-Objekt gesetzt.

Fall 1 :

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

Sie wird im controller object , nicht in $scope . Ansichten können nicht auf die auf dem Controller-Objekt definierten Funktionen zugreifen.

Beispiel:

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

Fall 2:

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

Sie wird im $scope object , nicht im controller object . Ansichten können nur auf die für das $scope Objekt definierten Funktionen zugreifen.

Beispiel:

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

Warum ControllerAs?

• ControllerAs Syntax macht es viel klarer , wo Objekte werden manipulated.Having oneCtrl.name und anotherCtrl.name macht es viel einfacher zu erkennen , dass Sie einen name von mehreren verschiedenen Controllern für unterschiedliche Zwecke zugewiesen , aber wenn beide verwendeten gleicher $scope.name und mit Wenn auf einer Seite zwei verschiedene HTML-Elemente vorhanden sind, die beide an {{name}} gebunden sind, ist es schwierig zu erkennen, welches Element von welchem ​​Controller stammt.

• Den $scope ausblenden und die Mitglieder über ein intermediary object aus der Steuerung für die Ansicht intermediary object . Mit this.* Einstellung this.* können wir genau das zeigen, was wir vom Controller für die Ansicht verfügbar machen möchten.

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

In diesem Fall ist {{ name }} sehr verwirrend in der Anwendung und wir wissen auch nicht, welcher Controller sich auf welchen Controller bezieht.

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

Warum $ Umfang?

• Verwenden Sie $scope wenn Sie auf eine oder mehrere Methoden von $ scope wie $watch , $digest , $emit , $http usw. zugreifen müssen.
• Beschränken Sie, welche Eigenschaften und / oder Methoden für $scope , und übergeben Sie sie $scope Bedarf explizit an $scope .