角。js将控制器组织到App命名空间中

I'm starting to use Angular.js on a new project and from the basic tutorials, I see mostly a single controllers.js file that contains all the controller functions, each which are bound to the window object.

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

It seems that a better practice would be use the existing "myApp" namespace, to add controllers to, for example:

似乎更好的做法是使用现有的“myApp”名称空间向其中添加控制器，例如:

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

All controllers would be part of the created "myApp.controllers" object or "window.myApp.controllers".

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

Does anyone suggest a better or more organized way to handle controllers or other item, custom services, directives, etc. would use the same structure.

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

In addition to this, I'm debating about putting each controller into it's own file, which ultimately would be combined for production, but depending on the size of the app, it may be a bit overkill and only cause more work bouncing around between files.

除此之外，我还在讨论将每个控制器放到它自己的文件中，这些文件最终将被合并到产品中，但是根据应用程序的大小，这可能有点过了头，只会在文件之间产生更多的工作。

Any suggestions would be greatly appreciated.

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

Thanks!

谢谢!

2 个解决方案

#1

Great question!

好问题!

I don't like that the tutorials and documentation take a "package-by-layers" approach to their code. I think that is probably done for convenience in teaching concepts, which is great, but that approach has limited applicability in the real world.

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

Package-by-feature is a far better approach:

按功能分组是一种更好的方法:

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

Inside src/app, you can package your contents based on the section of the site you're working on (e.g. menus) and by routes (e.g. product list and product detail). Each can be declared like so:

在src/app中，你可以根据你正在做的网站(例如菜单)和路线(例如产品列表和产品细节)来打包你的内容。每一种都可以这样声明:

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

And each module can have its own routes:

每个模块都有自己的路线:

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

And controllers, etc:

和控制器等:

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

So everything that goes together is packaged in the same directory. And you can place all of your components in separate files, with one module per file (if you wish; I usually do). And in your top-level app, you simply declare your dependencies:

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

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

You can also bundle general-purpose directives by themselves, too, to keep your tests and documentation all together - again, by feature! And each of these components are drag-and-drop reusable in future projects.

您还可以自己打包通用指令，以保持您的测试和文档都在一起——同样，按特性!每个组件都是拖放可重用的，在未来的项目中。

A great reference implementation is angular-app. Check it out!

一个很好的参考实现是angular-app。点击这里查看详情！

Update: Since this answer, I started an AngularJS project kickstarter/template called ngBoilerplate to encapsulate these concepts (among many other best practices) and a sophisticated build system to support them.

更新:由于这个答案，我启动了一个AngularJS项目kickstarter/template，它被称为ngBoilerplate，用来封装这些概念(在许多其他最佳实践中)和一个复杂的构建系统来支持它们。

#2

I usually do

我通常做

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

This way you can add app.controllers as a dependency and thus make all your controllers available.

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

#1