Question

我在新服务中使用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
}]);

Answer 1

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

'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;
    }
    ]);

})();

Answer 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._;
    });
}]);

执行此操作将允许您异步加载库，同时防止它们与先前加载的版本冲突。可能有更好的方法来存储对已加载库的引用，但这应该可以正常工作。

此外，此示例依赖于第三方选区（$script.js）。

这是一个jsFiddle（http://jsfiddle.net/moderndegree/bzXGx/）;

将jquery和下划线注入角度js组件

2 个答案: