angularjs - 为什么要创建多个 AngularJS 模块？

Question

我很困惑。 AngularJS 需要在模块中创建服务、 Controller 和指令。但是这些服务、 Controller 和指令可以注入(inject)到任何其他服务、 Controller 或指令中，而不管它们所在的模块是什么!正确的？而且，除了 ng-app 之外，我还没有看到任何关心模块名称的 IDE 或工具。那么，为什么要创建多个模块？除了源代码中的可读性之外，创建模块实际上还有其他好处吗？

例子...

(function(module) {

    var dir = function(something) {
        return {
        };
    };

    module.directive("myDirective", dir);

}(angular.module("pointlessModuleName")));

我试图找到答案，但一直感到困惑......
Multiple Module in Angularjs

Answer 1

我在想完全相同的事情，并决定走在狂野的一边，将所有内容合并到一个模块下。当然，几分钟后才知道为什么这不是一个好主意:) 所以我想花时间解释一下我认为模块在哪里发挥了非常好的作用，独立于“一般意见”。

我从以下方面开始:

// main.js - v0

var ServerData = require('./services/server-data')
var filters = require('./filters')

angular.module('ServerLoad', ['ngRoute'])
.factory('ServerData', ['$http', ServerData])
.filter('lastseen', function () {return filters.lastseen})
.config(['$routeProvider', function ($routeProvider) {
  $routeProvider
  .otherwise({
    redirectTo: '/servers'
  })
}])

现在我想添加一个显示服务器列表的 View 。本质上， View 只不过是 Controller 和路由的组合，因此我将它们添加到代码中。这是我得到的(然后我将解释为什么这不是很好以及子模块如何解决这个问题):

// main.js - v1

var ServerListView = require('./views/server-list-view')       // <-- import view
var ServerData = require('./services/server-data')
var filters = require('./filters')

angular.module('ServerLoad', ['ngRoute'])
.factory('ServerData', ['$http', ServerData])
.controller('ServerListCtrl', ['ServerData', ServerListView])  // <-- add controller
.filter('lastseen', function () {return filters.lastseen})
.config(['$routeProvider', function ($routeProvider) {
  $routeProvider
  .when('/servers', {                                          // <-- add route
    controller: 'ServerListCtrl',                              //
    controllerAs: 'servers',                                   //
    templateUrl: 'assets/partials/server-list.html'            //
  })                                                           //
  .otherwise({
    redirectTo: '/servers'
  })
}])

虽然这肯定是一个有效的设置，但我不喜欢它的是 main.js定义 controllerAs和 templateUrl特性。对我来说，这些属性真的应该在依赖它的代码被定义的地方定义—— './views/server-list-view' ，甚至可能在 ServerListView类本身。

因此，与您的 IIFE 有点类似，我在 ServerListView 中添加了一个静态方法。将 View 添加到模块:

// main.js - v2 (from v0)

var ServerListView = require('./views/server-list-view')       // <-- import view
// ...

angular.module('ServerLoad', ['ngRoute'])
// ...

ServerListView.setup(window.angular.module('ServerLoad'))      // <-- adds ctrl and route

和

// server-list-view.js - v2

function ServerListView (ServerData) {
  var scope = this
  // ...
}
module.exports = ServerListView

ServerListView.setup = function (module) {
  module
  .controller('ServerListCtrl', ['ServerData', ServerListView])
  .config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when('/servers', {
      controller: 'ServerListCtrl',
      controllerAs: 'servers',
      templateUrl: 'assets/partials/server-list.html'
    })
  }])
}

我认为这看起来稍微好一点，但现在使用 'ServerData'打扰了我。毕竟，它没有在 server-list-view.js 中声明。任何地方。同样，如果 View 需要一些额外的外部模块，我将不得不编辑 main.js添加它。那感觉不太对劲。

然后我突然想到，如果我可以写一个 IIFE 来取 module作为论据，为什么不让它采取 angular作为论据？然后它可以根据需要定义自己的模块并包含所需的所有依赖项。此外，如果您仍然热衷于单模块一切，那么只需使用 'ServerLoad'模块名称并删除依赖项声明。这是唯一和全部的区别!

// server-list-view.js - v3

// ...

ServerListView.setup = function (angular) {
  angular.module('ServerLoad.ServerListView', ['ngRoute', 'ServerLoad'])
  // ...
}

所以，总而言之，我认为使用子模块的最大优势并不一定是其他人可以重用我的代码(我认为没有人会对我的服务器 ListView 感兴趣)，而是每一位代码都可以承受就其本身而言，重用其他人的代码，而不需要主模块包含所有这些。 main.js server-list-view.js 保持精益可以拉各种东西。

脚注。 ServerLoad 看起来还是有点奇怪。作为依赖项(到达 ServerData 工厂)。当然，在版本 4 中，该工厂也将存在于自己的子模块中；-)