将 jquery 和下划线注入 Angular js 组件答案

【问题标题】：inject jquery and underscore to angular js component将 jquery 和下划线注入 Angular js 组件
【发布时间】：2013-07-01 16:09:33
【问题描述】：

我在我的新服务中使用了 angularjs、下划线和 jQuery：

myModule.factory('MyService', ['MyResource', function (MyResource) {
     ....
    // Here I make use of _ and $
}]);

如何将下划线或 jQuery 注入新服务，以便确定 _ 是下划线而 $ 是 jquery？

我正在寻找类似的东西：

myModule.factory('MyService', [ 'underscore', 'jquery','MyResource', function (_, $, MyResource) {
     ....
    // Here I want to use $ and _ and be SURE that _ is underscore and $ is jquery
}]);

【问题讨论】：

标签： javascript jquery angularjs underscore.js

【解决方案1】：

基于@moderndegree 的方法，我已经实现了以下代码，我不能说它是完美的，但这样测试人员会知道它是否具有 jQuery 依赖项，因为$window 是太通用的对象而无法注入。

'use strict';
(function () {
    var app= angular.module('app');
    //these are just references the instance of related lib so we can inject them to the controllers/services in an angular way.
    app.factory('jQuery', [
        '$window',
        function ($window) {
            return $window.jQuery;
        }
    ]);

    app.factory('Modernizr', [
        '$window',
        function ($window) {
            return $window.Modernizr;
        }
    ]);

    app.factory('Highcharts', [
    '$window',
    function ($window) {
        return $window.Highcharts;
    }
    ]);

})();

【讨论】：

【解决方案2】：

如果您在 HTML 中包含 jQuery 和 Underscore，它们将在全球范围内可用。没有必要“注入”它们。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//documentcloud.github.io/underscore/underscore-min.js"></script>

如果你想将它们包含在一个模块中，你可以这样做：

angular.module('myApp', []).
service('vendorService', ['$q', '$timeout', '$window', function($q, $timeout, $window){
    var deferred = $q.defer(), libs = {};
    $script([
        '//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js',
        '//documentcloud.github.io/underscore/underscore-min.js'
    ], 'vendorBundle');
    $script.ready('vendorBundle', function() {
        libs.$ = $window.jQuery.noConflict();
        libs._ = $window._.noConflict();
        $timeout(function(){
            deferred.resolve(libs);
        }, 0);
    });
    this.getLibs = function(){
        return deferred.promise;
    }
}]).
controller('myController', ['$scope', 'vendorService', function($scope, vendorService){
    vendorService.getLibs().then(function(libs){
        $scope.jQueryVersion = libs.$.fn.jquery;
        $scope._ = libs._;
    });
}]);

这样做可以让您异步加载库，同时防止它们与之前加载的版本发生冲突。可能有更好的方法来存储对已加载库的引用，但这应该可以正常工作。

此外，此示例依赖于第三方 laoder ($script.js)。

这是一个 jsFiddle (http://jsfiddle.net/moderndegree/bzXGx/);

【讨论】：

我不认为这回答了如何注入它们的问题。正如 OP 所说，人们可能仍然希望将它们注入到“确保”它们是该范围内的那些值。还可以通过注入其他东西在某个时间点将它们更改为其他东西。也让 JSHint/lint 停止抱怨你。
DerekR 正确理解了我。我有另一个使用 _ 或 $ 的库？我正在寻找一种注入 jquery 和下划线的方法。
希望我修改后的答案有所帮助。如果您需要我进行调整，请告诉我。