Question

我是Angular的新手，刚开始构建一个测试项目来学习它，现在加载控制器 OnDemand 时出现问题。让我们编写一下代码，我有以下HTML：

的index.html

<body>
    <div ng-app="MyApp">
        <a href="/child"> CLICK ME </a>
        <div ng-view></div>
    </div>
    <script>
        angular.module("MyApp",['ngRoute'])
            .config(function($routeProvider) {
                $routeProvider.when('/child', {
                    templateUrl: 'somwhere/child.html',
                    controller: 'childCtrl' <!-- will remove -->
                });
            }) <!-- will remove contoller defination below -->
            .controller('childCtrl', function($scope) {
                $scope.data = DoHeavyCalc();
            });
    </script>
</body>

对我来说显而易见的是，我应该将controller 定义为我module（MyApp）的确切位置，这取决于DoHeavyCalc()现在不需要！（想想这个方法做了很大的计算，但只有当用户点击链接时才应该运行，而不是在应用程序的开头处运行。）

现在我想加载并在child.html内定义控制器而不是我的index.html。好的，所以我删除了上面代码中标记的部分，并试图像这样编写child.html：

child.html

<div ng-controller="childCtrl">
    {{data}}
</div>
<script>
    angular.module("MyApp")
        .controller('childCtrl', function($scope) {
            $scope.data = DoHeavyCalc();
        });
</script>

但是会导致错误： [ng:areg] `childCtrl` is not a function. got undefined.

我还尝试在script标记之前child.html添加div标记，但它并没有影响任何内容。

现在我的问题是，我如何定义和加载controller OnDemand并在用户路由到某个位置而不是应用开头的时候做我的繁重工作？

Answer 1

你在问懒惰加载！默认情况下，angular不支持延迟加载，你可以做什么？您可以使用requirejs或其他任何第三方库。

目前，angularjs不会在templateUrl或template，more details

中执行任何javascript

以下是lazy loading使用requirejs的工作示例。

还有一些关于onDemand脚本加载的讨论 Lazy loading angularjs

Answer 2

在child.html页面中不包含ng-controller属性。已经将child.html与childCtrl控制器相关联。只需从child.html页面中删除属性ng-controller

即可

在ngView中加载Angularjs控制器

的index.html

child.html

2 个答案: