it-swarm.com.de

AngularJS-Seed: Setzen von JavaScript in separate Dateien (app.js, controller.js, directives.js, filters.js, services.js)

Ich verwende die Vorlage Angular-Seed , um meine Anwendung zu strukturieren. Anfangs habe ich meinen gesamten JavaScript-Code in einer einzigen Datei abgelegt, main.js. Diese Datei enthielt meine Moduldeklaration, Steuerungen, Anweisungen, Filter und Dienste. Die Anwendung funktioniert so gut, aber ich mache mir Sorgen um die Skalierbarkeit und Wartbarkeit, wenn meine Anwendung komplexer wird. Mir ist aufgefallen, 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 gefunden wurden im Verzeichnis app/js der Vorlage Angular-Seed .

Meine Frage ist: 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...
    }
]);

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

93
ChrisDevo

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 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 von eckigen Klammern.

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

Ich hoffe das ergibt Sinn. Prost!

108
Justin L.

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 Ihrem app.js Oder in jeder Datei.
  2. Verweisen Sie auf diese Namespaces in jeder der Dateien.

Ihr app.js Würde 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 Aufruf zusammengefasst werden:

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

Der wichtige Teil ist, dass Sie angular.module('myApp') nicht neu definieren sollten; Das würde dazu führen, dass es überschrieben wird, wenn Sie Ihre Controller instanziieren, wahrscheinlich nicht das, was Sie wollen.

11
George Stocker

Sie erhalten den Fehler, weil Sie myApp.services Noch nicht definiert haben. Bisher habe ich alle anfänglichen Definitionen in einer Datei abgelegt und dann in einer anderen verwendet. Wie für Ihr Beispiel würde ich in setzen:

app.js

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

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

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

3