AngularJS Seed: 将 JavaScript 放入单独的文件(app.js、 Controlers.js、 directives.js、 filters.js、 services.js)

我使用 角状种子角状种子模板来构造我的应用程序。最初，我将所有 JavaScript 代码放入一个单独的文件 main.js中。这个文件包含我的模块声明、控制器、指令、过滤器和服务。应用程序像这样工作得很好，但是随着应用程序变得更加复杂，我担心它的可伸缩性和可维护性。我注意到棱角种子模板对每个文件都有单独的文件，所以我试图将我的代码从单个 main.js文件分发到这个问题的标题中提到的其他每个文件中，这些文件可以在 角状种子角状种子模板的 app/js目录中找到。

我的问题是: 如何管理依赖项以使应用程序工作？现有的 给你文档在这方面不是很清楚，因为给出的每个示例都显示了一个 JavaScript 源文件。

我有一个例子:

应用程序

angular.module('myApp',
['myApp.filters',
'myApp.services',
'myApp.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;
}
);

主要的

/* 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
}

如何管理依赖项？

先谢谢你。

76284 次浏览
小开

You get the error because you didn't define myApp.services yet. What I did so far is putting all the initial definitions in one file and then use them in another. Like for your example I would put in:

app.js

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


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

That should get rid of the error, though I think you should have a read on the article Eduard Gamonal mentioned in one of the comments.

小开
最佳答案

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!

小开

If you're wanting to put your different parts of your application (filters, services, controllers) in different physical files, there are two things you have to do:

  1. Declare those namespaces (for lack of a better term) in your app.js or in each file;
  2. Refer to those namespaces in each of the files.

So, your app.js would look like this:

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


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

And in each individual file:

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

All of this can be combined into one call:

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

The important part is that you shouldn't redefine angular.module('myApp'); that would cause it to be overwritten when you instantiate your controllers, probably not what you want.


提交答案