为了账号安全,请及时绑定邮箱和手机立即绑定

单页应用程序-基于局部视图动态加载js文件

/ 猿问

单页应用程序-基于局部视图动态加载js文件

哔哔one 2019-11-13 15:47:54

我刚刚开始学习Angular,并在此遵循了该教程-http: //docs.angularjs.org/tutorial/step_00


我从GitHub下载了种子示例,它运行良好。但是我有一个问题-如果局部视图需要引用外部js文件,是否需要在开始时将其添加到index.html文件中?我希望该应用程序尽可能地精简,只希望包含当前视图所需的js引用。是否可以基于视图动态加载js文件?


查看完整描述

3 回答

?
哈士奇WWW

我认为该功能不是AngularJS内置的。


但是,您可以看一下这个项目,该项目提供了一个基础项目,用于将AngularJS与RequireJS一起使用,以按需加载所需的js文件。


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


如果您的应用程序很大,那么它可能会很有用,否则可能会过大,因为仅使用AngularJS的事实就减少了要编写的代码量。就个人而言,我在一开始就加载了所有必要的脚本。


也可以看一下Briant Ford(他在Google从事AngularJS的工作)上的这篇有关制作大型应用程序的文章:


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


查看完整回答
反对 回复 2019-11-13
?
MMMHUHU

这只是为我工作。想通了,我会将它发布给其他寻求最轻量级解决方案的人。


我在页面的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');

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


希望可以节省一些时间。


查看完整回答
反对 回复 2019-11-13
?
慕的地10843

我刚刚尝试了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');

               });

       }

   ]);


查看完整回答
反对 回复 2019-11-13

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信