d3之前的d3依赖项加载

Question

I am using a d3 word cloud service that requires d3 to be loaded before it in order to load properly. Thus, in my services.js page, I load d3 before the word cloud service.

This works most of the time. However, occasionally, the word cloud won't load properly and I'll get the error:

Uncaught ReferenceError: d3 is not defined (localhost:8080/lib/d3-word-cloud.js:400)

Is this because the services aren't loading in the proper order? What can I do to correct this?

EDIT: Code below:

myApp.factory('d3Service', ['$document', '$window', '$q', '$rootScope',
  function ($document, $window, $q, $rootScope) {
    var d = $q.defer(),
    d3service = {
      d3: function() { return d.promise; }
    };
    function onScriptLoad() {
        // Load client in the browser
        $rootScope.$apply(function() { d.resolve($window.d3); });
    }
    var scriptTag = $document[0].createElement('script');
    scriptTag.type = 'text/javascript'; 
    scriptTag.async = true;
    scriptTag.src = 'http://d3js.org/d3.v3.min.js';
    scriptTag.onreadystatechange = function () {
        if (this.readyState == 'complete') onScriptLoad();
    }
    scriptTag.onload = onScriptLoad;

    var s = $document[0].getElementsByTagName('body')[0];
    s.appendChild(scriptTag);

    return d3service;
}]);

myApp.factory('d3Cloud', ['$document', '$window', '$q', '$rootScope',
  function ($document, $window, $q, $rootScope) {
    var d = $q.defer(),
    d3cloud = {
      cloud: function() { return d.promise; }
    };
    function onScriptLoad() {
        // Load client in the browser
        $rootScope.$apply(function() { d.resolve($window.d3); });
    }
    var scriptTag = $document[0].createElement('script');
    scriptTag.type = 'text/javascript'; 
    scriptTag.async = true;
    scriptTag.src = '../lib/d3-word-cloud.js';
    scriptTag.onreadystatechange = function () {
        if (this.readyState == 'complete') onScriptLoad();
    }
    scriptTag.onload = onScriptLoad;

    var s = $document[0].getElementsByTagName('body')[0];
    s.appendChild(scriptTag);

    return d3cloud;
}]);

Answer 1

Not sure why it can be, but a workaround could be to check typeof d3 before using it (and wait or reload it if not).

if is a web page why not load d3 on <script> and use a ready/onload method instead of doing it dynamically ?

Answer 2

So I guess you want to do the following at app startup:

 angular.module('d3CloudApp', []) .run(['d3Service', 'd3Cloud', function(d3Service, d3Cloud){ d3Service.d3() .then(function(d3){ d3Cloud.cloud(); }) })] 

Should work :-) Having said that your second resolve inside d3Cloud is probably wrong:

 d.resolve($window.d3); 

Should be something like:

 d.resolve($window.d3Word);