Semente do AngularJS: colocar o JavaScript em arquivos separados (app.js, controllers.js, directives.js, filters.js, services.js)

Estou usando o template angular-seed para estruturar meu aplicativo. Inicialmente, coloquei todo o meu código JavaScript em um único arquivo main.js,. Este arquivo continha minha declaração de módulo, controladores, diretivas, filtros e serviços. O aplicativo funciona bem assim, mas estou preocupado com a escalabilidade e manutenção, pois meu aplicativo se torna mais complexo. Percebi que o modelo angular-seed tem arquivos separados para cada um deles, então tentei distribuir meu código de um único main.jsarquivo em cada um dos outros arquivos mencionados no título para esta questão e encontrados no app/jsdiretório do angular modelo de sementes .

Minha pergunta é: como faço para gerenciar as dependências para fazer o aplicativo funcionar? A documentação existente encontrada aqui não é muito clara a esse respeito, pois cada um dos exemplos fornecidos mostra um único arquivo-fonte JavaScript.

Um exemplo do que tenho é:

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
}

Como faço para gerenciar as dependências?

Desde já, obrigado.

O problema é causado por você "redeclarar" o módulo do aplicativo em todos os seus arquivos separados.

Esta é a aparência da declaração do módulo do app (declaração não certa é o termo correto):

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

Esta é a aparência de atribuição (não tenho certeza se atribuição é o termo correto) para seu módulo de aplicativo:

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

Observe a falta de colchetes.

Portanto, a versão anterior, aquela com colchetes, deve ser usada apenas uma vez, geralmente em seu app.jsou main.js. Todos os outros arquivos associados - controladores, diretivas, filtros ... - devem usar a última versão, aquela sem os colchetes.

Espero que faça sentido. Felicidades!

Se você deseja colocar diferentes partes do seu aplicativo ( filters, services, controllers) em arquivos físicos diferentes, há duas coisas que você deve fazer:

1. Declare esses namespaces (por falta de um termo melhor) em seu app.jsou em cada arquivo;
2. Consulte esses namespaces em cada um dos arquivos.

Então, você app.jsficaria assim:

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

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

E em cada arquivo 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...
});

Tudo isso pode ser combinado em uma chamada:

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

O importante é que você não deve redefinir angular.module('myApp'); isso faria com que fosse sobrescrito quando você instanciar seus controladores, provavelmente não o que você deseja.

Você obtém o erro porque ainda não definiu myApp.services. O que fiz até agora foi colocar todas as definições iniciais em um arquivo e depois usá-las em outro. Como para o seu exemplo, eu colocaria:

app.js

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

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

Isso deve eliminar o erro, embora eu ache que você deva ler o artigo Eduard Gamonal mencionado em um dos comentários.