javascript 将 jquery 和下划线注入 angular js 组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17408977/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
inject jquery and underscore to angular js component
提问by Naor
I am using angularjs, underscore and jQuery in my new service:
我在我的新服务中使用 angularjs、下划线和 jQuery：
myModule.factory('MyService', ['MyResource', function (MyResource) {
....
// Here I make use of _ and $
}]);
How can I inject underscore or jQuery to the new service so I can be sure that _ is underscore and $ is jquery?
如何将下划线或 jQuery 注入新服务，以便确定 _ 是下划线而 $ 是 jquery？
I am looking for something like:
我正在寻找类似的东西：
myModule.factory('MyService', [ 'underscore', 'jquery','MyResource', function (_, $, MyResource) {
....
// Here I want to use $ and _ and be SURE that _ is underscore and $ is jquery
}]);
回答by Onur Topal
based on @moderndegree's approach I have implemented the following code, I cannot say it is perfect but this way tester would know if it has jQuery dependency as $windowis too generic object to inject.
基于@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;
}
]);
})();
回答by Brian Lewis
If you include jQuery and Underscore in your HTML, they will be globally available. There is no need to "inject" them.
如果您在 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>
If you wanted to include them in a module, you could do something like this:
如果你想将它们包含在一个模块中，你可以这样做：
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._;
});
}]);
Doing this will allow you to load the libraries asynchronously while keeping them from conflicting with previously loaded versions. There may be a better way to store references to the loaded libraries but this should work just fine.
这样做将允许您异步加载库，同时防止它们与以前加载的版本发生冲突。可能有更好的方法来存储对加载的库的引用，但这应该可以正常工作。
Also, this example relies on a third party laoder ($script.js).
此外，此示例依赖于第三方 laoder ( $script.js)。
And here is a jsFiddle (http://jsfiddle.net/moderndegree/bzXGx/);
这是一个 jsFiddle（http://jsfiddle.net/moderndegree/bzXGx/）；
