单页面应用程序 - 根据局部视图动态加载js文件

作者: 甲基蓝
发布时间: 2025-02-07 06:11:27 (27天前)
转自：

4 条回复

0#
回复此人
句号了 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我刚试过了 <a href="https://oclazyload.readme.io/" rel="noreferrer"> https://oclazyload.readme.io/ </A> 。它开箱即用。 </p> <pre> <code> bower install oclazyload --save </code> </pre> <P> 将其加载到模块中，并在控制器中注入所需的模块： </p> <pre> <code> var myModule = angular.module('myModule', ['oc.lazyLoad']) .controller('myController', ['$scope', '$ocLazyLoad', '$injector', function($scope, $ocLazyLoad, $injector) { $ocLazyLoad.load( ['myExtraModule.js', 'orAnyOtherBowerLibraryCopiedToPublicFolder.js' ]) .then(function() { // Inject the loaded module var myExraModule = $injector.get('myExtraModule'); }); } ]); </code> </pre> </DIV>

编辑
1#
回复此人
Mystery☀ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这对我有用。我想将其发布给寻求最轻量级解决方案的其他人。 </p> <P> 我在页面的html标签上有一个顶级控制器，每个局部视图都有一个辅助控制器。 </p> <P> 在顶级控制器中，我定义了以下功能 </p> <pre> <code> $scope.loadScript = function(url, type, charset) { if (type===undefined) type = 'text/javascript'; if (url) { var script = document.querySelector("script[src*='"+url+"']"); if (!script) { var heads = document.getElementsByTagName("head"); if (heads && heads.length) { var head = heads[0]; if (head) { script = document.createElement('script'); script.setAttribute('src', url); script.setAttribute('type', type); if (charset) script.setAttribute('charset', charset); head.appendChild(script); } } } return script; } }; </code> </pre> <P> 所以在辅助控制器中，我可以通过如下调用来加载所需的脚本 </p> <pre> <code> $scope.$parent.loadScript('lib/ace/ace.js', 'text/javascript', 'utf-8'); </code> </pre> <P> 在外部脚本中包含的对象可用之前会有一点延迟，因此在尝试使用它们之前，您需要验证它们的存在。 </p> <P> 希望能节省一些时间。 </p> </DIV>

编辑
2#
回复此人
誓言 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我真的打破了这个想法。在angularjs中默认不支持延迟加载，这是一种痛苦。无论如何这里有两个链接，帮助我解决它： </p> <P> <a href="http://ify.io/lazy-loading-in-angularjs/" rel="nofollow"> http://ify.io/lazy-loading-in-angularjs/ </A> </p> <P> <a href="http://www.bennadel.com/blog/2554-Loading-AngularJS-Components-With-RequireJS-After-Application-Bootstrap.htm" rel="nofollow"> http://www.bennadel.com/blog/2554-Loading-AngularJS-Components-With-RequireJS-After-Application-Bootstrap.htm </A> </p> </DIV>

编辑

登录后才能参与评论