javascript - 异步加载 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 文件吗？

附言我也尝试过其他方法，但它们不会起作用，因为必须加载文件的顺序是强制性的(依赖关系...)。

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

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

我也试过手动注入(inject)链接(没有异步属性)

(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 尚未加载， Angular 抛出。

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

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