AngularJS has its own jqLite, a lightweight version of jQuery. However, for more complex DOM manipulations, animations, or AJAX calls, we may need to integrate full jQuery with AngularJS.
1. Installing jQuery in an AngularJS Project
Using a CDN (Recommended)
Add jQuery before AngularJS in your HTML file:
<!-- jQuery Library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- AngularJS Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
Using npm or Yarn
If using a module bundler:
npm install jquery --save
or
yarn add jquery
Then, import it in your JavaScript file:
import $ from 'jquery';
2. Checking If AngularJS is Using Full jQuery
AngularJS automatically switches to full jQuery if it’s loaded before AngularJS.
Confirm jQuery Usage
Inside an AngularJS controller:
app.controller('MainController', function($scope) {
console.log(angular.element === window.jQuery); // true if using full jQuery
});
If true, AngularJS is using full jQuery. Otherwise, it’s using jqLite.
3. Using jQuery Inside an AngularJS Controller
jQuery can be used inside controllers, but AngularJS’s digest cycle should be considered.
Example: jQuery DOM Manipulation in a Controller
app.controller('MainController', function($scope, $timeout) {
$scope.changeText = function() {
$('#message').text('Updated with jQuery!');
};
// Ensuring Angular updates scope when using jQuery
$scope.updateWithDigest = function() {
$('#message').text('Updated safely!');
$timeout(function() {}); // Ensures the digest cycle runs
};
});
HTML
<div ng-controller="MainController">
<p id="message">Original Text</p>
<button ng-click="changeText()">Change Text</button>
<button ng-click="updateWithDigest()">Change Safely</button>
</div>
4. Using jQuery in AngularJS Directives
Directives are the best place to use jQuery since they deal with DOM manipulations.
Example: Custom Directive Using jQuery
app.directive('highlight', function() {
return {
restrict: 'A',
link: function(scope, element) {
$(element).on('mouseenter', function() {
$(this).css('background-color', 'yellow');
});
$(element).on('mouseleave', function() {
$(this).css('background-color', '');
});
}
};
});
HTML Usage
<p highlight>Hover over me to highlight!</p>
5. Using jQuery Plugins in AngularJS
jQuery plugins can be used in AngularJS by wrapping them inside a directive.
Example: Using a Datepicker Plugin
app.directive('datepicker', function() {
return {
restrict: 'A',
link: function(scope, element) {
$(element).datepicker();
}
};
});
HTML Usage
<input type="text" datepicker />
6. Ensuring AngularJS Watches jQuery Changes
AngularJS won’t detect jQuery updates automatically. Use $scope.$apply() or $timeout().
Example: Updating AngularJS Scope After jQuery Change
app.controller('MainController', function($scope, $timeout) {
$('#changeValue').on('click', function() {
$scope.$apply(function() {
$scope.message = "Updated from jQuery!";
});
});
});
HTML
<div ng-controller="MainController">
<p>{{ message }}</p>
<button id="changeValue">Change with jQuery</button>
</div>
7. Avoiding Conflicts Between AngularJS and jQuery
If using another JavaScript framework that also uses $, run jQuery in noConflict mode:
var jq = jQuery.noConflict();
jq('#element').text('No conflict mode enabled!');
Or use angular.element() instead of $():
angular.element('#element').text('Using angular.element()');