异步加载AngularJS应用程序

Load AngularJS app async

本文关键字:应用程序 AngularJS 加载 异步      更新时间:2023-11-17

我正在尝试异步加载AngularJS应用程序,但我担心这可能是不可能的。

我主要是通过CSS技巧来学习本指南的示例,但遗憾的是没有取得任何成功。

关闭的尝试是首先只加载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>

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

我还尝试手动注入链接(没有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);
    }
})();

但仍然没有成功,因为它们仍然以不可预测的顺序装载。

如果如您所说,您使用的是ng-app指令,当angular解析DOM以找到ngApp指令时,它会尝试自动引导应用程序,并且由于app.js尚未加载,因此angular会抛出。

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

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