Question

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

示例...

(function(module) {

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

    module.directive("myDirective", dir);

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

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

Answer 1

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

我从一开始就开始：

// 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', ['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添加了一个静态方法，将视图添加到模块中：

// 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任何地方声明。同样，如果视图需要一些额外的外部模块，我将不得不编辑main.js来添加它。这感觉不合适。

然后我突然意识到，如果我能写一个IIFE以module作为参数，为什么不让它以angular为参数？然后它可以定义自己的模块，但它喜欢并包含所需的所有依赖项。此外，如果您仍然对单模块一切都狂热，那么只需使用'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中，工厂当然也将存在于自己的子模块中; - ）

Answer 2

据我所知，拥有多个模块的唯一原因是为了满足代码模块化，实现松散耦合，并在将来实现轻松维护。

例如，您可以拥有一个依赖于实现特定功能区域的其他模块的应用程序模块。这些模块不知道任何外部的东西，理想情况下也不应该关心。

假设您有一个数据存储库模块，其中包含处理某些Web服务的REST API的服务和工厂。您基本上可以在多个应用程序中重用此模块。它本质上是即插即用的。将所有服务放入一个可以依赖注入的单独模块中，只是一种很好地打包并使其可重用的方法。

在我看来，您使用模块的代码示例并不理想，我也不会将IIFE作为模块。我会做更多这样的事情：

angular.module('dataRepo', []);
// 'dataRepo' implementation left out for brevity

// create a new angular app that depends on the 'dataRepo' module
angular.module('myApp', ['dataRepo']);

此外，这是一个很好的article你可以看看。向下滚动到按功能分组模块部分。

Answer 3

可以创建一个可以完成所有操作的大模块，但是已经设置了Angular，以便您可以在不同的模块上分配责任。

〜创建模块实际上是否具有读取能力以外的好处？

您可能想要了解Angular中的不同内容。例如，服务可以看作是一个总是返回相同数据的单例。这非常适合创建从API接收数据的HTTP请求。

制作一个指令，以便它可以使用jqlite访问DOM，这使得它非常适合创建UI组件。然后，Angular还有一些其他的东西，你可以在一个模块中创建像常量一样。

在解释所有这些问题时，Angular有很多介绍。如果您正在寻找一个好的IDE，我个人使用具有强大Angular支持的webstorm。

编辑16.04.15

我承认，我误解/误读了你的问题。

您可以创建一个名为＆＃39; app＆＃39;其中包含所有指令，控制器等。让我链接到模块的优点来自Angular网站（https://docs.angularjs.org/guide/module）：

声明性过程更容易理解。
您可以将代码打包为可重复使用的模块。
模块可以按任何顺序（甚至并行）加载，因为模块会延迟执行。
单元测试只需要加载相关模块，这样可以使它们保持快速。
端到端测试可以使用模块覆盖配置。

第1点是您的可读性。

2意味着可重用性。您将能够创建一个包含html小部件的库，例如，您可以在不同的项目中使用它。请注意，如果您是第三方库，则表示您已在使用模块系统。

3意味着加载模块的灵活性。

4 + 5表示可测试性。如果您有一个包含所有代码的模块，那么您将无法轻松地对应用程序的各个部分进行单元测试。您可以更轻松地覆盖设置，还可以将模拟对象注入模块中。

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

3 个答案: