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

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

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

4 个答案: