javascript - Angular.js 将 Controller 组织到 App 命名空间中

Question

我开始在一个新项目中使用 Angular.js，从基本教程中，我看到的主要是一个controllers.js 文件，其中包含所有 Controller 函数，每个函数都绑定(bind)到 window 对象。

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

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

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

是否有人建议一种更好或更有组织的方式来处理 Controller 或其他项目、自定义服务、指令等，并使用相同的结构。

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

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

谢谢!

Answer 1

好问题!

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

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

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

在 src/app 中，您可以根据您正在处理的网站部分(例如菜单)和路线(例如产品列表和产品详细信息)打包内容。每个都可以这样声明:

angular.module( 'products', [
  'productCatalog',
  ...
])

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

.config( [ '$routeProvider', function( $routeProvider ) {
  $routeProvider.when( '/products', { ... } );
  $routeProvider.when( '/products/:id', { ... } );
});

以及 Controller 等:

.controller( 'ProductListCtrl', [ '$scope', function ( $scope ) { ... } ]);

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

angular.module( 'app', [
  'products',
  ...
]);

您还可以将通用指令本身捆绑在一起，以将您的测试和文档放在一起 - 再次，按功能!这些组件中的每一个都可以在未来的项目中拖放重用。

一个很好的引用实现是 angular-app 。看看吧!

更新:自从这个答案之后，我启动了一个名为 ngBoilerplate 的 AngularJS 项目 kickstarter/template封装这些概念(以及许多其他最佳实践)和支持它们的复杂构建系统。