Javascript js将控制器组织到应用程序命名空间中

我开始在一个新项目中使用Angular.js，从基本教程中，我看到了一个包含所有控制器函数的controllers.js文件，每个函数都绑定到窗口对象

似乎更好的做法是使用现有的“myApp”命名空间，将控制器添加到，例如：

myApp.controllers = {};
myApp.controllers.userItem = function($scope) {}

所有控制器都将是创建的“myApp.controllers”对象或“window.myApp.controllers”的一部分

是否有人建议采用更好或更有组织的方式来处理控制器或其他项目、自定义服务、指令等，这些都将使用相同的结构

除此之外，我还在讨论是否将每个控制器放入其自己的文件中，最终将合并用于生产，但根据应用程序的大小，这可能有点过火，只会导致更多的工作在文件之间跳跃

如有任何建议，将不胜感激

谢谢

我通常这样做

(angular
 .module('app.controllers', ['ng', ...])
 .controller('myContrA', [
     /******/ '$scope',
     function ($scope) {
     }
 ])
 .controller('myContrB', [
     /******/ '$scope',
     function ($scope) {
     }
 ])
);

通过这种方式，您可以添加

app.controllers

作为依赖项，从而使您的所有控制器都可用。

好问题

我不喜欢教程和文档采用“分层打包”的方法来编写代码。我认为这样做可能是为了方便教授概念，这很好，但这种方法在现实世界中的适用性有限

按功能打包是一种更好的方法：

|- README
|- src/
   |- app/
      |- app.js
      |- feature1/
      |- feature2/
      |- ...
   |- vendor/
      |- angular/
      |- bootstrap/
      |- ...
   |- assets/
   |- less/
   |- index.html

在

src/app

中，您可以根据您正在使用的站点部分（如菜单）和路线（如产品列表和产品详细信息）打包内容。每一项都可以这样声明：

angular.module（'products'[
“产品目录”，
...
])

每个模块都可以有自己的路由：

.config（['$routeProvider'，函数（$routeProvider）{
$routeProvider.when（'/products'，{…}）；
$routeProvider.when（'/products/：id'，{…}）；
});

和控制器等：

.controller（'ProductListCtrl'，['$scope'，function（$scope）{…}]）；

因此，所有组件都打包在同一个目录中。您可以将所有组件放在单独的文件中，每个文件一个模块（如果您愿意，我通常会这样做）。在顶级应用程序中，您只需声明依赖项：

angular.module（'app'[
"产品",，
...
]);

您也可以自己捆绑通用指令，以将测试和文档放在一起—同样，按功能！并且这些组件中的每一个都可以在将来的项目中进行拖放重用

一个很好的参考实现是。看看吧

---

更新：从这个答案开始，我启动了一个名为kickstarter/template的AngularJS项目来封装这些概念（以及许多其他最佳实践）还有一个复杂的构建系统来支持它们。

我喜欢这种外观，但当我调用设置路由的app config函数时，我的所有控制器都未定义。它总是告诉我“app.controllers是一个未知的提供者”您需要在应用程序模块的依赖项中列出

app.controllers

模块名称。谢谢！您知道实际的问题是，在我的路由器中，我将控制器作为变量而不是字符串引用。因此它是{controller:MyOldGlobalControllerName}，但当您这样做时，它需要是字符串{controller:'MyOldGlobalControllerName'}-谢谢！这与AngularJS团队的最佳实践部分（）和John Papa的常用社区驱动风格指南中的angular最佳实践背道而驰。请快速引用前者：“不要在无法拆分的水平面上拆分应用程序，而是将代码分组到相关捆绑包中。[…]如果您删除模块，app.controllers、app.services等将拆分应用程序[…]app.users、app.users.edit、app.users.admin、app.projects等允许您对相关组件进行分组。"@acme我很高兴你发现它很有用！我还添加了一个链接到，这是新AngularJS项目的构建系统和项目模板。我喜欢它。本着将所有相关项目放在一起的精神，你认为将该模块的测试放在同一个目录中怎么样？@Vishal我强烈支持将源代码、测试、样式和te放在一起将所有模板放在一起，组织为可重用组件。：-）