AngularJS
AngularJS gebruiken met TypeScript

Syntaxis

• $ scope: ng.IScope - dit is een manier in het typoscript om het type voor een bepaalde variabele te definiëren.

Hoekcontrollers in typescript

Zoals gedefinieerd in de AngularJS- documentatie

Wanneer een Controller via de ng-controller-richtlijn aan de DOM is gekoppeld, zal Angular een nieuw Controller-object instantiëren met behulp van de constructorfunctie van de opgegeven Controller. Een nieuwe onderliggende scope wordt gemaakt en beschikbaar gesteld als een injecteerbare parameter voor de constructorfunctie van de Controller als $ scope.

Controllers kunnen heel gemakkelijk worden gemaakt met behulp van de typescript-klassen.

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

Het resulterende Javascript is

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

Na het maken van de controller-klasse kan de hoekige js-module over de controller eenvoudig worden gedaan met behulp van de klasse

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

De controller gebruiken met ControllerAs Syntax

De controller die we hebben gemaakt, kan worden geïnstantieerd en worden gebruikt met de controller as syntaxis. Dat komt omdat we de variabele rechtstreeks op de controllerklasse hebben geplaatst en niet op de $scope .

Het gebruik van controller as someName is om de controller te scheiden van $scope zelf. Het is dus niet nodig om $ scope te injecteren als de afhankelijkheid in de controller.

Traditionele manier :

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

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

Nu met controller as syntaxis :

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

Als u een "klasse" in JavaScript instantieert, kunt u dit doen:

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

Dus nu kunnen we de jsObj instantie gebruiken om toegang te krijgen tot elke methode of eigenschap van jsClass .

In hoekig, doen we hetzelfde type ding. We gebruiken controller als syntaxis voor instantiatie.

Bundeling / Minification gebruiken

De manier waarop de $ scope in de constructorfuncties van de controller wordt geïnjecteerd, is een manier om de basisoptie van injectie van hoekafhankelijkheid aan te tonen en te gebruiken, maar is niet klaar voor productie omdat deze niet kan worden verkleind. Dat komt omdat het minificatiesysteem de variabelenamen wijzigt en de afhankelijkheidsinjectie van anguar de parameternamen gebruikt om te weten wat moet worden geïnjecteerd. Dus voor een voorbeeld wordt de constructorfunctie van de ExampleController verkleind tot de volgende code.

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

en $scope is veranderd in n !
om dit te verhelpen kunnen we een $ inject array ( string[] ) toevoegen. De DI van die hoek weet dus wat te injecteren op welke positie de constructorfunctie van de regelaar is.
Dus het bovenstaande typoscript verandert in

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

Waarom Syntaxis van ControllerAs?

Controller functie

Controllerfunctie is niets anders dan alleen een JavaScript-constructorfunctie. Wanneer een weergave wordt geladen, wordt de function context ( this ) dus ingesteld op het controllerobject.

Zaak 1 :

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

Het wordt gemaakt in het controller object , niet op $scope . weergaven hebben geen toegang tot de functies die zijn gedefinieerd op het controllerobject.

Voorbeeld:

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

Geval 2:

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

Het wordt gemaakt in het $scope object , niet op het controller object . views hebben alleen toegang tot de functies die zijn gedefinieerd op het $scope object.

Voorbeeld:

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

Waarom ControllerAs?

• ControllerAs syntaxis van ControllerAs maakt het veel duidelijker waar objecten worden gemanipuleerd. Door oneCtrl.name en anotherCtrl.name is het veel eenvoudiger om te identificeren dat u een name toegewezen door meerdere verschillende controllers voor verschillende doeleinden, maar als beide dezelfde $scope.name hebben gebruikt en twee verschillende HTML-elementen op een pagina die beide zijn gebonden aan {{name}} dan is het moeilijk om te bepalen welke van welke controller komt.

• De $scope verbergen en de leden van de controller blootstellen aan de weergave via een intermediary object . Door this.* , kunnen we precies laten zien wat we van de controller willen laten zien aan de weergave.

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

Hier is in bovenstaand geval {{ name }} erg verwarrend in gebruik en we weten ook niet welke met welke controller te maken heeft.

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

Waarom $ scope?

• Gebruik $scope wanneer u toegang nodig heeft tot een of meer methoden van $ scope zoals $watch , $digest , $emit , $http etc.
• beperk welke eigenschappen en / of methoden worden blootgesteld aan $scope en geef ze indien nodig expliciet door aan $scope .