问题描述
我正在使用模板来构建我的应用程序。最初我将我所有的JavaScript代码放在单个文件 main.js 中。该文件包含我的模块声明，控制器，指令，过滤器和服务。该应用程序工作正常，但我担心可扩展性和可维护性，因为我的应用程序变得更加复杂。我注意到角度种子模板为每一个都有单独的文件，所以我试图将我的代码从单个 main.js 文件分发到每个其他在这个问题的标题中提到的文件，在模板。
我的问题是：如何管理依赖项以获取申请工作吗？现有文档中发现，在这方面不是很清楚，因为给出的每个示例都显示了一个JavaScript源文件。
我的一个例子是：
app.js
angular.module（'myApp'，
['myApp.filters'，
'myApp.services'，
'myApp.controllers']）;
controllers.js
angular.module（'myApp.controllers'，[]）。
控制器（'AppCtrl'，[function（$ scope，$ http，$ filter，MyService）{
$ scope.myService = MyService; //在services.js中找到
//其他功能...
}
]）;
filters.js
angular.module（'myApp.filters'，[]）。
filter（'myFilter'，[function（MyService）{
return function（value）{
if（MyService.data）{//测试确保服务被加载
（var i = 0; i< MyService.data.length; i ++）{
//从MyService
返回适当值的代码
}
}
}]
）;
services.js
angular.module（'myApp.services'，[]）。
factory（'MyService'，function（$ http）{
var MyService = {};
$ http.get（'resources / data.json' {
MyService.data = response;
}）;
返回MyService;
}
）;
main.js
/ *这是我想要分开的其他文件* /
var myApp = angular.module（'myApp'），[]）;
myApp.factory（'MyService'，function（$ http）{
//与...相同的代码
}
myApp。过滤器（'myFilter'，function（MyService）{
//与filters.js中的代码相同
函数AppCtrl（$ scope，$ http，$ filter，MyService ）{
//与app.js中的代码相同
提前感谢
这个问题是由您在所有单独的文件中重新声明您的应用程序模块引起的。
这是应用程序模块声明（不确定声明是正确的术语） like：
angular.module（'myApp'，[]）。controller（// ...
这是什么作业（不确定如果作业是正确的术语）到您的应用程序模块看起来像：
angular.module（'myApp'）。controller（// ...
注意缺少方括号。
所以，以前的版本，一个方括号，应该只能使用一次，通常在你的 app.js 或 main.js 中。所有其他关联的文件 - 控制器，指令，过滤器 ... - 应该使用后一个版本，而不使用方括号。
$ b $我希望这是有道理的。干杯！
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.
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:
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...
}
]);
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?
Thanks in advance.
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.
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）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！