问题描述
我使用的是模板来构建我的应用程序。起初，我把所有我的JavaScript code到一个文件中， main.js 。该文件包含我的模块声明，控制器，指令，过滤器和服务。该应用程序工作正常是这样，但我担心的可扩展性和可维护性作为我的应用程序变得更加复杂。我注意到，角种子模板对每一种单独的文件，所以我尝试从单一的分发我的code main.js 文件到每个在的的模板。
I'm using the angular-seed template to structure my application. Initially I put all my JavaScript code into a single file, main.js. This file contained my module declaration, controllers, directives, filters, and services. The application works fine like this, but I'm worried about scalability and maintainability as my application becomes more complex. I noticed that the angular-seed template has separate files for each of these, so I've attempted to distribute my code from the single main.js file into each of the other files mentioned in the title to this question and found in the app/js directory of the angular-seed template.
我的问题是：如何管理的依赖关系，以获取应用程序的工作？现有文献中找到 是在这方面并不十分清楚，因为每个给出的实施例示出了单个的JavaScript源文件。
My question is: how do I manage the dependencies to get the application to work? The existing documentation found here isn't very clear in this regard since each of the examples given shows a single JavaScript source file.
什么，我有一个例子是：
An example of what I have is:
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...
}
]);
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
}
如何管理的依赖关系？
How do I manage the dependencies?
先谢谢了。
推荐答案
问题是由您引发的重新声明您的应用程序模块中的所有单独的文件。
The problem is caused from you "redeclaring" your application module in all your separate files.
这是什么应用程序模块声明（不知道声明是正确的术语）是这样的：
This is what the app module declaration (not sure declaration is the right term) looks like:
angular.module('myApp', []).controller( //...
这是什么分配（不知道是否转让或者是正确的术语），以您的应用程序模块如下：
This is what assignment (not sure if assignment is the right term either) to your application module looks like:
angular.module('myApp').controller( //...
注意缺少方括号。
Notice the lack of square brackets.
所以，前一个版本，人们的与的方括号，只能用一次，一般在 app.js 或 main.js 。所有其他相关文件 - 控制器，指令，过滤器的... - 应使用后一个版本，一个的没有的方括号
So, the former version, one with the square brackets, should only be used once, usually in your app.js or main.js. All other associated files — controllers, directives, filters … — should use the latter version, the one without the square brackets.
我希望是有道理的。干杯！
I hope that makes sense. Cheers!
这篇关于AngularJS种子：把的JavaScript到单独的文件（app.js，controllers.js，directives.js，filters.js，services.js）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！