Question

我开始学习angularjs，我看到了2种类型的模块使用，我无法理解何时使用它以及何时：

例1：

var app = angular.module('app', []);
app.factory('Comment', function($http) {
}
app.controller('mainController',  function($scope, $http, Comment) {
}

或例2：

angular.module('commentService', [])
.factory('Comment', function($http) {
}

angular.module('mainCtrl', [])
.controller('mainController',  function($scope, $http, Comment) {
}

var app = angular.module('app', ['commentService','mainCtrl']);

有时我会在每个文件中看到模块声明（服务工厂控制器等）有时我看到在这些文件中使用app模块，正确的方法是什么？为什么他们两个都有效？

Answer 1

首先，如果您关注应用程序组织，请阅读大约一年前yeoman-generator-angular issue board上的讨论。那里有更多的智慧，而不是你可以期望得到一个SO答案。那就是说，我会尝试提供一个与你的具体关注更相关的答案，并且（略微）更简洁。

不要为angular.module('MainCtrl',[]).controller('MainCtrl')这样的单个控制器制作模块，或者甚至是一组只与他们都是控制器相关的控制器：

angular.module('appCtrl', [])
    .controller('appleController', function ($scope) {})
    .controller('orangeController', function ($scope) {})
    .controller('unicornController', function ($scope) {})
;

为什么这是一个坏主意？首先，根据定义，它是分类的，而不是模块化的;模块是系统组件的分组，它们与局部相关，而不是概念。当你开车时，你不能立刻放入所有的螺母和螺栓。你放入了将你正在建造的模块固定在一起的螺母和螺栓。控制器就像螺母和螺栓。引擎就像一个模块。

其次，现在您必须将appCtrl模块注入您想要访问控制器的任何位置。对于开发人员而言，这只是一件混乱的事情;他们总是在搜索代码时试图找到＆＃34;无论那个模块中的那个模块是什么＆＃34;是的，或者他们只是在整个地方重复代码。

AngularJS中的依赖注入不是一个规则，而是一个（聪明且令人敬畏的）字符串操作黑客，JavaScript没有＆＃34;命名空间＆＃34;经典意义上的系统。创建像app.products或app.cart这样的模块更多的是为了方便开发人员和/或控制发布周期，而不是让程序＆＃34;工作＆＃34;。

出于这些原因和其他原因，我提醒开发人员注意＆＃34;过早的模块化＆＃34;。如果您正在编写特定于应用的内容 - 也就是说，您现在无法在其他应用中重复使用它 - 为什么不将它附加到您的应用模块？然后，您可以在应用中的任意位置访问它。（当然有一些复杂因素可能会导致你改变这种情况，但是当你模块化的时候会出现）。

按功能构建目录（毕竟，角度约定会包含BDD）：

|-app/ |-|-cart/ |-|-|-CartItemsModel.js |-|-|-OrderRepository.js |-|-|-cart.html |-|-|-add-item-modal/ |-##some more cart stuff |-|-checkout/ |-|-|-confirmation/ |-|-|-|-confirmation.html |-|-|-|-confirmation.less

如果您正在撰写功能文件或获得雇主的验收标准，您甚至可以在这些功能或需求集之后直接对目录结构进行建模。这使得一切顺利，从定义迭代的范围到文档，再到稍后重新访问代码。

Answer 2

两个例子都有效。但是例如在示例2中，该语法可以用于分离关注点。您可能需要一个负责提供服务的模块，该模块为您提供Rest调用功能。或者包含一些指令的另一个模块。

Answer 3

将模块隔离到不同的文件通常被认为是一种很好的做法。这将确保您正在练习良好的代码控制，并为您的代码提供更高程度的可移植性和调试能力。不是在同一文件中声明模块，而是使用模块名称在不同的文件中声明它们。

根据模块 - 控制器关系隔离文件是很好的做法 - 也就是说，每个控制器应该有自己的文件，如下所示：

\scripts\controllers\
- - main.js
- - comments.js

然后，在main.js文件中，您将从控制器声明开始：

//main.js
angular.module('app')
  .controller('MainController', function ($scope, $http) {
    // Controller-scope stuff here
});

最后，在comments.js文件中：

angular.module('app')
  .controller('CommentsController', function($scope, $http, $routeParams) {

    // Comment controller code
});

直接帮助组织的一种方法是使用种子模板来组织文件，例如Angular Seed。

请记住，您希望将module('app').controller('whatever')保留在whatever.js内，并且任何其他.factory('forWhatever')（如您的示例中）应该包含在其中的父.controller('whatever')内whatever.js个文件。

为每个文件声明模块或使用应用程序模块的所有文件？

3 个答案: