[英]Load Angularjs controllers in ngView
我是Angular的新手,刚开始构建一个测试项目来学习它,现在在加载控制器OnDemand时遇到了问题。 让我们编写一些代码,我有以下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>
对我来说显而易见的是,我应该在配置module
(MyApp)的确切位置定义controller
,这取决于DoHeavyCalc()
,该功能现在不需要! (认为此方法需要进行大量计算,但是仅当用户单击链接时才应运行,而不是在应用程序的开头)。
现在,我要加载并在child.html
而不是index.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.
[ng:areg] `childCtrl` is not a function. got undefined.
我也尝试将script
标签放在div
标签之前的child.html
,但没有任何影响。
现在我的问题是,当用户路由到某个位置而不是在应用程序的开头时,如何定义和加载OnDemand controller
并完成繁重的工作?
您正在询问延迟加载! 默认情况下,angular不支持延迟加载,该怎么办? 您可以使用任何第三方库,例如requirejs
或其他。
目前angularjs不会在templateUrl
或template
内部执行任何JavaScript, 更多详细信息
这是一个使用requirejs进行延迟加载的工作示例。
也有一些关于onDemand脚本加载延迟加载angularjs的讨论
在child.html页面中,请勿包含ng-controller属性。 child.html已经与childCtrl控制器关联。 只需从child.html页面中删除ng-controller属性
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.