- Why AngularJS?
- Understanding AngularJS
- An Overview of the AngularJS Life Cycle
- Separation of Responsibilities
- Integrating AngularJS with Existing JavaScript and jQuery
- Adding AngularJS to Your Environment
- Bootstrapping AngularJS in an HTML Document
- Using the Global APIs
- Creating a Basic AngularJS Application
- Using jQuery or jQuery Lite in AngularJS Applications
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Using jQuery or jQuery Lite in AngularJS Applications
You will be using at least jQuery lite in your AngularJS applications, so it is important to understand the interactions between jQuery, jQuery lite and AngularJS. Even if you are not a jQuery developer, understanding these interactions will help you write better AngularJS applications. If you are a jQuery developer, understanding the interactions will enable you to leverage your jQuery knowledge in your AngularJS applications.
The following sections describe jQuery lite implementation as well as giving a brief introduction to the jQuery/jQuery lite interactions that you will be seeing in your AngularJS applications. The following chapters will expand on this topic as you see some practical examples that utilize jQuery objects in AngularJS applications.
What Is jQuery Lite?
jQuery lite is simply a stripped-down version of jQuery that is built directly into AngularJS. The intent is to provide all the useful features of jQuery and yet keep it constrained within the AngularJS separation of responsibilities paradigm.
Table 2.2 lists the jQuery methods available in jQuery lite along with any restrictions that might apply. The restrictions are necessary to enforce things like manipulating elements only within a custom directive, and so on.
Table 2.2 jQuery Methods That Are Supported in jQuery Lite
jQuery Method |
Limitations, if any, in jQuery Lite |
addClass() |
|
after() |
|
append() |
|
attr() |
|
bind() |
Does not support namespaces, selectors, or eventData. |
children() |
Does not support selectors. |
clone() |
|
contents() |
|
css() |
|
data() |
|
detach() |
|
emtyp() |
|
eq() |
|
find() |
Limited to lookups by tag name. |
hasClass() |
|
html() |
|
text() |
Does not support selectors. |
on() |
Does not support namespaces, selectors, or eventData. |
off() |
Does not support namespaces or selectors. |
one() |
Does not support namespaces or selectors. |
parent() |
Does not support selectors. |
prepend() |
|
prop() |
|
ready() |
|
remove() |
|
removeAttr() |
|
removeClass() |
|
removeData() |
|
replaceWith() |
|
toggleClass() |
|
triggerHandler() |
Passes a dummy event object to handlers. |
unbind() |
Does not support namespaces. |
val() |
|
wrap() |
Table 2.3 lists the additional events and methods that AngularJS adds to jQuery lite objects.
Table 2.3 Methods and Events Added to jQuery Lite Objects
Method/Event |
Description |
$destroy |
A ngularJS intercepts all jQuery or jQuery lite DOM destruction calls and fires this event on all DOM nodes being removed. This can be used to clean up any third-party bindings to the DOM element before it is removed. |
controller(name) |
Returns the controller object of the current element or its parent. If no name is specified, the controller associated with the ngController direc-tive is returned. If a name is provided as a directive name, the controller for this directive is returned. |
injector() |
Returns the injector object of the current element or its parent. |
scope() |
Returns the scope object of the current element or its parent. |
isolateScope() |
Returns an isolate scope object if one is attached directly to the current element. This works only on elements that contain a directive that starts a new isolate scope. |
inheritedData() |
Works the same as the jQuery data() method, but walks up the DOM until a value is found or the top parent element is reached. |
Accessing jQuery or jQuery Lite Directly
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="https://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="https://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. One of the best ways I’ve seen this relationship described is as follows:
angular.element() === jQuery() === $()
Accessing jQuery or jQuery Lite Directly
More often than not, you will be using the jQuery or jQuery lite functionality in jQuery objects that AngularJS creates for you. All element references in AngularJS are always wrapped as jQuery or jQuery lite objects; they are never raw DOM objects.
For example, when you create a directive in AngularJS as discussed later in this book, an element is passed to the link function. That element, as shown here, is a jQuery or jQuery lite object, and you can use the jQuery functionality accordingly:
angular.module('myApp', [])
.directive('myDirective', function() {
. . .
link: function(scope, elem, attrs, photosControl) {
//elem is a jQuery lite object
elem.addClass(...);
}
};
Another example of accessing the jQuery functionality is from events that are triggered on AngularJS bindings. For example, consider the following code that uses the ngClick binding to bind a browser click event on a <div> element to a clicked() function in the AngularJS code:
<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);
};
Note that it was necessary to use the angular.element() method to convert the target DOM object into a jQuery object.