3

In my project I am using both jQuery and angular. I have installed these through bower and I am using browserify to load the files. This seems to work fine, except angular is using jqLite it seems. When I am trying to run

angular.element(".workItem").hide();

I get an error saying jqLite does not support query selectors. How can I get around this and make angular use jQuery?

I want to use angular.element over $ for testing purposes.

Thanks!

Heather Roberts
  • 1,978
  • 1
  • 24
  • 33

3 Answers3

4

From the docs:

To use jQuery, simply ensure it is loaded before the angular.js file.

So in your index.html file, you'll want something like this:

<html>
  <head>
    <script src='jquery.js'></script>
    <script src='angular.js'></script>
  </head>
</html>

After doing so, angular.element should work as a substitute for $:

If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to Angular's built-in subset of jQuery, called "jQuery lite" or "jqLite."

Ie. angular.element('.foo') would be the same as $('.foo').

Adam Zerner
  • 17,797
  • 15
  • 90
  • 156
  • 3
    That would work if I was loading the files through the index.html, but I am using browserify, and I am loading jQuery first through this but it is still trying to use jqLite – Heather Roberts Aug 24 '15 at 06:19
  • Can you check your Network tab to make sure that jQuery is being loaded first? Or alternatively, maybe try throwing in some `console.logs`. If it is indeed being loaded first, you shouldn't be having a problem. I've never used browserify, but it looks like it's useful for situations when things have weird dependencies and you want to delegate away the handling of that. Since you know you'll always want jQuery and Angular in that order, why not add them to `index.html`? – Adam Zerner Aug 24 '15 at 13:26
  • @AdamZerner When using browserify all dependencies are bundled in one JS file together and (in the optimal case) not exposed as globals, but `require()`d. – felixfbecker Nov 14 '15 at 11:38
1

For make it working with browserify you have to require it : Add the jquery dependency to bower and do in your main file :

require('jquery');
global.jQuery = require('jquery');
global.$ = jQuery;

Until here, it is not visible by browserify because the reference is only in bower. So use browserify-shim to make the glue:

  • Install browserify-shim
  • In your package.json, add :
 "browserify": {
   "transform": [
     "browserify-shim"
   ]
 },
  "browser": {
    "jquery": "./bower_components/jquery/dist/jquery.js"

See https://github.com/thlorenz/browserify-shim for complete information.

benek
  • 2,088
  • 2
  • 26
  • 38
  • Using browserify via gulp, I was able to get it working by just adding `global.jQuery = require('jquery');` in my main file. No *browserify-shim* required. – lebolo May 26 '16 at 18:08
0

With are you using bower, go to your file bower.json and put jquery before any angular library into dependencies.

{
  "name": "myadmin",
  "version": "1.0.0",
  "dependencies": {
    "jquery": "~2.1.4",
    "angular-animate": "~1.6.9",
    "angular-cookies": "~1.6.9",
    "angular-touch": "~1.6.9",
    "angular-sanitize": "^1.6.9",
    "angular-messages": "~1.6.9",
    "angular-aria": "~1.6.9",
    "angular-resource": "~1.6.9",
    "angular-ui-router": "~0.4.0",
    "angular-bootstrap": "~2.4.0",
    "angular-toastr": "^2.1.1",
    "animate.css": "~3.4.0",
    "angular": "~1.7.0",
    ...
Dansp
  • 1,378
  • 2
  • 14
  • 36