inject jquery und unterstreichen auf Winkel js Komponente

Question

I AngularJS verwende, unterstreichen und jQuery in meinem neuen Service:

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

Wie kann ich spritzen unterstreichen oder jQuery auf den neuen Dienst, so kann ich sicher sein, dass _ ist Unterstrich und $ ist jquery?

Ich suche so etwas wie:

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

basierend auf @ moderndegree Ansatz habe ich den folgenden Code implementiert, kann ich nicht sagen, es ist perfekt, aber dieser Weg Tester würde wissen, ob es jQuery Abhängigkeit als ist zu generische Objekt zu injizieren.

'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

Wenn Sie jQuery und Unterstrichen in Ihren HTML enthalten, werden sie global verfügbar sein. Es besteht keine Notwendigkeit, sie "zu injizieren".

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

Wenn Sie sie in einem Modul einschließen wollten, könnten Sie so etwas tun:

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

Dadurch Sie die Bibliotheken asynchron geladen werden, damit während sie von Konflikt mit zuvor geladenen Versionen halten . Es kann einen besseren Weg geben, Verweise auf die geladenen Bibliotheken zu speichern, aber das sollte gut funktionieren.

Auch dieses Beispiel basiert auf einem Drittanbieter ($script.js).

Und hier ist ein jsFiddle (http://jsfiddle.net/moderndegree/bzXGx/);