Wie arbeite ich mit $ scope und $ watch mit angular-fullstack Generatorsyntax?

Ich verwende die angular-fullstack generator, um neue Routen für meine Anwendung zu generieren. Die Syntax lautet really unfamiliar und verwendet eine klassenähnliche Struktur. Wie arbeite ich damit, um Dinge wie $ scope und $ watch zu injizieren? Die Hauptsache, die ich tun möchte, ist auf eine Änderung für eine bestimmte Variable zu achten. Die Syntax ist unten. Kann jemand damit arbeiten?

'use strict'; 

(function() { 

class MainController { 

    constructor($http) { 
    this.$http = $http; 
    this.awesomeThings = []; 

    $http.get('/api/things').then(response => { 
     this.awesomeThings = response.data; 
    }); 
    } 

    addThing() { 
    if (this.newThing) { 
     this.$http.post('/api/things', { name: this.newThing }); 
     this.newThing = ''; 
    } 
    } 

    deleteThing(thing) { 
    this.$http.delete('/api/things/' + thing._id); 
    } 
} 

angular.module('myapp') 
    .controller('MainController', MainController); 

})();

Wie spritze ich $ Uhr so, dass ich so etwas tun kann:

this.$watch('awasomeThings', function() { ... });

Quelle

2015-12-23 jOshT

Sie beabsichtigen, (meine Vermutung) für Sie controllerAs Syntax Eckige zu bedienen ist. Wenn Sie das tun, verwenden Sie am Ende $scope viel weniger (wenn überhaupt).

Der Grund ist, dass Ihre Ansichten nicht mehr direkt an den Bereich binden, sie binden an Eigenschaften des Controllers. Also in Ihrem MyController obigen Beispiel können die Ansichten, die die Anordnung von awesomeThings Zugriff auf einen Namen für den Controller, die Sie liefern:

<body ng-controller="MyController as myCtl"> 
    <p ng-repeat="thing in myCtl.awesomeThings">{{thing}}</p> 
</body>

Ein Fall, in dem man noch die $scope verwenden müssen, wenn Sie $scope.$watch() verwenden möchten. In diesem Fall injizieren die $scope in Ihrem Controller, auf die gleiche Weise mit $http oben getan wird:

class MyController { 

    constructor($scope) { 
    // use the $scope.$watch here or keep a reference to it so you can 
    // call $scope.$watch from a method 
    this.$scope = $scope; 
    } 

}

PS: Diese Syntax ist höchstwahrscheinlich ES6 aber ich könnte falsch sein ... verwende ich Typoskript die sieht sehr ähnlich.

Quelle

2015-12-23 18:02:18

Perfekt, danke. Es macht jetzt viel mehr Sinn. Ich denke, dass sie tatsächlich ES6 und [Babel] (https://babeljs.io/) verwenden, um es zu regulärem javascript zu kompilieren. – jOshT

Wenn Sie ES6 verwenden, können Sie Ihre DI (für eine sichere Minification) auch durch Einfügen von 'static $ inject = ['$ scope'];' direkt unter der Klassendefinition und vor der Konstruktorfunktion deklarieren. Wenn Ihr ES6-Transpiler diese statische Definition unterstützt. –

Wie arbeite ich mit $ scope und $ watch mit angular-fullstack Generatorsyntax?

Antwort

Verwandte Themen