AngularJS
Używanie AngularJS z TypeScript

Składnia

• $ scope: ng.IScope - jest to sposób w maszynopisie do zdefiniowania typu dla konkretnej zmiennej.

Kontrolery kątowe w maszynopisie

Zgodnie z definicją w dokumentacji AngularJS

Kiedy kontroler jest podłączony do DOM za pomocą dyrektywy ng-controller, Angular utworzy instancję nowego obiektu kontrolera, używając określonej funkcji konstruktora kontrolera. Nowy zakres potomny zostanie utworzony i udostępniony jako parametr do wstrzyknięcia funkcji konstruktora Kontrolera jako $ scope.

Kontrolery można bardzo łatwo tworzyć za pomocą klas maszynopisu.

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

Wynikowy Javascript to

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

Po utworzeniu klasy kontrolera pozwól, aby moduł kątowy js dotyczący kontrolera mógł być wykonany w prosty sposób za pomocą klasy

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

Używanie kontrolera ze składnią ControllerAs

Sterownik, który stworzyliśmy, może zostać utworzony i użyty przy użyciu controller as Składni. To dlatego, że umieściliśmy zmienną bezpośrednio w klasie kontrolera, a nie w zakresie $scope .

Używanie controller as someName ma na celu oddzielenie kontrolera od samego $scope , więc nie ma potrzeby wstrzykiwania $ scope jako zależności w kontrolerze.

Tradycyjny sposób :

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

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

Teraz z controller as składnią :

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

Jeśli tworzysz „klasę” w JavaScript, możesz to zrobić:

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

Tak więc teraz możemy użyć instancji jsObj aby uzyskać dostęp do dowolnej metody lub właściwości jsClass .

W angular robimy to samo. Używamy kontrolera jako składni do tworzenia instancji.

Korzystanie z pakietowania / minimalizacji

Sposób, w jaki zakres $ jest wstrzykiwany w funkcje konstruktora kontrolera, jest sposobem na zademonstrowanie i wykorzystanie podstawowej opcji wstrzykiwania zależności kątowej, ale nie jest on gotowy do produkcji, ponieważ nie można go zminimalizować. Jest tak, ponieważ system minimalizacji zmienia nazwy zmiennych, a wstrzykiwanie zależności anguara wykorzystuje nazwy parametrów, aby wiedzieć, co należy wstrzyknąć. Na przykład funkcja konstruktora ExampleController jest zminimalizowana do następującego kodu.

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

a $scope zmieniono na n !
aby temu zaradzić, możemy dodać tablicę $ inject ( string[] ). Tak, że DI angulara wie, co wstrzyknąć w jakiej pozycji jest funkcja konstruktora kontrolerów.
Powyższy maszynopis zmienia się na

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

Dlaczego składnia ControllerAs?

Funkcja kontrolera

Funkcja kontrolera to po prostu funkcja konstruktora JavaScript. Dlatego gdy widok ładuje się, function context ( this ) jest ustawiany na obiekt kontrolera.

Przypadek 1 :

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

Jest tworzony w controller object , a nie w $scope . widoki nie mają dostępu do funkcji zdefiniowanych w obiekcie kontrolera.

Przykład:

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

Przypadek 2:

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

Jest tworzony w obiekcie $scope object , a nie w controller object . widoki mogą uzyskać dostęp tylko do funkcji zdefiniowanych w obiekcie $scope .

Przykład:

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

Dlaczego ControllerAs?

• Składnia ControllerAs sprawia, że znacznie łatwiej jest manipulować oneCtrl.name anotherCtrl.name oneCtrl.name i anotherCtrl.name znacznie łatwiej jest stwierdzić, że masz name przypisaną przez wiele różnych kontrolerów do różnych celów, ale jeśli oba używały tego samego $scope.name i posiadały dwa różne elementy HTML na stronie, które są powiązane z {{name}} wtedy trudno jest ustalić, który jest z którego kontrolera.

• Ukrywanie $scope i narażanie członków przed kontrolerem na widok za intermediary object . Ustawiając this.* , Możemy ujawnić tylko to, co chcemy odsłonić od kontrolera do widoku.

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

Tutaj, w powyższym przypadku {{ name }} będzie bardzo mylące w użyciu, a także nie wiemy, który z nich jest powiązany z którym kontrolerem.

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

Dlaczego zakres?

• Użyj $scope gdy potrzebujesz dostępu do jednej lub więcej metod $ scope, takich jak $watch , $digest , $emit , $http itp.
• ograniczyć, które właściwości i / lub metody są narażone na $scope , a następnie jawnie przekazując je do $scope w razie potrzeby.