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

我在我的新服务中使用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

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

如果您想将它们包含在模块中，您可以执行以下操作：

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