注入jQuery和下劃線到角JS組件

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是太通用的對象注入。

'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

如果包括jQuery和強調了你的HTML，他們將在全球範圍內提供。沒有必要「注入」它們。

<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/）;