向angular js组件注入jquery和下划线

inject jquery and underscore to angular js component

本文关键字：jquery 下划线 注入 组件 angular js      更新时间：2023-09-26

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

基于@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;
    }
    ]);
})();

如果在HTML中包含jQuery和Undercore，它们将在全局范围内可用。没有必要"注入"它们。

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

这样做将允许异步加载库，同时防止它们与以前加载的版本发生冲突。可能有更好的方法来存储对已加载库的引用，但这应该可以正常工作。

此外，这个例子依赖于第三方laoder（$script.js）

这是一个jsFiddle(http://jsfiddle.net/moderndegree/bzXGx/)；

相关文章：