Angular JS——添加依赖于彼此的库

Angular JS - adding libraries depending on each other

本文关键字：依赖于 JS 添加 Angular      更新时间：2023-09-26

我发现这个线程如何在Angular中处理不同加载时间的多个JS库?我用它来添加d3.js到我的头。我现在必须添加d3.legend.js。我该如何以回调的方式完成这一点呢?

var d3js = angular.module('d3', []);
d3js.factory('d3Service', ['$document', '$q', '$rootScope', '$window',
    function($document, $q, $rootScope, $window) {
        var d = $q.defer();
        function onScriptLoad() {
            // Load client in the browser
            $rootScope.$apply(function() { d.resolve($window.d3); });
        }
        // Create a script tag with d3 as the source
        // and call our onScriptLoad callback when it
        // has been loaded
        var scriptTag = $document[0].createElement('script');
        scriptTag.type = 'text/javascript';
        scriptTag.async = true;
        scriptTag.src = 'lib/d3.v3.js';
        scriptTag.onreadystatechange = function () {
            if (this.readyState == 'complete') onScriptLoad();
        }
        scriptTag.onload = onScriptLoad;
        var s = $document[0].getElementsByTagName('body')[0];
        s.appendChild(scriptTag);
        //this is now where I have to add d3.legend.js which depends on the successful loading of d3.js.
        return {
            d3: function() { return d.promise; }
        };
    }]);

原想法的精简版:

var app = angular.module('SomeApp', []);
app.factory('LibraryFactory', function () {
    var factory = {};
    factory.getD3 = function(callback) {
        if(!window.d3) {
            var script = document.createElement("script");
            script.src = "https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.min.js";
            document.head.appendChild(script);
            script.onload = function() {
                callback(window.d3);
            };
        } else {
            callback(window.d3);
        }
    };
    factory.getD3Legend = function(callback) {
        if(!window.d3.legend) {
            //...ditto
        }
    };
    return factory;
});

并且使用工厂(例如，在控制器中)，您可以链接调用:

app.controller('SomeTrialCtrl', function ($scope, LibraryFactory) {
    LibraryFactory.getD3(function (d3) {
        LibraryFactory.getD3Legend(function (d3WithLegend) {
            // place code using the libraries here
        });
    });
});

在d3的情况下。传说，工厂。getD3函数可以在内部调用getD3函数以使事情更简单。如:

factory.getD3Legend = function(callback) {
    factory.getD3(function(d3) {
        if(!d3.legend) {
            //...ditto
        }
        callback(d3);
    }
};

无论如何这是基本的想法。@aarosil在原始帖子中的回答可能更符合angular。

我只是循环遍历我需要添加的库数组，并逐个添加它们，参见下面的代码:

 var _libraries: [
     'scripts/d3.min.js',
     'scripts/moment.min.js'
 ]
 for (var i = 0, len = _libraries.length; i < len; i++) {
     var s = document.createElement('script');
     s.type = 'text/javascript';
     s.src = _libraries[i];
     document.body.appendChild(s);
 }

希望这对你有帮助。

相关文章：