28

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

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

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

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

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

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

任何建议将不胜感激。

谢谢！

4

2 回答 2

56

好问题！

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

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

|- 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/模板来封装这些概念（以及许多其他最佳实践）和一个复杂的构建系统来支持它们。

于 2013-01-30T05:26:07.680 回答
2

我通常会

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

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

于 2013-01-30T05:10:08.957 回答