Question

查看AngularJS's docs - 我看到了用于声明控制器的常规（我知道）模式：（支持缩小）

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）第一段代码中的模块化有什么问题？我没有看到问题。我有一个应用程序，我将控制器连接到它，就是这样。我从第二个代码中获得了什么好处？ 现实场景将不胜感激。

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;
});

这种方法的好处就像我看到的那样：

将代码整洁地整理到目录中，这样如果我正在处理主页功能，我就不需要在应用程序中反弹查找我的文件。
将代码保存在自己的文件中，因此我没有一个庞大的控制器＆＃39;包含所有控制器代码的文件
允许我通过简单地缩小/打包目录来轻松捆绑模块。然后，我可以在需要它们的其他应用程序/系统中重用这些模块。
在单元测试时，我可以简单地加载其中一个模块，并且我有效地将我的测试隔离到该模块。使用另一种方法，如果我加载了控制器＆＃39;模块，我正在为我的测试加载所有控制器代码，这是一种浪费。以上述方式实现这一目标不仅可以实现良好的代码隔离，而且还可以加快我的测试速度，因为我只是正好加载了运行测试所需的内容。

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

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

使用第一个示例（以及Google / Angular的当前样式建议），您可以按功能分组，而不是按文件类型分组，即用户目录或主目录，而不是控制器目录或服务目录。< / p>

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

此处提供更多信息：

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

Answer 2

这在教程中很常见。首先，他们使用一个小例子，其中有一个模块，并且有一个控制器。两者之间的关系是一对一的。但是，我认为角度文档会让您准备好接受模块化。

也许在这个例子中很难看到，因为没有太多的事情发生，但是当你添加工厂和服务以及多个控制器时，为了保持清晰度并减少混乱，建议分开你的代码。

组织angularjs中的控制器和模块？

2 个答案: