在ngView中加载Angularjs控制器

Question

I'm new to Angular and just started to build a test project to learn it, now have a problem with loading controllers OnDemand . 我是Angular的新手，刚开始构建一个测试项目来学习它，现在在加载控制器OnDemand时遇到了问题。 let's code a bit, I have the following HTML: 让我们编写一些代码，我有以下HTML：

index.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>

what is obvious to me is that I should define my controller exactly where I config my module (MyApp) , which doing this depends on DoHeavyCalc() which is not needed right now! 对我来说显而易见的是，我应该在配置module （MyApp）的确切位置定义controller ，这取决于DoHeavyCalc() ，该功能现在不需要！ (think this method does a big calculation, but it should be run only when the user clicks on the link, not at the beginning of the app). （认为此方法需要进行大量计算，但是仅当用户单击链接时才应运行，而不是在应用程序的开头）。

Now I want to load the and define the controller inside child.html instead of my index.html . 现在，我要加载并在child.html而不是index.html定义控制器。 OK, so I removed the sections marked in above code and tried to write the child.html like this: 好的，因此我删除了上面代码中标记的部分，并尝试这样编写child.html ：

child.html child.html

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

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

also i tried to put script tag in child.html before the div tag, but it didn't affect anything. 我也尝试将script标签放在div标签之前的child.html ，但没有任何影响。

Now my question is, how can i define and load the controller OnDemand and do my heavy work just when the user routes to a certain location not at the beginning of app? 现在我的问题是，当用户路由到某个位置而不是在应用程序的开头时，如何定义和加载OnDemand controller并完成繁重的工作？

Answer 1

You are asking about lazy loading ! 您正在询问延迟加载！ By default angular doesn't support lazy loading, what you can do ? 默认情况下，angular不支持延迟加载，该怎么办？ you can use any third party library like requirejs or others. 您可以使用任何第三方库，例如requirejs或其他。

Currently angularjs doesn't execute any javascript inside templateUrl or template , more details 目前angularjs不会在templateUrl或template内部执行任何JavaScript，更多详细信息

Here is a working example of lazy loading using requirejs. 这是一个使用requirejs进行延迟加载的工作示例。

Also there is some discussion regarding onDemand script loading Lazy loading angularjs 也有一些关于onDemand脚本加载延迟加载angularjs的讨论

Answer 2

In the child.html page do not include ng-controller attribute. 在child.html页面中，请勿包含ng-controller属性。 Already child.html is associated with the childCtrl controller. child.html已经与childCtrl控制器关联。 Just remove the attribute ng-controller from the child.html page 只需从child.html页面中删除ng-controller属性

在ngView中加载Angularjs控制器

问题描述

index.html index.html

child.html child.html

2 个解决方案

解决方案1
1 已采纳 2015-10-22 06:46:56

解决方案2
0 2015-10-22 06:36:29

在ngView中加载Angularjs控制器

问题描述

index.html index.html

child.html child.html

2 个解决方案

解决方案1 1 已采纳 2015-10-22 06:46:56

解决方案2 0 2015-10-22 06:36:29

解决方案1
1 已采纳 2015-10-22 06:46:56

解决方案2
0 2015-10-22 06:36:29