javascript - How to include jQuery in AngularJS when using browserify? - Stack Overflow

admin 管理员组

文章数量: 1086019

I'm using node, gulp and browserify to get my JS-Files into the right order and manage modules. I have jQuery and AngularJS installed as node modules and require them when needed. Angular by default uses jqLite to handle DOM-Elements.

I know that when jQuery gets loaded before AngularJS, Angular will use jQuery instead of jqLite.

But how is it possible to get Angular to use jQuery when using browserify. Or: How may one require jQuery to angular?

Now I'm just doing var $ = require("jquery"); and use it when I need it. But I'd like to have an Angular that will natively give me jQuery methods when doing for example:

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

What I actually need to do:

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
        }
    };
});

I'm using node, gulp and browserify to get my JS-Files into the right order and manage modules. I have jQuery and AngularJS installed as node modules and require them when needed. Angular by default uses jqLite to handle DOM-Elements.

I know that when jQuery gets loaded before AngularJS, Angular will use jQuery instead of jqLite.

But how is it possible to get Angular to use jQuery when using browserify. Or: How may one require jQuery to angular?

Now I'm just doing var $ = require("jquery"); and use it when I need it. But I'd like to have an Angular that will natively give me jQuery methods when doing for example:

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

What I actually need to do:

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
        }
    };
});

• javascript
• jquery
• angularjs
• node.js
• browserify

Share Improve this question Follow edited May 3, 2016 at 9:13 Fidel90 asked Feb 29, 2016 at 14:09 Fidel90Fidel90 1,83866 gold badges2828 silver badges6464 bronze badges 5

• You need to read up on external requires in browserify, they can be a bit mind bending until it finally clicks. github./substack/node-browserify#external-requires – David Barker Commented Feb 29, 2016 at 14:51
• 1 Why not just load jquery using a script reference on the page as the very first script? – Igor Commented Mar 18, 2016 at 13:43
• @Igor: That would work but I'd like to bundle all my scripts into a single file :) On the other hand I'm just really curious why such would not be possible to achieve with browserify and npm modules. – Fidel90 Commented Mar 18, 2016 at 13:45
• For external well known resources you should try to use a CDN. It has benefits like browser caching if its been loaded before (highly likely with jquery) and won't cost you anything with bandwidth. – Igor Commented Mar 18, 2016 at 13:46
• A CDN is not an option as I'm writing a web app that will not have any access to the web. It just connects to a nodeJS server. – Fidel90 Commented Mar 18, 2016 at 13:47

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6 +50

You can use 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"]
  }
}

For AngualrJS 1.x use a value provider

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

app.value('jQuery', jQuery);

Then in your Directives or Components where you need it (you shouldn't need 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);

Now if you need to write a Unit Test for this directive you can inject a stub for jQuery if need be.

for angularjs this works for me.

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

本文标签： javascriptHow to include jQuery in AngularJS when using browserifyStack Overflow