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

我从一开始就有以下几点：

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

现在我想添加一个显示服务器列表的视图.从本质上讲,视图不仅仅是控制器与路由的组合,因此我将其添加到代码中.这是我得到的(然后我会解释为什么这不太好以及子模块如何解决这个问题)：

// 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',ServerData])
.controller('ServerListCtrl',['ServerData',ServerListView])  // <-- add controller
.filter('lastseen',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添加了一个静态方法,将视图添加到模块中：

// 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',ServerListView])
  .config(['$routeProvider',function ($routeProvider) {
    $routeProvider
    .when('/servers',{
      controller: 'ServerListCtrl',controllerAs: 'servers',templateUrl: 'assets/partials/server-list.html'
    })
  }])
}

我认为这看起来稍好一点,但现在使用’ServerData’困扰了我.毕竟,它没有在server-list-view.js中的任何地方声明.同样,如果视图需要一些额外的外部模块,我将不得不编辑main.js来添加它.这感觉不合适.

然后我想到,如果我能写一个IIFE来将模块作为参数,为什么不让它以角度作为参数呢？然后它可以定义自己的模块,但它喜欢并包含所需的所有依赖项.此外,如果您仍然对单模块一切都狂热,那么只需使用’ServerLoad’模块名称并删除依赖声明.这是唯一和完全的区别！

// server-list-view.js - v3

// ...

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

总而言之,我认为使用子模块的巨大优势并不一定是其他人可以重用我的代码(我不认为任何人会对我的服务器列表视图感兴趣),但是每一段代码都可以代表独立地重用其他人的代码,而不需要主模块包含所有这些. main.js保持精简,而server-list-view.js可以提供各种各样的东西.

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