इंजेक्षन jQuery और कोणीय जे एस घटक

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

@ मॉडरेंडग्री के दृष्टिकोण के आधार पर मैंने निम्नलिखित कोड लागू किया है, मैं यह नहीं कह सकता कि यह सही है लेकिन इस तरह परीक्षक को पता होगा कि इसमें 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

तो आप अपने HTML में jQuery और अंडरस्कोर शामिल हैं, वे विश्व स्तर पर उपलब्ध हो जाएगा। उन्हें "इंजेक्ट" करने की कोई आवश्यकता नहीं है।

<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) पर निर्भर करता है।

और यहां एक जेएसफ़िल्ड (http://jsfiddle.net/moderndegree/bzXGx/) है;