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>

但是抛出了同样的错误。

似乎这个问题是由于app.js文件之前加载了angularjs这一事实造成的，但这似乎很奇怪。

因此，问题是，是否可以加载angularjs文件async？

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']);

加载AngularJS应用程序异步

1 个答案: