javascript - 从javascript函数注入(inject)javascript资源

Question

我正在尝试将javascript资源注入我的角度应用程序。特别是，我试图注入我的vendor.js文件，其中包含我的应用程序依赖的所有库。

如果我以这种方式注入文件，则一切正常：

// create version param
    var currVersion = '?v=' + new Date().getTime();

    // get head elemtn
    var head = document.getElementsByTagName("head")[0];

    /**
     * inject script into page
     */
    function appendScript(url) {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = url;
        script.async = false;
        head.appendChild(script);
    }

    // css
    head.insertAdjacentHTML('beforeend', '<link rel="stylesheet" type="text/css" href="vendors.min.css' + currVersion + '">');

    // javascript
    appendScript('vendors.min.js' + currVersion);

现在，我尝试使用服务接收到的版本值来注入资源，因此我正在尝试执行以下操作：

// get head element
    var head = document.getElementsByTagName("head")[0];

    // request for version
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            importRes(JSON.parse(this.responseText).VersionNumber);
        }
    };
    xhttp.open("GET", "https://example.com/getVersion", true);
    xhttp.send();

    /**
     * inject script into page
     */
    function appendScript(url) {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = url;
        script.async = false; 
        head.appendChild(script);
    }

    /**
     * import resources with version param
     */
    function importRes(version) {

        // create param string
        var currVersion = '?v=' + version;

        // css
        head.insertAdjacentHTML('beforeend', '<link rel="stylesheet" type="text/css" href="vendors.min.css' + currVersion + '">');

        // javascript
        appendScript('vendors.min.js' + currVersion);
    }

在我的vendor.min.js中，我已经折叠了一些javascript库（在angularjs中）。使用第二种方式注入脚本会产生此错误：

vendors.min.js?v=6:16 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=app&p1=ReferenceErr…vendors.min.js%3Fv%3D6%3A30%3A69)

我怀疑问题是由于某种原因脚本是异步导入的，但我不明白为什么。

有人知道吗

Answer 1

您可以看一下这个项目，该项目提供了一个基础项目，用于将AngularJS与RequireJS一起使用，以按需加载所需的js文件。
https://github.com/tnajdek/angular-requirejs-seed

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

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

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