Semilla de AngularJS: poner JavaScript en archivos separados (app.js, controllers.js, directives.js, filtros.js, services.js)

Estoy usando la plantilla de semilla angular para estructurar mi aplicación. Inicialmente pongo toda mi código JavaScript en un solo archivo, main.js. Este archivo contenía mi declaración de módulo, controladores, directivas, filtros y servicios. La aplicación funciona bien así, pero me preocupa la escalabilidad y la capacidad de mantenimiento a medida que mi aplicación se vuelve más compleja. Me di cuenta de que la plantilla de semilla angular tiene archivos separados para cada uno de estos, así que intenté distribuir mi código desde el main.jsarchivo único en cada uno de los otros archivos mencionados en el título de esta pregunta y que se encuentran en el app/jsdirectorio de angular -plantilla de semillas .

Mi pregunta es: ¿cómo administro las dependencias para que la aplicación funcione? La documentación existente que se encuentra aquí no es muy clara a este respecto, ya que cada uno de los ejemplos dados muestra un solo archivo fuente de JavaScript.

Un ejemplo de lo que tengo es:

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...
    }
]);

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

¿Cómo gestiono las dependencias?

Gracias por adelantado.

El problema se debe a que "redeclara" el módulo de la aplicación en todos los archivos separados.

Así es como se ve la declaración del módulo de la aplicación (no estoy seguro de que la declaración sea el término correcto):

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

Así es como se ve la asignación (tampoco estoy seguro si la asignación es el término correcto) a su módulo de aplicación:

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

Observe la falta de corchetes.

Entonces, la versión anterior, una con corchetes, solo debe usarse una vez, generalmente en su app.jso main.js. Todos los demás archivos asociados - controladores, directivas, filtros … - deben usar la última versión, la que no tiene corchetes.

Espero que tenga sentido. ¡Salud!

Si desea colocar las diferentes partes de su aplicación ( filters, services, controllers) en diferentes archivos físicos, hay dos cosas que debe hacer:

1. Declare esos espacios de nombres (a falta de un término mejor) en su app.js o en cada archivo;
2. Consulte esos espacios de nombres en cada uno de los archivos.

Entonces, tu app.jsse vería así:

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

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

Y en cada archivo individual:

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...
});

Todo esto se puede combinar en una sola llamada:

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

La parte importante es que no debes redefinir angular.module('myApp'); eso haría que se sobrescribiera al crear una instancia de sus controladores, probablemente no sea lo que desea.

Obtiene el error porque aún no myApp.servicesha definido . Lo que hice hasta ahora fue poner todas las definiciones iniciales en un archivo y luego usarlas en otro. Como para tu ejemplo, pondría:

app.js

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

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

Eso debería eliminar el error, aunque creo que debería haber leído el artículo que Eduard Gamonal mencionó en uno de los comentarios.