gpt4 book ai didi

javascript - 在 ngView 中加载 Angularjs Controller

转载 作者:行者123 更新时间:2023-12-03 08:33:03 25 4
gpt4 key购买 nike

我是 Angular 新手,刚刚开始构建一个测试项目来学习它,现在在加载 Controller 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 准确地配置我的模块 (MyApp),这取决于在 DoHeavyCalc() 上,现在不需要! (认为​​这个方法做了很大的计算,但它应该只在用户点击链接时运行,而不是在应用程序开始时运行)。

现在我想在 child.html 而不是我的 index.html 中加载并定义 Controller 。好的,所以我删除了上面代码中标记的部分,并尝试像这样编写 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` 不是一个函数。未定义。

我还尝试将 script 标签放在 child.html 中的 div 标签之前,但它没有影响任何内容。

现在我的问题是,如何定义和加载 Controller OnDemand,并在用户路由到某个位置而不是应用程序开头时完成繁重的工作?

最佳答案

您问的是延迟加载!默认情况下,Angular 不支持延迟加载,你能做什么?您可以使用任何第三方库,例如 requirejs 或其他库。

目前 angularjs 不会在 templateUrltemplate 内执行任何 javascript,more details

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

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

关于javascript - 在 ngView 中加载 Angularjs Controller ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33273969/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com