在AngularJS中管理控制器的最佳方法(Best way to manage controllers in AngularJS)

有一个包含许多控制器的项目。将它们全部放入controllers.js似乎是不明智的。 AngularJS中是否有办法执行以下操作：

controllers.js import/include baseControllers.js import/include clientControllers.js import/include searchControllers.js

也就是说，只是一种在单个文件中管理控制器集的方法！

感谢您的帮助或指示。

Have a project with many controllers. Putting them all into controllers.js seems ill-advised. Is there a way in AngularJS to do something like:

controllers.js import/include baseControllers.js import/include clientControllers.js import/include searchControllers.js

That is, just a way to manage the set of controllers in a single file!

Thanks for any help or pointers.

最满意答案

将它们全部放入controllers.js似乎是不明智的

实际上，假设您没有编写Hello World应用程序，那将是一团糟。

每个控制器功能都应位于以该控制器命名的专用文件中。应用程序的每个文件都应该负责单一的责任然后，正如@Manube在他的评论中所说，在部署时，您的应用程序脚本应该缩小并连接在一个文件中。所有第三方库也是如此 。另请注意编写简化安全代码，例如：

['$scope', function($scope) { // ... }]

不是开发人员的责任。它应该像ng-annotate这样的插件来处理。

将组件拆分为多个文件时，拥有良好的文件夹结构非常重要。乍一看，应用程序的便捷文件夹结构是按类型保存文件。然后，您将拥有一个用于所有控制器的文件夹，一个用于指令，一个用于工厂或服务等。

按类型

app/ app.config.js app.module.js app.routes.js controllers/ attendees.js session-detail.js sessions.js shell.js speakers.js speaker-detail.js topnav.js directives/ calendar.directive.js calendar.directive.html services/ dataservice.js localstorage.js logger.js spinner.js views/ attendees.html session-detail.html sessions.html shell.html speakers.html speaker-detail.html topnav.html

请注意， directives/文件夹不仅包含指令的逻辑，还包含其关联的模板。但是，如果您的应用程序增长，并且您开始拥有大量控制器，视图，服务或指令，该怎么办？那么，按类型构造不会很好地扩展。因此，接下来是另一种结构，可以更好地扩展大型项这是一个功能结构。

按功能

app/ app.config.js app.module.js app.routes.js components/ calendar.directive.js calendar.directive.html user-profile.directive.js user-profile.directive.html layout/ shell.html shell.controller.js topnav.html topnav.controller.js people/ attendees.html attendees.controller.js people.routes.js speakers.html speakers.controller.js speaker-detail.html speaker-detail.controller.js services/ data.service.js localstorage.service.js logger.service.js spinner.service.js sessions/ sessions.html sessions.controller.js sessions.routes.js session-detail.html session-detail.controller.js

您还可以按功能分类文件，然后按类型分隔。

注意：这些示例文件名来自John Papa的AngularJS指南，我鼓励您阅读，因为它们包含旨在“通过良好实践提供一致性”的其他建议。

Putting them all into controllers.js seems ill-advised

Indeed, that would be a mess, assuming you are not writing a Hello World application.

Each controller feature should be in a dedicated file that is named after that controller. Each file of the application should be in charge of a single responsibility Then as @Manube said in his comment, at deployment time your application scripts should be minified and concatenated in a single file. Same goes for all the third-party libraries. Note also that writing minification-safe code such as :

['$scope', function($scope) { // ... }]

is not the responsibility of the developer. It should be handled by plugins like ng-annotate.

When you split your components into multiple files, it is important to have a good folder structure. At first glance, a convenient folder structure for your application is to keep your files by type. You would then have one folders for all your controllers, one for the directives, one for factories or services, etc. :

By type

Please note that the directives/ folder contains not only the directive's logic, but also their associated templates. However, what if your application grows, and you start to have a lot of controllers, views, services or directives. Well, a structuring by type would not scale very well. So here follows another structure that scales better with large projects. This is a structure by feature.

By feature

You could also separate your files by features, then by type.

Note: these sample file names come from AngularJS guidelines by John Papa which I encourage you to read as they contains other advices aimed "to provide consistency through good practices".

更多推荐