40

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

我从 GitHub 下载了种子示例，效果很好。不过我有一个问题——如果局部视图需要引用外部 js 文件，是否需要在开始时将其添加到 index.html 文件中？我希望应用程序尽可能精简，并且只想包含当前视图所需的 js 引用。是否可以基于视图动态加载 js 文件？

4

2 回答 2

41

这对我有用。想我会把它发布给其他寻求最轻量级解决方案的人。

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

在顶层控制器中，我定义了以下函数……</p> 

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

因此，在辅助控制器中，我可以通过如下调用加载所需的脚本……</p> 

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

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

希望能节省一些时间。

于 2014-03-21T19:15:40.410 回答
17

我刚刚尝试了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');
               });
       }
   ]);
于 2015-06-11T02:57:00.123 回答