单页面应用程序 – 基于局部视图dynamic加载js文件

我刚刚开始学习Angular，并按照这里的教程 – http://docs.angularjs.org/tutorial/step_00

我从GitHub下载了种子示例，效果很好。 我有一个问题，但如果一个局部视图需要一个外部js文件被引用，它是否需要被添加到index.html文件的开始？ 我希望应用程序尽可能精简，只想包含当前视图所需的js引用。 是否有可能基于视图dynamic加载js文件？

Answer 1

我认为这个function不是内置在AngularJS中的。

不过你可以看看这个项目，它提供了一个基于AngularJS和RequireJS的基础项目，可以根据需要加载所需的js文件。

https://github.com/tnajdek/angular-requirejs-seed

如果你的应用程序是巨大的，它可能是有用的，否则它可能是矫枉过正，因为只是使用AngularJS的事实减less了代码量被写入。 个人而言，我在开始时加载所有必要的脚本。

还可以看看来自Briant Ford（他在Google上从事AngularJS工作）关于制作大型应用程序的这篇文章：

http://briantford.com/blog/huuuuuge-angular-apps.html

Answer 2

这只是为我工作。 想想我会张贴给其他人寻求最轻的解决scheme。

我在页面的html标签上有一个顶级控制器，每个局部视图都有一个辅助控制器。

在顶层控制器中，我定义了以下function…

$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; } }; 

所以在辅助控制器中，我可以像下面这样调用所需的脚本。

 $scope.$parent.loadScript('lib/ace/ace.js', 'text/javascript', 'utf-8'); 

在外部脚本中包含的对象可用之前有一点点延迟，所以在尝试使用它们之前，您需要validation它们的存在。

希望节省一些时间。

Answer 3

我刚刚尝试了https://oclazyload.readme.io/ 。 它开箱即用。

 bower install oclazyload --save 

将其加载到模块中，然后在控制器中注入所需的模块：

 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'); }); } ]); 

Answer 4

我真的打破了这一个。 在angularjs中，默认情况下不支持延迟加载是一件非常痛苦的事情。 无论如何，这里有两个链接，帮助我解决它：

http://ify.io/lazy-loading-in-angularjs/

http://www.bennadel.com/blog/2554-Loading-AngularJS-Components-With-RequireJS-After-Application-Bootstrap.htm