---

Search posts under AngularJS:

---

jQuery in AngularJS in AngularJS

How to use jQuery in AngularJS?

jQuery is a well written JavaScript code that provides most frequently used functionality in the web pages with best possible ways. Its concise, fast, cross browser compatible and increases developer productivity by providing short and sweet functions.

Most frequently used jQuery functionality can be achieved using AngularJS however there are many functionalities of jQuery that can't be achieved using AngularJS, in those scenarios, we will need jQuery in AngularJS.

AngularJS by default comes with jqLite that works without the reference of jQuery file in the web page, using that we can call most frequently used jQuery functions of jQuery. jqLite doesn't support selectors.

Let's see an example of how to use most of jQuery funtions (provided in AngularJS jqLite) in AngularJS.

In below code snippet, we have a button, clicking on button calls AngularJS ChangeContent() function. This function tries to find out "p1" element using angular.element (this delegates to AngularJS built-in subset of jQuery) and using plain JavaScript function document.getElementByIdand then calls the .text function of jqLite by passing the parameter value to set into "p1" element.

 <script>
        var app = angular.module('app', [])
            .controller("jqLiteController", function ($scope) {
                $scope.ChangeContent = function () {
                   // call jQuery functiona using angular.element
                    angular.element(document.getElementById("p1")).text("Value changed");
                };
            });        
    </script>

    <div ng-app="app" ng-controller="jqLiteController">
        <button ng-click="ChangeContent()">Toggle</button>
        <p id="p1" style="padding:5px;border:1px solid #c0c0c0;">Show/Hide</p>
    </div>

Please note that as jqLite doesn't support jQuery selectors so we are using document.getElementById function on top of angular.element.

Currently, jqLite supports following 35 functions of jQuery

1. addClass()
2. after()
3. append()
4. attr() - Does not support functions as parameters
5. bind() - Does not support namespaces, selectors or eventData
6. children() - Does not support selectors
7. clone()
8. contents()
9. css() - Only retrieves inline-styles, does not call getComputedStyle(). As a setter, does not convert numbers to strings or append 'px'.
10. data()
11. detach()
12. empty()
13. eq()
14. find() - Limited to lookups by tag name
15. hasClass()
16. html()
17. next() - Does not support selectors
18. on() - Does not support namespaces, selectors or eventData
19. off() - Does not support namespaces, selectors or event object as parameter
20. one() - Does not support namespaces or selectors
21. parent() - Does not support selectors
22. prepend()
23. prop()
24. ready()
25. remove()
26. removeAttr()
27. removeClass()
28. removeData()
29. replaceWith()
30. text()
31. toggleClass()
32. triggerHandler() - Passes a dummy event object to handlers.
33. unbind() - Does not support namespaces or event object as parameter
34. val()
35. wrap()

Source: AngularJS official website