webentwicklung-frage-antwort-db.com.de

AngularJS-Controller und "streng verwenden"

Ich habe vor kurzem angefangen, JSHint zu verwenden. Daher muss ich die Funktionsform "use strict" verwenden. Seitdem gibt AngularJS einen Fehler aus:

"Fehler: Argument 'webAddressController' ist keine Funktion, undefiniert"

Wenn ich die Funktionsform "use strict" entferne, wird der Controller gut geladen.

Controller:

(function () {
    "use strict";

    function webAddressController($scope, $rootScope, web_address_service) {
             // Do things
    }

}());

Hat jemand einen Einblick, was hier los ist?

28
Chris Bier

Ich denke, dass JSHint versucht, Ihnen mitzuteilen, dass globale Variablen vermieden werden sollen (was offensichtlich eine sehr gute Praxis ist!).

AngularJS hat eine etwas andere Meinung zur Lösung desselben Problems (dh Vermeidung globaler Variablen) und ermöglicht es Ihnen, Controller in Modulen zu definieren (unter Verwendung eines globalen angular -Namensraums). Sie könnten Ihr Beispiel mit folgenden Modulen umschreiben:

angular.module('myApp',[]).controller('webAddressController', function($scope) {
    // Do things
});

Hier ist die jsFiddle, die dies in der Praxis veranschaulicht: http://jsfiddle.net/t3vBE/1/

Mit diesem Ansatz verschmutzen Sie den globalen Namespace nicht mit Controller-Konstruktoren.

Sie müssen die JSHint-Konfiguration ändern, um die globale Variable angular zuzulassen, wenn Sie den strikten Modus verwenden möchten. Alternativ können Sie auch Ihren gesamten Code (wieder mit Modulen) in eine Funktion einbinden, die sofort ausgeführt wird:

(function () {
    "use strict";

angular.module('myApp',[]).controller('webAddressController', function($scope) {

    $scope.name = 'World';
    // Do things
});

}());​

Hier ist die jsFiddle: http://jsfiddle.net/t3vBE/4/

Für mich macht das nur Sinn, wenn Sie reine JavaScript-, "Helfer" -Funktionen definieren wollen, sonst würde ich mich auf AngularJS-Dienste verlassen.

14

Eine andere Möglichkeit, wie @pkzolowski vorgeht, wenn Ihr angular Modul bereits an einer anderen Stelle geladen ist:

var app = angular.module('myApp');
app.controller(...);
app.service(...);
...

Es basiert auf dem Kommentar von hier: Angularjs, die Dienste für dasselbe Modul in verschiedenen Dateien definieren

Beachten Sie, dass mit angle.module ('myModule', []) das Modul myModule erstellt und jedes vorhandene Modul mit dem Namen myModule überschrieben wird. Verwenden Sie angle.module ('myModule'), um ein vorhandenes Modul abzurufen.

4
zeusstl

Haben Sie versucht, 'use strict' außerhalb und vor (function () zu schreiben?

"use strict"; // <-- add it here
(function () {
    //"use strict"; <-- remove from here

    function webAddressController($scope, $rootScope, web_address_service) {
         // Do things
    }

}());

Meine Antwort basiert auf den Dateien, die von Yeoman generiert wurden

2
Siddhesh T