如何按顺序在 AngularJS 中异步加载多个 javascript 库？

Question

在angular中，如何在加载"asyncurl"中的url之后加载存储在变量"async2Url"脚本中的url？请注意，async2Url 在指令可以使用它之前取决于 asyncurl 的响应内容。

我目前正在使用以下代码来加载单个脚本 "asyncUrl"，如何使 "asyncUrl" 和 "async2url" 同时加载（一个接一个）在返回承诺之前？:

// Google async initializer needs global function, so we use $window
angular.module('GoogleMapsInitializer')
    .factory('Initializer', function($window, $q){

        // maps loader deferred object
        var mapsDefer = $q.defer();

        // Google's url for async maps initialization accepting callback function
        var asyncUrl = 'https://maps.googleapis.com/maps/api/js?callback=';
        var async2Url = 'https://urltoseconscript/script2.js';

        // async loader
        var asyncLoad = function(asyncUrl, callbackName) {
          var script = document.createElement('script');
          //script.type = 'text/javascript';
          script.src = asyncUrl + callbackName;
          document.body.appendChild(script);
        };

        // callback function - resolving promise after maps successfully loaded
        $window.googleMapsInitialized = function () {
            mapsDefer.resolve();
        };

        // loading google maps
        asyncLoad(asyncUrl, 'googleMapsInitialized');

        return {

            // usage: Initializer.mapsInitialized.then(callback)
            mapsInitialized : mapsDefer.promise
        };
    })

在指令中，我包括：

Initializer.mapsInitialized.
    .then(function(){
        map = new google.maps.Map(element, options);
    });

如果我能保持指令中的内容不变，只更改 "GoogleMapsInitializer" 模块的内容，那将是最好的。如果它可以轻松支持依赖于第一个（或第二个）脚本的第三个脚本，那就更好了。如果不更改我当前在指令代码中的内容就无法保留，那么最好的方法是什么？

Answer 1

这个版本怎么样

angular.module('GoogleMapsInitializer').factory('Initializer', function($window, $q) {

    // Google's url for async maps initialization accepting callback function
    var asyncUrl = 'https://maps.googleapis.com/maps/api/js?callback=';
    var async2Url = 'https://urltoseconscript/script2.js';

    // async loader
    var asyncLoad = function(asyncUrl, callbackName) {

        var deferred = $q.defer();

        var script = document.createElement('script');
        if (callbackName) {
            $window[callbackName] = deferred.resolve;
            asyncUrl += callbackName;
        }
        else {
            script.onload = deferred.resolve;
        }
        script.src = asyncUrl;
        document.body.appendChild(script);

        return deferred.promise;
    };


    // loading google maps
    var mapsPromise = asyncLoad(asyncUrl, 'googleMapsInitialized').then(function() {
        return asyncLoad(async2Url);
    });

    return {
        // usage: Initializer.mapsInitialized.then(callback)
        mapsInitialized: mapsPromise
    };
});

查看我为测试加载器设置的小演示。

如何按顺序在 AngularJS 中异步加载多个 javascript 库？

How to load more than one javascript library async in AngularJS sequentially?

angularjs

演示：http://plnkr.co/edit/WYp2kjXWwrAE8xinph15?p=preview