Using jqLite and jQuery in AngularJS

Sheonarayan
Posted by in AngularJS category on for Intermediate level | Points: 250 | Views : 2253 red flag
Rating: 4.5 out of 5  
 2 vote(s)

In this article, we shall learn how to use jqLite and jQuery functions in AngularJS. We will also understand the differences and examples.

Introduction

jQuery is a javascript library with rich API to manipulate DOM, event handling, animation and ajax interactions. Even if AngularJS can do much of the work on its own that can also be done by jQuery however there are many functions written in jQuery without which web development looks difficult particularly now as we are used to jQuery in all web development projects.

Objective

In this article, we shall understand how to use jqLite, AngularJS built-in subset of jQuery and also understand how to use native jQuery with AngularJS.

What is jqLite?

jqLite is AngularJS built-in subset of jQuery that exposes almost 35 most used functions of jQuery without referencing the jQuery file in the web page. Some of them are
  1. addClass
  2. after
  3. text
  4. removeClass
  5. toggleClass
  6. etc
To get the complete list of jqLite functions read this.

To use jqLite, AngularJS exposes an object called angular.element through which we can call most commonly used jQuery functions.

Using the code

In case we have referenced the jQuery file (jquery.min.js) then angular.element works as an alias of the jQuery or $.

If jQuery.js file is not referenced in the page, angular.element delegates to the AngularJS built-in subset of jQuery, ie. jqLite.

Look at below code snippet, here we are trying to create a custom directive named my-custom. When this directive is used we have specified its template as "Click me" and specified it's link that simply binds "click" event. 

When click event executes on this element, it tries to set the "p1" element content by finding it using either jQuery or document.getElementById and then calling jQuery .text() method.

<script>
        var app = angular.module('app', [])
            .controller("jqLiteController", function ($scope) {

            });
        app.directive('myCustom', function () {
            return {
                template: 'Click me',
                link: function (scope, element, attrs) {
                    element.bind('click', function (event) {
                        // this works only when jQuery file is referenced in the page
                        // write script src="~/Scripts/jquery-1.10.2.min.js" before the reference of angularjs.js file
                        // $("#p1").text("fdasfsad");
                        // angular.element("#p1").text("fdasfsad"); // previous line or this line both are equivalent



                        // jqLite - this works without jQuery, selectors are not supported so we are using
                        // javascript selector and then .text is supported in jqLite
                        // angular.element(document.getElementById("p1")).text("fdasfadsfasd");
                    });
                }
            };
        });
    </script>

    <div ng-app="app" ng-controller="jqLiteController">
        <div my-custom style="background-color:#ff6a00;padding:10px;"></div>
        <p id="p1" style="padding:5px;border:1px solid #c0c0c0;">Show/Hide</p>
    </div>

Now, please note that jqLite doesn't support any of the selectors of jQuery. So in case $("#p1").text("fdasfsad"); line is un-commented, the functionality on click will not work because it will try to use "$" and then selector that is not available either in AngularJS or jqLite. 

To make $("#p1").text("fdasfsad"); line work (by using native jQuery), we will need to refer jQuery file before the reference of AngularJS file like this

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/angular.min.js"></script>
Note that we can either user $ or angular.element to work with native jQuery in AngularJS. It is preferable to use angular.element to make a clear distinction between jQuery code and AngularJS code (AngularJS also exposes its functions using $).


If we do not want to use jQuery but want to work with jqLite we can simply use angular.element(document.getElementById("p1")).text("fdasfadsfasd"); so in absence of jQuery file angular.element delegates to jqLite and then we are finding the "p1" element by using document.getElementById and then calling .text() function.

Summary

Even if jqLite exposes most frequently used jQuery functions however availability of complete jQuery functions gives developers complete freedom to use their existing jQuery knowledge to create better web pages.
Hope this article was useful.
Recommendation
Read Wait till response comes from $http request in AngularJS after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Sheonarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)