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

我很困惑. AngularJS要求在模块中创建服务,控制器和指令.但是,这些服务,控制器和指令可以注入到其中存在的模块的任何其他服务,控制器或指令中！正确？并且,除了ng-app之外,我还没有看到任何关心模块名称的IDE或工具.那么,为什么创建多个模块？在源代码中创建模块实际上是否具有除可读性之外的好处？

例…

(function(module) {

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

    module.directive("myDirective",dir);

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

我试过找到答案,但一直感到困惑……
Multiple Module in 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中,工厂当然也将存在于自己的子模块中;-)

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

解决方法

相关推荐