javascript - 在 AngularJS 中路由时包含 Controller

Question

我正在使用 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 个 Controller 时似乎很合理，但如果我有 30 个 Controller 怎么办？我是否仍然需要将它们全部包含在我的 index.html 页面中，或者 Angular 有没有办法仅在需要时(即请求新 Controller 时)包含它

Answer 1

如果您需要当前 View 上的一些逻辑，每个 View 都附加了一个 Controller 。最佳实践是将应用程序的功能分成小块路由文件。例如，您必须创建一个帐户部分。您可以在其中创建一个 accountRoute.js 模块，例如所以:

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

也许还有其他州。 如果您需要创建另一个 future，例如仪表板，您可以创建另一个路由文件 dashboardRoute.js，在其中使用相同的 Angular 模块。这是构建代码的好习惯更干净。 因此，在 dashboardRoute.js 中，您将拥有:

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

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