How to Use jQuery in AngularJS

Home Q&A How to Use jQuery in AngularJS

1. Install jQuery

Before using jQuery, ensure it’s included in your project before AngularJS.
Using CDN (Recommended)

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

2. Check if AngularJS is Using jQuery

By default, AngularJS uses its own lightweight jQuery-like library called jqLite. To make sure AngularJS uses full jQuery, it must be loaded before AngularJS.
Inside your AngularJS app:

console.log(angular.element === jQuery);

3. Using jQuery Inside AngularJS

You can use jQuery inside AngularJS controllers, directives, and services.
However, always use AngularJS lifecycle methods like $timeout or $apply when modifying the DOM.

<strong>Example 1: Using jQuery in a Controller</strong>
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope, $timeout) {
    $scope.changeText = function () {
        $timeout(function () {
            $("#myText").text("Updated by jQuery!");
        }, 0);
    };
});

html

<div ng-app="myApp" ng-controller="myCtrl">
    <p id="myText">Original Text</p>
    <button ng-click="changeText()">Change Text</button>
</div>

Example 2: Using jQuery in a Directive

app.directive("customDirective", function () {
    return {
        restrict: "A",
        link: function (scope, element, attrs) {
            $(element).on("click", function () {
                $(this).css("background-color", "yellow");
            });
        }
    };
});

html
button custom-directive>Click Me

4. Avoid Common Pitfalls

Do not directly manipulate the DOM inside controllers. Use directives instead.
Use AngularJS lifecycle methods ($timeout, $apply) to avoid issues with two-way data binding.