Question

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

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

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

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

有没有人建议更好或更有条理的方式来处理控制器或其他项目，自定义服务，指令等会使用相同的结构。

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

任何建议都将不胜感激。

谢谢！

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( 'ProductListCtrl', [ '$scope', function ( $scope ) { ... } ]);

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

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

您也可以自行捆绑通用指令，以便将测试和文档整合在一起 - 再次，按功能！并且这些组件中的每一个都可以在以后的项目中进行拖放。

一个很棒的参考实现是angular-app。看看吧！

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

Answer 2

我经常做

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

通过这种方式，您可以添加app.controllers作为依赖关系，从而使所有控制器都可用。

Angular.js将控制器组织到App命名空间中

2 个答案: