异步加载 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 我也尝试了其他方法，但它们不会起作用，因为必须加载文件的顺序是强制性的（依赖关系......）。

比如我也试过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>

但这会失败，因为脚本以不可预知的顺序加载。

我也尝试过手动注入链接（没有 async 属性）

(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 指令，当 Angular 解析 DOM 以找到 ngApp 指令时，它会尝试自动引导应用程序，并且因为 app.js 不是尚未加载，角度抛出。

因此，您需要删除该属性，并在您的 app.js 中添加以下行：

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