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

Question

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

我从GitHub下载了种子示例,效果很好.我有一个问题 - 如果部分视图需要引用外部js文件,是否需要在开头添加到index.html文件？我希望应用程序尽可能精简,只希望包含当前视图所需的js引用.是否可以根据视图动态加载js文件？

Answer 1

这对我有用.我想将其发布给寻求最轻量级解决方案的其他人.

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

在顶级控制器中我定义了以下功能......

$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');

在外部脚本中包含的对象可用之前会有一点延迟,因此在尝试使用它们之前,您需要验证它们的存在.

希望能节省一些时间.

Answer 2

我认为AngularJS没有内置此功能.

但是,您可以查看此项目,该项目提供了一个基础项目,用于使用带有RequireJS的AngularJS来按需加载所需的js文件.

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

如果您的应用程序非常庞大,那么它可能会很有用,否则它可能会过度,因为使用AngularJS这一事实会减少要编写的代码量.在个人情况下,我在开始时加载所有必需的脚本.

另外看看Briant Ford(谁正在Google的AngularJS上工作)关于制作大型应用程序的这篇文章:

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

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