javascript - 在 angularjs 中组织 Controller 和模块？

Question

查看AngularJS's docs - 我看到声明 Controller 的常规(据我所知)模式:(支持缩小)

var phonecatApp = angular.module('phonecatApp', []);
    phonecatApp.controller('PhoneListCtrl', ['$scope', '$http',
       function ($scope, $http) {
       ...
       }]);

但是 later on - they changed it to :

  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>

哪里app.js:

var phonecatApp = angular.module('phonecatApp', [
  'ngRoute',
  'phonecatControllers'
]);

和controllers.js:

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

phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',
  function($scope, $http) {
   ...
  }]);

问题

1) 第一段代码的模块化有什么问题？我没有看到问题所在。我有一个应用程序，我将 Controller 附加到它上面，仅此而已。我从第二个代码中获得什么好处？ 现实生活场景将不胜感激。

2) 在第二个代码中 - 为什么 app.js 正在处理 phonecatControllers，而 phonecatControllers 不在页面上。 (它的js是随后加载的)。

Answer 1

我认为第一段代码更好，事实上，Angular 建议无论如何都要这样做:

https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub

这种方法非常适合模块化您的代码。我的应用程序通常设置为:

modules
   |--home
      home-controller.js
      home.js
      home-service.js
      home.html
   |--user
      user-controller.js
      user.js
      user-service.js
      user.html

这样，属于某个模块的所有代码都位于其自己的文件中，并包含在一个目录中。以这种方式让事情井井有条要容易得多。

这是典型的模块文件(即上面的 home.js)的样子(示例使用 require.js):

define(function(require) {

    var angular = require("angular");
    var homeController = require("modules/home/home-controller");
    var homeService = require("modules/home/home-service");

    var homeModule = angular.module("Home", []);
    homeModule.controller("HomeCtrl", homeController);
    homeModule.service("HomeService", homeService);

    return homeModule;
});

我认为这种方法的好处是:

1. 将代码清晰地组织到目录中，这样如果我正在处理家庭功能，我就不需要在整个应用程序中来回寻找我的文件。

2. 将代码保留在自己的文件中，因此我没有包含所有 Controller 代码的庞大“ Controller ”文件

3. 允许我通过简单地缩小/打包目录来轻松捆绑模块。然后我可以在其他需要它们的应用程序/系统中重用这些模块。

4. 在单元测试时，我可以简单地加载这些模块之一，并且我可以有效地将我的测试隔离到该模块。使用另一种方法，如果我加载“ Controller ”模块，我将加载测试的所有 Controller 代码，这是一种浪费。按照上述方式执行此操作不仅可以实现出色的代码隔离，还可以加快测试速度，因为我只加载运行测试所需的内容。

回答你的第二个问题，app.js是 Angular 应用程序的主要模块。在 Angular 中，您将其他模块添加为主应用程序的依赖项，因此在您的示例中，phoneCatControllers模块被添加为主应用程序的依赖项。实际controllers.js文件是通过 <script> 加载的标签或通过某种类型的 AMD/CommonJS 加载。然后，一旦加载，您就可以获取模块的名称并将其作为依赖项添加到主应用程序模块中。

在第二个示例中，模块按类型分组，因此所有 Controller 都添加到一个模块，所有服务添加到另一个模块。由于我上面提到的原因，这很糟糕。它会导致您的应用程序的功能散布各处并且很难找到。当您只想测试其中一个 Controller 时，它还要求您加载所有 Controller 。

在第一个示例(以及 Google/Angular 当前的风格建议)中，您可以按功能分组，而不是按文件类型分组，即用户目录或主目录，而不是 Controller 目录或服务目录。

phoneCatControllers 能够作为模块依赖项被引用的原因是 Angular 引导应用程序的方式。 ng-app 指令在 onDOMContentLoaded 期间评估，因此一旦加载了所有脚本。如果您使用 RequireJS 之类的东西，有多种方法可以手动引导应用程序，但在您的示例中，所有脚本都已加载，然后 Angular 引导应用程序。

更多信息请参见:

https://docs.angularjs.org/guide/bootstrap