在AngularJS中管理控制器的最佳方法

Question

有一个包含许多控制器的项目。将它们全部放入controllers.js似乎是不明智的。 AngularJS中有没有办法做类似的事情：

controllers.js

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

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

感谢您提供任何帮助或指示。

Answer 1

  

将它们全部放入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

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

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

Answer 2

希望这可以帮助您查看这个... Best Practice Recommendations for Angular App Structure