如何处理与角不同的加载时间多JS库？ [英] How to handle multiple JS libraries with different loading times in Angular?

问题描述

我刚学角度和我有一个关于我的应用程序的体系结构的一些问题。

I am just learning Angular and I have some questions regarding the architecture of my app.

该项目，我将致力于将使用外部库的配发：jQuery的，jQuery.ui，jsPlumb等，是不同的加载时间

The project I will be working on will be using allot of external libraries: jQuery, jQuery.ui, jsPlumb and so on, with different loading times.

我知道有关这些库每个code将有内部指令进行处理。

我与使用有效的要求JS骨干的工作 - 在每个视图，我可以设置哪些库，我需要和视图将尽快那些库可装

I worked with Backbone which uses Require JS effectively - on each view, I could set what libraries I need and the view would be loaded as soon as those libraries are available.

现在，对角端 - 这将是处理这个问题的正确方法

Now, on angular side - what would be the correct way of handling this issue?

从我的头顶，我想到的是：

From the top of my head, I am thinking of:

1. 在路由器内​​部进行检查 - 如果某条路线所需要的库被加载检查

1. Place checks inside the router - checking if the desired libraries for a certain route are loaded.

每个指令内部进行检查 - 例如，如果一个指令使用jsPlumb，里面放置一个检查，返回时库加载指令内容 - 我相信这可能产生的问题与其他指令进行交互时同样的看法，这需要用不同的加载时间，多库。

Place checks inside each directive - for example if one directive uses jsPlumb, place a check inside and return the directives content when that library is loaded - I believe this could generate problems when interacting with other directives on the same view, which require multiple libraries with different loading times.

加载所有其他库加载后才角 - 这将导致长期载入时间

Load angular only after every other library is loaded - that would lead to long loading times.

什么是处理所有这些问题的最佳方式？

What's the best way to handle all those issues?

推荐答案

您可以创建一个工厂加载你需要的外部库。返回延期对象库的脚本，它加载后。这里有一个我用D3库：

You can create a factory to load the external library you need. Return a deferred object for the library's script after it loads. Here is one I used for d3 library:

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

        return {
            d3: function() { return d.promise; }
        };

    }]);

然后在您的指令，使用然后递延的作用要等到它准备好

then in your directive, use then function of the deferred to wait until it's ready

d3Service.d3().then(function(d3) {
    // place code using d3 library here
}

如果您的指令需要访问多个库，你可以链deferreds。

If your directive is needing access to multiple libraries, you can chain the deferreds.

d3Service.d3().then(function(d3) {
    someOtherLibSvc.getLib().then(function(lib){
        // place code using d3 library and someOtherLibrary here
    }
}

要避免此链接查看蓝鸟并使用Promise.join，角自动自带$ Q，所以我只是用在这里。

To avoid this chaining check out bluebird and use Promise.join, Angular comes with $q automatically so I just used that here.

请注意：如果你只是前角加载了jQuery，然后 angular.element 已经将引用JQuery的。所以，你不需要jQuery的做到这一点，只是它加载到你的主HTML页面前角

Note: if you just load JQuery before angular, then angular.element will already reference JQuery. So you don't need to do this for JQuery, just load it in your main html page before Angular

这篇关于如何处理与角不同的加载时间多JS库？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！