AngularJS
Använda AngularJS med TypeScript

Syntax

• $ scope: ng.IScope - det här är i typskript att definiera typ för en viss variabel.

Vinkelreglage i typskript

Såsom definieras i AngularJS- dokumentationen

När en Controller är ansluten till DOM via ng-controller-direktivet kommer Angular att instansera ett nytt Controller-objekt med den angivna Controller-konstruktorfunktionen. Ett nytt barnomfång skapas och görs tillgängligt som en injicerbar parameter för Controllers konstruktörsfunktion som $ scope.

Styrenheter kan göras mycket enkelt med hjälp av typskriptklasser.

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

Det resulterande Javascriptet är

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

Efter att ha gjort kontrollerklassen, låt den vinklade js-modulen om styrenheten göras enkelt genom att använda klassen

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

Använda styrenheten med ControllerAs syntax

Den kontroller vi har gjort kan inställas och användas med controller as syntax. Det beror på att vi har lagt variabel direkt på kontrollerklassen och inte på $scope .

Att använda controller as someName är att separera styrenheten från $scope självt. Så det finns inget behov av att injicera $ scope som beroendet i controller.

Traditionellt sätt:

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

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

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

Om du instanserar en "klass" i JavaScript, kan du göra detta:

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

Så nu kan vi använda jsObj instansen för att komma åt alla metoder och egenskaper hos jsClass .

I vinkel gör vi samma typ av sak. Vi använder kontrollen som syntax för inställning.

Använda paket / Minifiering

Hur $ -omfanget injiceras i kontrollerns konstruktorfunktioner är ett sätt att demonstrera och använda det grundläggande alternativet för vinkelberoendeinjektion men är inte produktionsklar eftersom det inte kan förminskas. Det är därför att minifieringssystemet ändrar variabla namn och anguars beroendeinjektion använder parameternamn för att veta vad som måste injiceras. Så för ett exempel exemplifieras exempelkontrollerns konstruktionsfunktion till följande kod.

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

och $scope ändras till n !
för att övervinna detta kan vi lägga till en $ inject-grupp ( string[] ). Så att vinkelns DI vet vad man ska injicera i vilken position styrenhetens konstruktörsfunktion är.
Så ovanstående typskript ändras till

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

Varför ControllerAs syntax?

Kontrollfunktion

Controller-funktion är inget annat än bara en JavaScript-konstruktorfunktion. Följaktligen, när en vy laddas är function context ( this ) inställt på regulatorobjektet.

Fall 1 :

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

Det skapas i controller object , inte på $scope . vyer kan inte få åtkomst till de funktioner som definieras på controllerobjektet.

Exempel:

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

Fall 2:

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

Det skapas i $scope object , inte på controller object . vyer kan bara få åtkomst till de funktioner som definieras på $scope objekt.

Exempel:

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

Varför ControllerAs?

• ControllerAs syntax gör det mycket tydligare där objekt som manipuleras. Att ha oneCtrl.name och anotherCtrl.name gör det mycket lättare att identifiera att du har ett name tilldelat av flera olika kontroller för olika ändamål men om båda använde samma $scope.name och har två olika HTML-element på en sida som båda är bundna till {{name}} då är det svårt att identifiera vilken som kommer från vilken controller.

• Gömmer $scope och exponerar medlemmarna från kontrollenheten för vyn via ett intermediary object . Genom att ställa in this.* vi exponera precis vad vi vill exponera från regulatorn till vyn.

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

I ovanstående fall kommer {{ name }} att vara väldigt förvirrande att använda och vi vet inte heller vilken som är relaterad till vilken 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>

Varför $ räckvidd?

• Använd $scope när du behöver komma åt en eller flera metoder för $ scope såsom $watch , $digest , $emit , $http etc.
• begränsa vilka egenskaper och / eller metoder som exponeras för $scope och sedan överför dem uttryckligen till $scope efter behov.