AngularJS – jQuery Lite (jqLite) Tutorial

AngularJS and jQuery, both are very powerful JS frameworks. As discussed in angular introduction, jQuery has been most noticeable framework from a very long time. AngularJS adds the capability of MVC pattern along with many other inbuilt services, but it does honor jquery’s easy to use syntax for selecting (jquery selectors) and operating on multiple elements with easy function calls.

Though, it’s possible to use jQuery library along with angular yet it’s advisable to use jQuery lite which is packaged inside AngularJS, by default.

It is lite version of jQuery, i.e., it lacks some of jQuery capabilities but contains most of it. Let’s see how to use jQuery lite with AngularJS applications.

Accessing jQuery or jQuery Lite

For most AngularJS applications, the jQuery lite library built into AngularJS is sufficient. However, if you need the additional functionality of the full version of jQuery, simply load the jQuery library before loading the AngularJS library. For example:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>

Regardless of whether jQuery lite or the full jQuery library is loaded, jQuery is accessed from the AngularJS code using the element attribute of the angular variable available when AngularJS is bootstrapped. Essentially, angular.element will be an alias for the jQuery variable that is normally used in jQuery applications. You may consider it as below:

angular.element() === jQuery() === $()

jQuery Example

<div ng-click="clicked($event)">Click Me</div>

//You can access a jQuery version of the object using the following AngularJS code:
$scope.clicked = function(event){
  var jQueryElement = angular.element(event.target);
  
  //Now perform jQuery actions on jQueryElement
};

Prefer to use “Angular Way”

You’ll often hear “only do DOM manipulation in a directive”. This is a necessity. Honor it. Try to avoid using jQuery until it’s only way forward. Always think of alternate ways to avoid use of jQuery/jqLite to manipulate DOM objects.

AngularJS comes with an entire set of tools to make this very easy; with ngClass we can dynamically update the class; ngModel allows two-way data binding; ngShow and ngHide programmatically show or hide an element; and many more – including the ones we write ourselves.

In other words, we can do all kinds of awesomeness without DOM manipulation. The less DOM manipulation, the easier directives are to test, the easier they are to style, the easier they are to change in the future, and the more re-usable and distributable they are.

Here’s a quick example of toggable button:

.directive( 'myDirective', function () {
    return {
        template: '<a class="btn">Toggle me!</a>',
        link: function ( scope, element, attrs ) {
            var on = false;

            $(element).click( function () {
                on = !on;
                $(element).toggleClass('active', on);
            });
        }
    };
});

This directive can be rewritten much more simply like so:

.directive( 'myDirective', function () {
    return {
        scope: true,
        template: '<a class="btn" ng-class="{active: on}" ng-click="toggle()">Toggle me!</a>',
        link: function ( scope, element, attrs ) {
            scope.on = false;

            scope.toggle = function () {
                scope.on = !scope.on;
            };
        }
    };
});

It’s much clear, maintainable and easier to test than previous version, which will be broken easily in any environment where jQuery is not present.

References:
https://docs.angularjs.org/api/ng/function/angular.element
http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background

Happy Learning !!

Was this post helpful?

Join 7000+ Awesome Developers

Get the latest updates from industry, awesome resources, blog updates and much more.

* We do not spam !!

Leave a Comment

HowToDoInJava

A blog about Java and related technologies, the best practices, algorithms, and interview questions.