使用 ng-view 并按需加载控制器

Question

我正在使用 ng-view 来尝试重新使用常见的页面元素。可能是我理解有误，不适合放在这里

基本上，我的 html 页面如下所示：

<html>
    <head>
        <!-- css and js here including index.js -->
    </head>
    <body ng-app="app" ng-controller="ctrl">
        <navigation-bar/>
        <div ng-view />
    </body>
</html>

这是我的 index.js 的样子

(function () {
    angular.module('app', ['ngRoute', 'ngSanitize'], function ($routeProvider) {});
    angular.module('app').controller("ctrl", function ($scope, $log, $q, $timeout) {});
    angular.module('app').config(["$routeProvider", function ($routeProvider) {
                $routeProvider.when("/management", {
                    templateUrl : "/experiment/management.html",
                    // Is there a way to load /experiment/managementController.js here?
                }
                })
            ]);
    })();

我的management.html

<div ng-controller="managementController">
<!-- A bunch of code -->
</div>

和managementController.js（我只想在加载路由时运行）

(function () {
    angular.module('app').controller("managementController", [
            "$scope", "$sce", "$log", function ($scope, $sce, $log) {
                // controller specific code
            }
        ]);
})();

我为什么要这样做？因为我有很多很多潜在的观点和很多潜在的控制者。（大约 50 个）

这是不可能的还是不是 ng-view 的意图？

如果这不是 ng-view 的意图，在这种情况下有什么可以帮助我的吗？

Answer 1

Take a look at the first example 在文档中。查看 script.js 选项卡。

$routeProvider.when("/management", {
                    templateUrl : "/experiment/management.html",
                    controller: 'managementController',

                }

如果您的意思是要加载实际文件，take a look at this post

Answer 2

您可以在 angular Js 中使用 resolve 属性，它可以处理动态加载包含目标控制器的脚本，并在加载完成后解析承诺。

例如：

$routeProvider
    .when('/management',
        {
            templateUrl: '/experiment/management.html',
            resolve: resolveController('/app/controllers/managementController.js')
        });

使用 ng-view 并按需加载控制器

Using ng-view and loading the controller on demand

javascript

angularjs

ng-view