加載AngularJS應用異步

Question

我想加載一個AngularJS應用異步，但我擔心這可能是不可能的。

我主要關注this guide by CSS tricks的例子，遺憾的是沒有任何成功。

的關閉嘗試是第一隻加載了jQuery，然後用它來與一個AJAX調用加載其他腳本：

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script> 
<script> 
     jQuery.cachedScript = function(url, options) { 
      options = $.extend(options || {}, { 
       dataType: "script", 
       cache: true, 
       url: url 
      }); 

      return jQuery.ajax(options); 
     }; 
     $.cachedScript("https://code.angularjs.org/1.5.3/angular.min.js") 
     .done(function() { 
      return $.cachedScript("scripts/vendor.js") 
     }) 
     .done(function() { 
      $.cachedScript("scripts/app.js", { cache : false }); 
     }); 
</script> 

這樣所有的腳本都正確。不過，我得到這個錯誤：

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.3/$injector/modulerr?p0=app&p1=Error%3A%20%…0c%20(https%3A%2F%2Fcode.angularjs.org%2F1.5.3%2Fangular.min.js%3A20%3A463) 

然後我試過這樣：

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script> 
<script src="https://code.angularjs.org/1.5.3/angular.min.js"></script> 
<script src="scripts/vendor.js"></script> 
<script> 
     jQuery.cachedScript = function(url, options) { 
      options = $.extend(options || {}, { 
       dataType: "script", 
       cache: true, 
       url: url 
      }); 

      return jQuery.ajax(options); 
     }; 
     $.cachedScript("scripts/app.js", { cache : false }); 

</script> 

但同樣的錯誤被拋出。

看來，問題是由於angularjs在app.js文件之前加載的事實造成的，但這似乎很奇怪。

因此，問題是不是可以加載angularjs文件異步？

PS 我也嘗試了其他方法，但它們不能像文件必須加載的順序是強制性的（depencencies ...）一樣工作。

例如，我也嘗試了HTML async屬性：

<script async src="https://code.jquery.com/jquery-2.2.2.min.js"></script> 
<script async src="https://code.angularjs.org/1.5.3/angular.min.js"></script> 
<script async src="scripts/vendor.js"></script> 
<script async src="scripts/app.js"></script> 

但還是失敗，這樣的腳本是不可預知的順序加載。

我也嘗試手動注入的鏈接（不同步屬性）

(function() { 
    var urls = [ 
     "scripts/app.js", 
     "scripts/vendor.js", 
     "https://code.angularjs.org/1.5.3/angular.min.js", 
     "https://code.jquery.com/jquery-2.2.2.min.js", 
    ]; 
    for (var i = 0; i < urls.length; i++) { 
     var po = document.createElement('script'); po.type = 'text/javascript'; po.async = false; 
     po.src = urls[i]; 
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); 
    } 
})(); 

但仍然沒有成功，因爲它們是不可預知的順序仍然加載。

Answer 1

如果像你說的，你使用的ng-app指令，角時分析，以找到ngApp指令則會自動引導應用和DOM，因爲app.js還沒有加載，角投。

所以，你需要刪除的屬性，並在你的app.js加上下面幾行：

angular.bootstrap(document.getElementById('ngAppContainer'), ['app']);