javascript Angular.js 将控制器组织到 App 命名空间中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14597062/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular.js organize controllers into App namespace
提问by dzm
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.
我开始在一个新项目中使用 Angular.js，从基本教程中，我看到的主要是一个包含所有控制器函数的 controller.js 文件，每个函数都绑定到 window 对象。
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.controllers”对象或“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!
谢谢！
回答by Josh David Miller
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 ngBoilerplateto encapsulate these concepts (among many other best practices) and a sophisticated build system to support them.
更新：自从有了这个答案，我开始了一个名为ngBoilerplate的 AngularJS 项目 kickstarter/模板来封装这些概念（以及许多其他最佳实践）和一个复杂的构建系统来支持它们。
回答by akonsu
I usually do
我通常做
(angular
.module('app.controllers', ['ng', ...])
.controller('myContrA', [
/******/ '$scope',
function ($scope) {
}
])
.controller('myContrB', [
/******/ '$scope',
function ($scope) {
}
])
);
This way you can add app.controllersas a dependency and thus make all your controllers available.
通过这种方式，您可以添加app.controllers为依赖项，从而使您的所有控制器都可用。
