Ich verwende die Angular-Seed- Vorlage, um meine Anwendung zu strukturieren. Anfangs habe ich meinen gesamten JavaScript-Code in einer einzigen Datei zusammengefasst main.js
. Diese Datei enthielt meine Moduldeklaration, Controller, Anweisungen, Filter und Dienste. Die Anwendung funktioniert gut, aber ich mache mir Sorgen um Skalierbarkeit und Wartbarkeit, da meine Anwendung komplexer wird. Ich habe festgestellt, dass die Angular-Seed-Vorlage für jede dieser Dateien separate Dateien enthält. Daher habe ich versucht, meinen Code aus der einzelnen main.js
Datei in jede der anderen Dateien zu verteilen, die im Titel dieser Frage erwähnt und im app/js
Verzeichnis der Angular- Datei gefunden wurden -Samenvorlage .
Meine Frage lautet: Wie verwalte ich die Abhängigkeiten, damit die Anwendung funktioniert? Die vorhandene Dokumentation hier ist in dieser Hinsicht nicht sehr klar, da jedes der angegebenen Beispiele eine einzelne JavaScript-Quelldatei zeigt.
Ein Beispiel für das, was ich habe, ist:
app.js.
angular.module('myApp',
['myApp.filters',
'myApp.services',
'myApp.controllers']);
controller.js
angular.module('myApp.controllers', []).
controller('AppCtrl', [function ($scope, $http, $filter, MyService) {
$scope.myService = MyService; // found in services.js
// other functions...
}
]);
filter.js
angular.module('myApp.filters', []).
filter('myFilter', [function (MyService) {
return function(value) {
if (MyService.data) { // test to ensure service is loaded
for (var i = 0; i < MyService.data.length; i++) {
// code to return appropriate value from MyService
}
}
}
}]
);
services.js
angular.module('myApp.services', []).
factory('MyService', function($http) {
var MyService = {};
$http.get('resources/data.json').success(function(response) {
MyService.data = response;
});
return MyService;
}
);
main.js
/* This is the single file I want to separate into the others */
var myApp = angular.module('myApp'), []);
myApp.factory('MyService', function($http) {
// same code as in services.js
}
myApp.filter('myFilter', function(MyService) {
// same code as in filters.js
}
function AppCtrl ($scope, $http, $filter, MyService) {
// same code as in app.js
}
Wie verwalte ich die Abhängigkeiten?
Danke im Voraus.
quelle
angular.module('myApp.services', ['myApp.services']);
ohne Glück in app.js gesetzt.angular.module('myApp.services', ['myApp.server', 'myApp.somethingElse'])
.angular.module('myApp.service1', ['myApp.service1', 'myApp.service2'])
ursprünglich gelesen . Andernfalls hätte ich myApp.services nicht als eigene Abhängigkeit aufgenommen.Antworten:
Das Problem wird dadurch verursacht, dass Sie Ihr Anwendungsmodul in all Ihren separaten Dateien "neu deklarieren".
So sieht die App-Modul-Deklaration aus (nicht sicher, ob die Deklaration der richtige Begriff ist):
So sieht die Zuordnung (nicht sicher, ob die Zuordnung auch der richtige Begriff ist) zu Ihrem Anwendungsmodul aus:
Beachten Sie das Fehlen eckiger Klammern.
Daher sollte die frühere Version, eine mit eckigen Klammern, nur einmal verwendet werden, normalerweise in Ihrem
app.js
odermain.js
. Alle anderen zugehörigen Dateien - Controller, Direktiven, Filter … - sollten die letztere Version verwenden, die ohne eckige Klammern.Ich hoffe das ergibt Sinn. Prost!
quelle
myApp
. In meiner Datei app.js habe ich eine Variable dafür erstellt.var myApp = angular.module('myApp', []);
In allen anderen Dateien habe ich einfach auf diese Variable verwiesen (z. B.myApp.filter('myFilter', function(MyService) { /* filter code */ });
Solange ich die Dateinamen in Skript-Tags in meinem HTML- Code hinzugefügt habe, musste ich keine andere deklarieren Abhängigkeiten. DiemyApp
, sodass sie jetzt ein anonymes Modul inapp.js
: istangular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers']);
. In allen anderen Dateien habe ich auch solche anonymen Module deklariertangular.module('myApp.filter', []).filter('myFilter', function(MyService) { /* filter code */ });
. Meine App funktioniert jetzt auch so. Ich habe meinen Codeverlauf durchgesehen und kann nicht sehen, wo dies anders ist als das, was ich getan habe, als es nicht funktioniert hat.angular.module('myApp', []);
(beachten Sie die eckigen Klammern) in meiner Haupt-js-Datei. Alle anderen Dateien verweisen dann mithilfe der Syntaxangular.module('myApp').controller
oder auf das Modul.directive
.ngCookies
,ngResource
) , wenn Ihr Haupt App - Modul erklärt:angular.module('myApp', []);
ngResource
ist definitiv einer von denen, die Sie in Ihre Moduldeklarationsklammern setzen. Wenn meine Antwort helfen würde, wäre es sehr dankbar, wenn ich abstimmen und zustimmen würde.Wenn Sie Ihre verschiedenen Teile Ihrer Anwendung (
filters, services, controllers
) in verschiedenen physischen Dateien ablegen möchten, müssen Sie zwei Dinge tun:app.js
oder in jeder Datei.Sie
app.js
würden also so aussehen:Und in jeder einzelnen Datei:
services.js
controller.js
All dies kann zu einem Anruf kombiniert werden:
controller.jsDer wichtige Teil ist, dass Sie nicht neu definieren sollten
angular.module('myApp')
; Dies würde dazu führen, dass es überschrieben wird, wenn Sie Ihre Controller instanziieren, wahrscheinlich nicht das, was Sie wollen.quelle
Sie erhalten den Fehler, weil Sie noch nicht definiert
myApp.services
haben. Was ich bisher gemacht habe, ist, alle anfänglichen Definitionen in eine Datei zu setzen und sie dann in einer anderen zu verwenden. Wie für Ihr Beispiel würde ich Folgendes einfügen:app.js.
Das sollte den Fehler beseitigen, obwohl ich denke, Sie sollten den Artikel lesen, den Eduard Gamonal in einem der Kommentare erwähnt hat.
quelle
angular.module('myApp.services', []);
zu meiner app.js-Datei hinzugefügt . Beides spricht mein Problem nicht wirklich an.