AngularJS-Startwert: JavaScript in separate Dateien einfügen (app.js, controller.js, directives.js, filter.js, services.js)

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.jsDatei in jede der anderen Dateien zu verteilen, die im Titel dieser Frage erwähnt und im app/jsVerzeichnis 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.

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

angular.module('myApp', []).controller( //...

So sieht die Zuordnung (nicht sicher, ob die Zuordnung auch der richtige Begriff ist) zu Ihrem Anwendungsmodul aus:

angular.module('myApp').controller( //...

Beachten Sie das Fehlen eckiger Klammern.

Daher sollte die frühere Version, eine mit eckigen Klammern, nur einmal verwendet werden, normalerweise in Ihrem app.jsoder main.js. Alle anderen zugehörigen Dateien - Controller, Direktiven, Filter … - sollten die letztere Version verwenden, die ohne eckige Klammern.

Ich hoffe das ergibt Sinn. Prost!

Wenn Sie Ihre verschiedenen Teile Ihrer Anwendung ( filters, services, controllers) in verschiedenen physischen Dateien ablegen möchten, müssen Sie zwei Dinge tun:

1. Deklarieren Sie diese Namespaces (mangels eines besseren Begriffs) in Ihrer app.jsoder in jeder Datei.
2. Verweisen Sie auf diese Namespaces in jeder der Dateien.

Sie app.jswürden also so aussehen:

angular.module('myApp', ['external-dependency-1', 'myApp.services', 'myApp.controllers'])
.run(function() {
   //...

})
.config(function() {
  //...
});

Und in jeder einzelnen Datei:

services.js

angular.module('myApp.services', []); //instantiates
angular.module('myApp.services') //gets
.factory('MyService', function() { 
  return {};
});

controller.js

angular.module('myApp.controllers', []); //instantiates
angular.module('myApp.controllers')      //gets
.controller('MyCtrl', function($scope) {
  //snip...
})
.controller('AccountCtrl', function($scope) {
  //snip...
});

All dies kann zu einem Anruf kombiniert werden:

angular.module('myApp.controllers', []) 
.controller('MyCtrl', function($scope) {
 //snip...
});    

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

Sie erhalten den Fehler, weil Sie noch nicht definiert myApp.serviceshaben. 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.

angular.module('myApp.services', []);

angular.module('myApp', 
    ['myApp.services',
      ...]);

Das sollte den Fehler beseitigen, obwohl ich denke, Sie sollten den Artikel lesen, den Eduard Gamonal in einem der Kommentare erwähnt hat.