AngularJS 模块声明的最佳实践？

Question

我的应用程序中声明了一堆 Angular 模块。我最初开始使用“链接”语法来声明它们，如下所示:

angular.module('mymodule', [])
    .controller('myctrl', ['dep1', function(dep1){ ... }])
    .service('myservice', ['dep2', function(dep2){ ... }])
    ... // more here

但我认为这不太容易阅读，所以我开始使用这样的模块变量来声明它们:

var mod = angular.module('mymodule', []);

mod.controller('myctrl', ['dep1', function(dep1){ ... }]);

mod.service('myservice', ['dep2', function(dep2){ ... }]);
...

第二种语法对我来说似乎更具可读性，但我唯一的提示是这种语法将 mod 变量保留在全局范围内。如果我有其他名为 mod 的变量，它将被下一个变量覆盖(以及与全局变量相关的其他问题)。

所以我的问题是，这是最好的方法吗？或者做这样的事情会更好吗？:

(function(){
    var mod = angular.module('mymod', []);
    mod.controller('myctrl', ['dep1', function(dep1){ ... }]);
    mod.service('myservice', ['dep2', function(dep2){ ... }]);
    ...
})();

或者它是否足够重要以至于需要关心？只是想知道模块声明的“最佳实践”是什么。

Answer 1

声明模块的“最佳”方式

由于 Angular 本身位于全局范围内，并且模块保存到其变量中，因此您可以通过 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){
      //..
  }])
})();

不需要其他全局变量。

当然，这完全取决于偏好，但我认为这是最好的做法，因为

1. 您不必污染全局范围
2. 您可以随处访问您的模块，并随意将它们及其功能分类到不同的文件中
3. 您可以使用“use strict”的函数形式；
4. 文件的加载顺序并不重要

用于对模块和文件进行排序的选项

这种声明和访问模块的方式使您非常灵活。您可以通过功能类型(如另一个答案中所述)或通过路线对模块进行排序，例如:

/******** sorting by route **********/    
angular.module('home')...
angular.module('another-route')...
angular.module('shared')...

最终如何排序取决于个人品味以及项目的规模和类型。我个人喜欢将模块的所有文件分组到同一文件夹中(排序到指令、 Controller 、服务和过滤器的子文件夹中)，包括所有不同的测试文件，因为它使您的模块更具可重用性。因此，在中型项目中，我最终得到一个基本模块，其中包括所有基本路由及其 Controller 、服务、指令和或多或少复杂的子模块，当我认为它们也对其他项目有用时，例如:

/******** 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'
]);

对于非常大的项目，我有时最终会按路线对模块进行分组，如上所述，或按某些选定的主路线，甚至按路线和某些选定组件的组合进行分组，但这实际上取决于情况。

编辑:仅仅因为它是相关的，我最近再次遇到了这个问题:请小心，只创建一次模块(通过向 angular.module-function 添加第二个参数)。这会弄乱您的应用程序并且很难检测到。

2015 年对排序模块的编辑:经过一年半的 Angular 经验后，我可以补充一点，在应用程序中使用不同命名的模块的好处有些有限，因为 AMD 仍然不能很好地与 Angular 配合使用，并且服务、指令和过滤器在 Angular 内部全局可用无论如何，上下文( as exemplified here )。尽管如此，仍然有语义和结构上的好处，并且能够包含/排除带有注释或注释的单行代码的模块可能会有所帮助。

按类型分隔子模块几乎没有多大意义(例如“myMapSubModule.controllers”)，因为它们通常相互依赖。