在 AngularJS 中路由时包括控制器答案

【问题标题】：Including controller when routing in AngularJS在 AngularJS 中路由时包括控制器
【发布时间】：2015-06-17 09:13:28
【问题描述】：

我正在使用 AngularJS 构建一个相当大的单页 Web 应用程序，并且我正在尝试找到使其非常模块化的最佳方法。

我正在使用ngRoute 构建我的路线，我的app.js 包含：

...
app.config(function($routeProvider, $locationProvider) {
$routeProvider
    .when('/stats', {
        templateUrl : 'views/stats.html',
        controller  : 'StatController'
    })
    ...

为了使其正常工作，我需要在我的主要 index.html 文件中包含我的 StatController 以及包含 app.js。

<script src="/js/StatController.js"></script>

当我只包含 1 或 2 个控制器时似乎是合理的，但如果我有 30 个控制器呢？我是否仍然需要将它们全部包含在我的 index.html 页面中，或者 Angular 是否可以仅在需要时（即请求新控制器时）包含它

【问题讨论】：

我建议保留一个名为 controllers.js 的文件，而不是为每个控制器保留不同的文件。
我也在做这样的项目，但我已经把它分开了，用 grunt 来连接 JS 文件。现在，我的 index.html 只有 app.js（不包括库）。对于文件夹结构，我参考了scotch.io/tutorials/…
@iJade @VigneswaranMarimuthu 所以controllers.js 文件会变得非常大，有没有更好的方法来模块化它而不必连接文件？
这可能对link有帮助
@matt 当您开发时，它将位于单独的文件中。但是在测试时它将是巨大的。由于您不想在 HTML 中包含这些文件，因此您需要使用一些任务运行器（我使用 GRUNT）将所有 JS 文件连接到一个（称为app.js）。如果您可以在 HTML 中包含 JS 文件引用，那么您可以查看 grunt-usemin 以优化这些文件引用

标签： javascript angularjs url-routing

【解决方案1】：

如果您需要当前视图的一些逻辑，每个视图都附加了一个控制器。最佳做法是将应用程序的功能分离到小块路由文件中。例如，您必须创建一个帐户部分。您可以在您拥有模块的地方创建一个accountRoute.js，如下所示：

angular.module('myModule').config(function ($stateProvider){
.state('someName',{/*add controllers templates here*/})
})

也许还有其他州。如果您需要创建另一个未来，例如仪表板，您可以创建另一个路由文件dashboardRoute.js，在其中使用相同的角度模块。这是一个很好的做法，可以让您的代码更简洁。所以在dashboardRoute.js 你将拥有：

angular.module('myModule').config(function ($stateProvider){
    .state('anotherStateName',{/*add controllers templates here for dashboard feature*/})
    })

所有路由都将被注入到同一个模块中，因此您可以访问它们。最后但同样重要的是，您还应该有一个app.js 文件，您可以在其中注入所有需要的模块依赖项、登录路由等。在我看来，controllers.js 文件很难调试、维护和阅读。每个控制器应在不同的.js 文件中分开并添加到index.html。我希望它有所帮助。

【讨论】：