在组织angularjs控制器和模块？ [英] Organizing controllers and modules in angularjs?

问题描述

纵观的 AngularJS的文档的 - 我看定期（我知道）模式宣告控制器：（支持缩小）的

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

但是 的后面 - 他们改变它的：

  <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），这有什么错模块化的第一件code的？我没有看到这个问题。我有一个应用程序，我附上控制器给它，就是这样。我从第二code得到什么好处？的真实生活场景的会更AP preciated。

1) What's wrong with modularity in the first piece of code ? I dont see the problem. I have an App ,I attach controllers to it and that's it. what benefit do I gain from the second code ? real-life scenario will be much appreciated.

2）在第二code - 怎么来的 app.js 正在处理 phonecatControllers ，其中 phonecatControllers 不是在页面上。 （它的JS是事后加载）。

2) In the second code - how come app.js is dealing with phonecatControllers where phonecatControllers is not on the page. ( it's js is loaded afterwards).

推荐答案

code的第一块在我看来，事实上更好，角是在暗示反正走那条路：

The first piece of code is better in my opinion and in fact, Angular is suggesting to go that way anyway:

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

这个方法在你的模块化code是巨大的。我的应用程序通常设置为：

This approach is great at modularizing your code. My apps are typically setup as:

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

使属于某个模块的所有code是在其自己的文件与包含在目录中。它是如此容易得多，以保持组织这样的事情。

So that all code that belongs to a certain module is in its own file and is contained in a directory. It's so much easier to keep things organized this way.

下面是一个典型的模块文件（即上述home.js）将是什么样子（例如使用require.js）：

Here is what a typical module file (i.e. home.js above) would look like (example uses 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;
});

这种方法的好处是，我看到他们：

The benefits of this approach are as I see them:

1. 保持code清晰地整理成目录，因此，如果我的工作就回家功能，我并不需要在应用程序寻找我的文件的所有反弹。

1. Keeps code cleanly organize into directories so that if I'm working on the home feature, I don't need to bounce all over the app looking for my files.

一直包含在自己的文件code，所以我没有与所有的控制器code一个庞大的控制器文件

Keeps code contained in their own files, so I don't have a mammoth 'controllers' file with all controller code

让我简单地与缩小/包装目录很容易捆扎模块。然后我可以重复使用其他应用/系统需要它们的这些模块。

Allows me to bundle up modules easily by simply minifying/packaging a directory. I can then reuse these modules in other apps/systems that need them.

在单元测试时间，我可以简单地加载这些模块之一，我有效隔离我的测试，只是模块。与其他的方法，如果我加载了控制器模块，我加载所有控制器code为我的测试，这是一种浪费。做上述方式不仅可以实现巨大的code隔离，同时也加速了我的测试，因为我只装正是我需要运行我的测试。

At unit test time, I can simply load one of these modules and I am effectively isolating my tests to just that module. With the other approach, if I loaded the 'controllers' module, I am loading ALL controller code for my test, which is a waste. Doing it the above way not only achieves great code isolation, but also speeds up my tests since I'm only loading exactly what I need to run my test.

要回答你的第二个问题， app.js 是角应用程序的主要模块。在角，你在你的例子添加其它模块依赖于你的主要应用程序，因此， phoneCatControllers 模块被添加作为一个依赖于主应用程序。实际 controllers.js 文件或者通过加载＆LT;脚本＆GT; 标记或通过某种类型的AMD / CommonJS的中加载。然后，一旦它的加载，你把模块的名称，并将其添加作为依赖于你的主要应用模块。

To answer your second question, app.js is the main module of the Angular application. In Angular, you add other modules as dependencies to your main app, so in your example, phoneCatControllers module is being added as a dependency to the main app. The actual controllers.js file was either loaded through a <script> tag or through some type of AMD/CommonJS loading. Then once its loaded, you take the name of the module and add it as a dependency to your main app module.

在第二个例子中，模块通过如此的所有控制器被添加到一个模块类型分组，所有的服务加入到另一个模块。这是不好的我在上面提到的原因。它会导致你的应用程序的功能将散落各地的地方，很难找到。而且它也需要你来加载所有控制器，当你只是想测试其中之一。

In the second example, modules are grouped by type so all controllers are added to one module, all services added to another module. This is bad for the reasons I mentioned above. It causes features of your app to be strewn all over the place and hard to find. And it also requires you to load ALL controllers when you just want to test one of them.

随着第一个例子（和谷歌/角当前的风格的建议），你按功能，而不是按文件类型，即用户目录或主目录，而不是一个控制器目录或服务目录。

With the first example (and Google/Angular's current style recommendations), you group by feature instead of grouping by file type i.e. a user directory or a home directory instead of a controllers directory or a services directory.

之所以phoneCatControllers能够作为一个模块依赖被引用是由于角的引导程序，该应用程序的方式。 onDOMContentLoaded在NG-程序指令进行评估，因此，一旦所有的脚本已经被加载。有一些方法可以手动引导，如果你使用像RequireJS但在您的示例应用程序，所有的脚本加载，那么角度的引导程序，该应用程序。

The reason that phoneCatControllers is able to be referenced as a module dependency is due to the way that Angular bootstraps the application. The ng-app directive is evaluated during onDOMContentLoaded, so once all scripts have been loaded. There are ways to manually bootstrap the application if you are using things like RequireJS but in your example, all scripts are loaded, then Angular bootstraps the application.

点击此处了解详情：

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

这篇关于在组织angularjs控制器和模块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！