AngularJS种子：将JavaScript放入单独的文件（app.js，controllers.js，directives.js，filters.js，services.js）

我正在使用角度种子模板来构建我的应用程序。最初，我将所有JavaScript代码放入一个文件中main.js。该文件包含我的模块声明，控制器，指令，过滤器和服务。该应用程序可以像这样正常运行，但是随着我的应用程序变得越来越复杂，我担心可伸缩性和可维护性。我注意到，每个角度种子模板都有单独的文件，因此我尝试将我的代码从单个main.js文件分发到该问题标题中提到的每个其他文件中，并且可以在app/js每个角度的目录中找到种子模板。

我的问题是：如何管理依赖关系以使应用程序正常工作？在这方面，此处找到的现有文档不是很清楚，因为给出的每个示例都显示一个JavaScript源文件。

我所拥有的一个例子是：

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

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
}

如何管理依赖关系？

提前致谢。

该问题是由您在所有单独文件中“重新声明”您的应用程序模块引起的。

这是应用程序模块声明（不确定声明是否正确）的样子：

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

这就是对应用程序模块的分配（不确定分配是否也是正确的术语），如下所示：

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

请注意缺少方括号。

因此，以前的版本（带有方括号的版本）仅应使用一次，通常在app.js或中使用一次main.js。所有其他关联文件（控制器，指令，过滤器 ……）应使用后一种版本，即不带方括号的版本。

我希望这是有道理的。干杯!

如果您想将应用程序（filters, services, controllers）的不同部分放在不同的物理文件中，则需要做两件事：

1. 在您app.js或每个文件中声明这些名称空间（由于缺乏更好的用语）；
2. 请参考每个文件中的那些名称空间。

因此，您app.js将如下所示：

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

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

并在每个文件中：

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

所有这些都可以合并为一个调用：

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

重要的是您不应重新定义angular.module('myApp'); 实例化控制器时可能会覆盖它，可能不是您想要的。

您收到错误是因为尚未定义myApp.services。到目前为止，我所做的就是将所有初始定义放在一个文件中，然后在另一个文件中使用它们。就像您的示例一样，我将输入：

app.js

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

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

尽管我认为您应该阅读其中一条评论中提到的Eduard Gamonal文章，但这应该可以消除错误。