使用 browserify 时如何在 AngularJS 中包含 jQuery？

Question

我正在使用 node、gulp 和 browserify 使我的 JS 文件按正确的顺序排列并管理模块。我将 jQuery 和 AngularJS 作为节点模块安装，并在需要时需要它们。 Angular 默认使用 jqLite 来处理 DOM-Elements。

我知道当 jQuery 在 AngularJS 之前加载时，Angular 将使用 jQuery 而不是 jqLite。

但是在使用browserify的时候怎么可能让Angular使用jQuery。或者：如何要求 jQuery 到 angular?

现在我只是在做var $ = require("jquery");，需要的时候就用。但是我想要一个 Angular ，它会在执行时本机给我 jQuery 方法，例如：

app.directive("dir", function () {
    return {
        link : function ($scope, $elem) {
            var a = $elem.width();//jQuery methods currently not available here
        }
    };
});

我实际需要做的事情：

var jQuery = require("jquery");

app.directive("dir", function () {
    return {
        link : function ($scope, $elem) {
            var jqElement = jQuery($elem);
            var a = $jqElement.width();//jQuery methods are available here
        }
    };
});

Answer 1

未测试但应该可以工作，因为 AngularJS 将 jQlite 存储在 angular.element:

angular.element = require("jquery");

Answer 2

您可以使用browserify-shim

npm install browserify-shim --save-dev

package.json

"browserify": {
  "transform": ["browserify-shim"]
},
"browser": {
  "jquery": "./node_modules/jquery/dist/jquery.js"
},
"browserify-shim": {
  "jquery": "$",
  "angular": {
    "exports": "angular",
    "depends": ["jquery"]
  }
}

Answer 3

对于 AngualrJS 1.x 使用值提供程序

var jQuery = require('jQuery');
var app = require('../app');

app.value('jQuery', jQuery);

然后在您需要的指令或组件中（您不应该需要 jQuery）：

var app = require('../app');

foo.$inject = ['jQuery'];
function foo(jQuery) {
    return {
        restrict: 'A',
        scope: true,
        link: function(element, scope, attr) {

             // I can use jQuery here
             // though I am unsure why
             // I would want to. 

        }
    }
}

app.directive('foo', foo);

现在，如果您需要为此指令编写单元测试，您可以在需要时为 jQuery 注入一个存根。

Answer 4

对于 angularjs 这对我有用。

var jQuery = require('jQuery');
var angular = require("angular");

使用 browserify 时如何在 AngularJS 中包含 jQuery？

How to include jQuery in AngularJS when using browserify?

javascript

jquery

node.js

angularjs

browserify