Type jquery and underline in angular js component

Question

I use angularjs, underscore and jQuery in my new service:

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

How can I add underscore or jQuery for a new service, so I can be sure that _ is underscore and $ is 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 }]); 

Answer 1

based on @moderndegree's approach. I implemented the following code, I can’t say that it fits perfectly, but this tester would know if it has a jQuery dependency, since $window is too universal an object to input.

 '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

If you include jQuery and Underscore in your HTML, they will be available worldwide. There is no need to "enter" them.

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="//documentcloud.imtqy.com/underscore/underscore-min.js"></script> 

If you want to include them in a module, you can 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.imtqy.com/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._; }); }]); 

This will allow you to load libraries asynchronously, preventing them from contradicting previously downloaded versions. There may be a better way to store links to loaded libraries, but this should work fine.

In addition, this example is based on a third-party lacquer ( $ script.js ).

And here is jsFiddle ( http://jsfiddle.net/moderndegree/bzXGx/ );