Semi di AngularJS: inserimento di JavaScript in file separati (app.js, controllers.js, directives.js, filters.js, services.js)

Sto usando il modello angular-seed per strutturare la mia applicazione. Inizialmente ho messo tutto il mio codice JavaScript in un unico file, main.js. Questo file conteneva la dichiarazione del modulo, i controller, le direttive, i filtri e i servizi. L'applicazione funziona bene in questo modo, ma sono preoccupato per la scalabilità e la manutenibilità poiché la mia applicazione diventa più complessa. Ho notato che il modello angular-seed ha file separati per ciascuno di questi, quindi ho tentato di distribuire il mio codice dal singolo main.jsfile in ciascuno degli altri file menzionati nel titolo di questa domanda e trovati nella app/jsdirectory dell'angular -modello di semi .

La mia domanda è: come gestisco le dipendenze per far funzionare l'applicazione? La documentazione esistente trovata qui non è molto chiara a questo proposito poiché ciascuno degli esempi forniti mostra un singolo file sorgente JavaScript.

Un esempio di quello che ho è:

app.js

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

controllers.js

angular.module('myApp.controllers', []).
    controller('AppCtrl', [function ($scope, $http, $filter, MyService) {

        $scope.myService = MyService; // found in services.js

        // other functions...
    }
]);

filtri.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
}

Come gestisco le dipendenze?

Grazie in anticipo.

Il problema è causato dalla "ridichiarazione" del modulo dell'applicazione in tutti i file separati.

Questo è l'aspetto della dichiarazione del modulo dell'app (la dichiarazione non sicura è il termine giusto):

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

Questo è l'aspetto dell'assegnazione (non sono sicuro se l'assegnazione sia il termine giusto) al modulo dell'applicazione:

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

Notare la mancanza di parentesi quadre.

Quindi, la versione precedente, quella con le parentesi quadre, dovrebbe essere utilizzata solo una volta, di solito nel tuo app.jso main.js. Tutti gli altri file associati - controllori, direttive, filtri ... - dovrebbero utilizzare quest'ultima versione, quella senza le parentesi quadre.

Spero che abbia un senso. Saluti!

Se vuoi mettere le tue diverse parti della tua applicazione ( filters, services, controllers) in diversi file fisici, ci sono due cose che devi fare:

1. Dichiara questi spazi dei nomi (per mancanza di un termine migliore) nel tuo app.jso in ogni file;
2. Fare riferimento a tali spazi dei nomi in ciascuno dei file.

Quindi, il tuo app.jsassomiglierebbe a questo:

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

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

E in ogni singolo file:

services.js

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

controllers.js

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

Tutto questo può essere combinato in una chiamata:

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

La parte importante è che non dovresti ridefinire angular.module('myApp'); questo causerebbe la sovrascrittura quando si istanziano i controller, probabilmente non quello che si desidera.

Ricevi l'errore perché non hai myApp.servicesancora definito . Quello che ho fatto finora è mettere tutte le definizioni iniziali in un file e poi usarle in un altro. Come per il tuo esempio, metterei in:

app.js

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

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

Questo dovrebbe eliminare l'errore, anche se penso che dovresti leggere l'articolo di Eduard Gamonal menzionato in uno dei commenti.