Ich habe alle meine AngularJS-Controller in einer Datei, controller.js. Diese Datei ist wie folgt aufgebaut:
angular.module('myApp.controllers', [])
.controller('Ctrl1', ['$scope', '$http', function($scope, $http) {
}])
.controller('Ctrl2', ['$scope', '$http', function($scope, $http) }
}])
Ich möchte Strg1 und Strg2 in separate Dateien einfügen. Ich würde dann beide Dateien in meine index.html aufnehmen, aber wie sollte das strukturiert sein? Ich habe versucht, so etwas zu tun, und es wird ein Fehler in der Webbrowser-Konsole ausgegeben, der besagt, dass meine Controller nicht gefunden werden können. Irgendwelche Hinweise?
Ich habe StackOverflow durchsucht und diese ähnliche Frage gefunden. Diese Syntax verwendet jedoch ein anderes Framework (CoffeeScript) als Angular, sodass ich nicht folgen konnte.
quelle
appCtrl
ist ein globalerwindow.appCtrl
. Das ist keine gute Praxis.Wenn Sie die Angular.module-API mit einem Array am Ende verwenden, wird Angular angewiesen , ein neues Modul zu erstellen:
myApp.js
Die Verwendung ohne das Array ist eigentlich eine Getter-Funktion. Um Ihre Controller zu trennen, können Sie Folgendes tun:
Ctrl1.js
Ctrl2.js
Stellen Sie beim Importieren von Javascript sicher, dass sich myApp.js nach AngularJS befindet, jedoch vor Controllern / Diensten / etc ... andernfalls kann Angular Ihre Controller nicht initialisieren.
quelle
Obwohl beide Antworten technisch korrekt sind, möchte ich für diese Antwort eine andere Syntaxauswahl einführen. Dieses Imho macht es einfacher zu lesen, was mit der Injektion los ist, zwischen zu unterscheiden usw.
Datei Eins
Datei Zwei
Datei Drei
quelle
Was ist mit dieser Lösung? Module und Controller in Dateien (am Ende der Seite) Es funktioniert mit mehreren Controllern, Direktiven usw.:
app.js.
myCtrl.js
html
Google hat auch Best-Practice-Empfehlungen für die Angular-App-Struktur, die ich sehr gerne nach Kontext gruppiere. Nicht alle HTML-Dateien in einem Ordner, aber zum Beispiel alle Dateien für die Anmeldung (HTML, CSS, app.js, controller.js usw.). Wenn ich also an einem Modul arbeite, sind alle Anweisungen leichter zu finden.
quelle
Der Kürze halber hier ein ES2015-Beispiel, das nicht auf globalen Variablen basiert
quelle
name
. Sie können sie also einfach verwenden,ExampleCtrl.name
anstatt sie zu duplizieren.Nicht so anmutig, aber die sehr einfach zu implementierende Lösung - mit globalen Variablen.
In der "ersten" Datei:
im "zweiten", "dritten" usw.:
quelle
angular.module('myApp').controller('ProductCtrl', ['$scope', '$http', function($scope, $http){ //Your ProductCtrl code goes here }]);