angularjs - 单页应用程序-基于部分 View 动态加载js文件

Question

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

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

Answer 1

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

我在页面的 html 标记上有一个顶级 Controller ，并为每个部分 View 有一个辅助 Controller 。

在顶级 Controller 中我定义了以下函数......

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

因此，在辅助 Controller 中，我可以通过如下调用加载所需的脚本......

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

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

希望这可以节省一些人的时间。