javascript関数からのjavascriptリソースの注入

Question

私の角型アプリケーションにjavascriptリソースを注入しようとしています。特に、私のアプリケーションが依存しているすべてのライブラリを含むvendors.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); 
    } 

私のvendors.min.jsでは、javascriptのlibs（angeljs）が崩壊しました。このエラーが発生する第二の方法ででスクリプトを注入：

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

このプロジェクトを見ると、RequireJSでAngularJSを使用して必要なjsファイルをオンデマンドでロードするための基本プロジェクトを提供することができます。 https://github.com/tnajdek/angular-requirejs-seed

アプリケーションが巨大であれば、それは有用かもしれません。そうでなければ、AngularJSを使用するという事実が、書き込まれるコードの量を減らすため、余計になる可能性があります。個人的には、最初に必要なスクリプトをすべて読み込みます。

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

：

はまた、巨大なアプリの作成について（グーグルでAngularJSに取り組んでいます）ブリアンフォードからこの記事を見ています