- 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 the Global APIs
As you are implementing AngularJS applications, you will find that there are common JavaScript tasks that you need to perform regularly, such as comparing objects, deep copying, iterating through objects, and converting JSON data. AngularJS provides a lot of this basic functionality in the global APIs.
The global APIs are available when the angular.js library is loaded, and you can access them by using the angular object. For example, to create a deep copy of an object named myObj, you use the following syntax:
var myCopy = angular.copy(myObj);
The following code shows an example of iterating through an array of objects by using the forEach() global API:
var objArr = [{score: 95}, {score: 98}, {score: 92}];
var scores = [];
angular.forEach(objArr, function(value, key){
this.push(key + '=' + value);
}, scores);
// scores == ['score=95', 'score=98', 'score=92']
Table 2.1 lists some of the most useful utilities provided in the global APIs. You will see these used in a number of examples in this book.
Table 2.1 Useful Global API Utilities Provided in AngularJS
Utility |
Description |
copy(src, [dst]) |
Creates a deep copy of the src object or array. If a dst parameter is supplied, it is completely overwritten by a deep copy of the source. |
element(element) |
Returns the DOM element specified as a jQuery element. If you have loaded jQuery before loading AngularJS, the object is a full jQuery object; otherwise, it is only a subset of a jQuery object, using the jQuery lite version built into AngularJS. Table 2.2 lists the jQuery lite methods available in AngularJS. |
equals(o1, o2) |
Compares o1 with o2 and returns true if they pass an === comparison. |
extend(dst, src) |
Copies all the properties from the src object to the dst object. |
forEach(obj, iterator, [context]) |
Iterates through each object in the obj collection, which can be an object or an array. The iterator specifies a function to call, using the following syntax: function(value, key) |
The context parameter specifies a JavaScript object that acts as the context, accessible via the this keyword, inside the forEach loop. |
|
fromJson(json) |
Returns a JavaScript object from a JSON string. |
toJson(obj) |
Returns a JSON string form of the JavaScript object obj. |
isArray(value) |
Returns true if the value parameter passed in is an Array object. |
isDate(value) |
Returns true if the value parameter passed in is a Date object. |
isDefined(value) |
Returns true if the value parameter passed in is a defined object. |
isElement(value) |
Returns true if the value parameter passed in is a DOM element object or a jQuery element object. |
isFunction(value) |
Returns true if the value parameter passed in is a JavaScript function. |
isNumber(value) |
Returns true if the value parameter passed in is a number. |
isObject(value) |
Returns true if the value parameter passed in is a JavaScript object. |
isString(value) |
Returns true if the value parameter passed in is a String object. |
isUndefined(value) |
Returns true if the value parameter passed in is not defined. |
lowercase(string) |
Returns a lowercase version of the string parameter. |
uppercase(string) |
Returns an uppercase version of the string parameter. |