AngularJS 模块声明的最佳实践? [英] AngularJS best practices for module declaration?
问题描述
我在我的应用中声明了一堆 Angular 模块.我最初开始使用链式"语法来声明它们，如下所示:
I have a bunch of Angular modules declared in my app. I originally started declaring them using the "chained" syntax like this:
angular.module('mymodule', [])
.controller('myctrl', ['dep1', function(dep1){ ... }])
.service('myservice', ['dep2', function(dep2){ ... }])
... // more here
但我认为这不太容易阅读，所以我开始使用这样的模块变量声明它们:
But I decided that wasn't very easy to read, so I started declaring them using a module variable like this:
var mod = angular.module('mymodule', []);
mod.controller('myctrl', ['dep1', function(dep1){ ... }]);
mod.service('myservice', ['dep2', function(dep2){ ... }]);
...
第二种语法对我来说似乎更具可读性，但我唯一的抱怨是这种语法将 mod 变量留在了全局范围内.如果我有其他一些名为 mod 的变量，它将被下一个(以及与全局变量相关的其他问题)覆盖.
The second syntax seems a lot more readable to me, but my only complaint is that this syntax leaves the mod variable out in the global scope. If I ever have some other variable named mod, it would be overridden with this next one (and other issues associated with global variables).
所以我的问题是，这是最好的方法吗?或者做这样的事情会更好吗?:
So my question is, is this the best way? Or would it be better to do something like this?:
(function(){
var mod = angular.module('mymod', []);
mod.controller('myctrl', ['dep1', function(dep1){ ... }]);
mod.service('myservice', ['dep2', function(dep2){ ... }]);
...
})();
或者关心是否足够重要?只是想知道模块声明的最佳实践"是什么.提前致谢.
Or does it even matter enough to care? Just curious to know what the "best practices" are for module declaration. Thanks in advance.
推荐答案
'Best' 声明模块的方式
由于 angular 在全局范围内并且模块被保存到它的变量中，你可以通过 angular.module('mymod') 访问模块:
As angular is on the global scope itself and modules are saved to its variable you can access modules via angular.module('mymod'):
// one file
// NOTE: the immediately invoked function expression
// is used to exemplify different files and is not required
(function(){
// declaring the module in one file / anonymous function
// (only pass a second parameter THIS ONE TIME as a redecleration creates bugs
// which are very hard to dedect)
angular.module('mymod', []);
})();
// another file and/or another anonymous function
(function(){
// using the function form of use-strict...
"use strict";
// accessing the module in another.
// this can be done by calling angular.module without the []-brackets
angular.module('mymod')
.controller('myctrl', ['dep1', function(dep1){
//..
}])
// appending another service/controller/filter etc to the same module-call inside the same file
.service('myservice', ['dep2', function(dep2){
//...
}]);
// you can of course use angular.module('mymod') here as well
angular.module('mymod').controller('anothermyctrl', ['dep1', function(dep1){
//..
}])
})();
不需要其他全局变量.
当然这完全取决于偏好，但我认为这是最好的做法，因为
Of course it depends all on preferences, but I think this is kind of the best practise, as
- 你不必污染全局范围
- 您可以随处访问您的模块，并随意将它们及其功能分类到不同的文件中
- 你可以使用use strict"的函数形式；
- 文件的加载顺序无关紧要
用于对模块和文件进行排序的选项
这种声明和访问模块的方式使您非常灵活.您可以通过功能类型(如另一个答案中所述)或通过路由对模块进行排序，例如:
This way of declaring and accessing modules makes you very flexible. You can sort modules via function-type (like described in another answer) or via route, e.g.:
/******** sorting by route **********/
angular.module('home')...
angular.module('another-route')...
angular.module('shared')...
最终如何排序取决于个人喜好以及项目的规模和类型.我个人喜欢将模块的所有文件分组在同一文件夹中(按指令、控制器、服务和过滤器的子文件夹排序)，包括所有不同的测试文件，因为它使您的模块更可重用.因此，在中等规模的项目中，我最终得到了一个基础模块，其中包括所有基本路由及其控制器、服务、指令和或多或少复杂的子模块，当我认为它们也可用于其他项目时，例如:
How you sort it in the end is a matter of personal taste and the scale and type of the project. I personally like to group all files of a module inside of the same folder (ordered into sub-folders of directives, controllers, services and filters), including all different test-files, as it makes your modules more reusable. Thus in middle-sized projects I end up with a base-module, which includes all basic routes and their controllers, services, directives and more or less complex sub-modules, when I think they could be useful for other projects as well,e.g.:
/******** modularizing feature-sets **********/
/controllers
/directives
/filters
/services
/my-map-sub-module
/my-map-sub-module/controllers
/my-map-sub-module/services
app.js
...
angular.module('app', [
'app.directives',
'app.filters',
'app.controllers',
'app.services',
'myMapSubModule'
]);
angular.module('myMapSubModule',[
'myMapSubModule.controllers',
'myMapSubModule.services',
// only if they are specific to the module
'myMapSubModule.directives',
'myMapSubModule.filters'
]);
对于非常大的项目，我有时最终会按路线对模块进行分组，如上所述，或者按某些选定的主要路线，甚至是路线和某些选定组件的组合，但这确实取决于.
For very big projects, I sometimes end up grouping modules by routes, as described above or by some selected main routes or a even a combination of routes and some selected components, but it really depends.
仅仅因为它是相关的，我最近又遇到了这个问题:小心你只创建一次模块(通过向 angular.module-function 添加第二个参数).这会弄乱您的应用程序，并且很难检测到.
Just because it is related and I ran into that very recently again: Take good care that you create a module only once (by adding a second parameter to the angular.module-function). This will mess up your application and can be very hard to detect.
2015 年分类模块一年半的 angular 经验之后，我可以补充一点，在你的应用程序中使用不同命名的模块的好处是有限的，因为 AMD 仍然不能很好地与 Angular 配合使用，并且服务、指令和过滤器在 angular 中是全局可用的上下文(如此处所示).尽管如此，仍然有语义和结构上的好处，并且能够包含/排除带有注释或注释的单行代码的模块可能会有所帮助.
2015 EDIT on sorting modules: One and a half year of angular-experience later, I can add that the benefits from using differently named modules within your app are somewhat limited as AMD still does not really work well with Angular and services, directives and filters are globally available inside the angular context anyway (as exemplified here). There is still a semantic and structural benefit though and it might be helpful being able to include/ exclude a module with a single line of code commented in or out.
它也几乎按类型分隔子模块没有多大意义(例如myMapSubModule.controllers")，因为它们通常相互依赖.
It also almost never makes much sense to separate sub-modules by type (eg. 'myMapSubModule.controllers') as they usually depend on each other.
这篇关于AngularJS 模块声明的最佳实践?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
