AngularJS $ not working without including jquery

Question

I have some jquery code using $ in my controller. When I include jquery in the page, then it works fine but when I remove jQuery then I get following error:

ReferenceError: $ is not defined

I read online that jquery has inbuilt small footprint jquery named jQlite then why I get the error:

$('.scrollProductPicker , .scrollTailoredSupport').click(function(){
        $('html, body').animate({
            scrollTop: $( $(this).attr('href') ).offset().top
        }, 500);
        return false;
    });

Angular uses jQLite. jQLite is enough for angular to work. if you are using any jquery code you should include it — Sajeetharan
– Sajeetharan, Commented Jun 18, 2015 at 4:38
Please do check if you have some JQuery functionality in your page. — user3830198
– user3830198, Commented Jun 18, 2015 at 4:39
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.". Source — Wayne Ellery
– Wayne Ellery, Commented Jun 18, 2015 at 4:40

Shashank Agrawal · Accepted Answer · 2015-06-18 05:49:13Z

2

in Angular JS angular.element is used as an alias for $ or "JQuery", which is part of jqlite and hence if you are using $ directly you need to add the reference of jQuery. more details you can find at this link Angular JS documentation

edited Jun 18, 2015 at 5:49

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

answered Jun 18, 2015 at 4:43

Ramesh Babu

4354 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ThiagoPXP · Accepted Answer · 2015-06-18 05:09:50Z

1

Looking up elements via selectors is not supported by jqLite.

jLite is avaiable here angular.element.

So you cannot do this:

angular.element("body"); //DOES NOT WORK!

However, you can do:

angular.element(document.body); //DOES WORK!

jLite has just a sub set of functions from jQuery.

edited Jun 18, 2015 at 5:09

answered Jun 18, 2015 at 4:46

ThiagoPXP

5,4823 gold badges34 silver badges45 bronze badges

Comments

Shashank Agrawal · Accepted Answer · 2015-06-18 05:17:32Z

@Ramesh & @ThiagoPXP has given the correct answers. But you can still make full use of Angular to select any elements like so:

angular.element(document.querySelectorAll("div.foo"));
// or
angular.element(document.querySelector("#my-page ul.bar"));

You can make your code simpler by registering them as methods in Angular:

angular.findAll = function(selector) {
    return angular.element(document.querySelectorAll(selector));
}

And then you can write easily as:

angular.findAll("div.foo");
// or
angular.findAll("#my-page ul.bar");

Or simpler (to use syntax like jQuery):

window.$ = function(selector) {
    return angular.element(document.querySelectorAll(selector));
}

$("#my-page ul.bar") // will work

But, if you do not include jQuery, Angular will use a small version of jQuery i.e. jqlite which will not have every method available as jQuery.

Piyush-Ask Any Difference · Accepted Answer · 2015-06-18 10:41:20Z

0

This is definitely good. but I want that smooth scroll feature. Couldn't use angular-smoothscroll directive as the link is outside of my angular app and the target anchor is inside the angular app. I ended up with using vanilla javascipt for smooth scroll

answered Jun 18, 2015 at 10:41

Piyush-Ask Any Difference

4,2865 gold badges52 silver badges95 bronze badges

Collectives™ on Stack Overflow

AngularJS $ not working without including jquery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related