Learn to Use AngularJS APIs with Examples

In this tutorial, you’ll learn about essential AngularJS APIs, their usage, and applications with the help of working examples.

While implementing AngularJS applications, we use various JavaScript functions frequently, at different places in our application, such as comparing two objects, deep copying, iterating through objects, and converting JSON data and so on. AngularJS implements this basic functionality in its global APIs.

These global API’s, become available for use, after the loading of the <angular.js> library. To access these API’s, we have to use an angular object.

If you like to quickly brush up Angular concepts, then do go through the below post once.

Let’s now discuss the most frequently used global API’s supported by AngularJS.

AngularJS APIs

AngularJS APIs, their Usage & Application with Examples

1. AngularJS <copy> Function

AngularJS <copy> function intends to create, a deep copy of source object or array and assign it to a destination, where the destination is optional.

Syntax

angular.copy(source, [destination]);

AngularJS <copy> Function Example

<!DOCTYPE html>
<html ng-app="">  
<head>  <!-- www.techbeamers.com -->
<title>AngularJS sample code</title>  
<script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">  
</script>  
  
</head>  
<body bgcolor="#bnde45">
<fieldset>
<legend>AngularJS Copy Function</legend>
<script> 

var src = {'subject' : 'english', 'score' : '90'};
var dest = {};
angular.copy(src, dest);
document.write("Subject : " + dest.subject + "  Marks : " + dest.score);

</script>
</fieldset>
</body>  
</html>

2. AngularJS <extend> Function

Some scenarios require creating a copy of one or more source objects into the destination object (also called as the shallow copy).

AngularJS <extend> function allows us to do the same. Thus, it accepts destination object and one or more source objects (that we want to copy into destination object) as its parameters.

Syntax

var obj = angular.extend({}, obj1, obj2,...);

AngularJS <extend> Function Example

var person = { 'Name': 'Maya', 'Age': '25', 'Skills': { 'name': dancing', place': 'Delhi' } };
var job = { 'Title': 'Programmer', 'Experience': '5',   'Skills': { 'name': 'Designing', 'experience': '2', 'certified': 'true' } };
            
console.log(angular.extend({}, person, job));
//output : {{ 'Name': 'Maya', 'Age': '25', 'Skills': { 'name': 'Designing', 'experience': '2', 'certified': 'true' } , 'Title': 'Programmer', 'Experience': '5'}

3. AngularJS <equals> Function

AngularJS <equals> function is used to verify that two objects or two values are equivalent or not. It supports value types, regular expressions, arrays, and objects.

Syntax

angular.equals(obj1, obj2);

AngularJS <equals> Function Example

var myObj1 = {'subject' : 'English', 'score' : '90'};
var myObj2 = {'subject' : 'English', 'score' : '90'};
var myObj3 = {'class' : 'fifth'};

document.write(angular.equals(myObj1, myObj2));
document.write("</br>");
document.write(angular.equals(myObj1, myObj3));
document.write("</br>");

4. AngularJS <forEach> Function

The <forEach> function allows iterating through each object in the obj collection, which can be an object or an array. The element can be determined using the key of object or index of an array.

Syntax

angular.forEach(obj, iterator, [context]);

Where obj is an object or an array. And the iterator specifies a function to call, using the following

Syntax

function(value, key)

Here, the value is the element of an object or an array. And, Key is the array index or the object key.

The <context> parameter specifies a JavaScript object that acts as the reference. It can be accessed using the <this> keyword, inside the <forEach> loop.

AngularJS <forEach> Function Example

var values = [{'subject' : 'English', 'score' : '90'},{'subject' : 'Maths', 'score' : '99'},{'subject' : 'Computers', 'score' : '95'}];
angular.forEach(values, function(value, key) {
  document.write(value.subject);
  document.write(" ");
});

5. AngularJS <fromJson> Function

AngularJS <fromJson> function intends to serialize input value into a JSON formatted string.

Syntax

angular.fromJson(json);

AngularJS <fromJson> Function Example

var strJSON= '{"subject" : "English", "score" : '90', "class" : "fifth"}';
document.write(angular.fromJson(strJSON));

6. AngularJS <toJson> Function

AngularJS <toJson> function intends to serialize input into a JSON formatted string.

Syntax

angular.toJson(obj, pretty);

AngularJS <toJson> Function Example

var sampleStr = {'subject' : 'English', 'score' : '90', 'class' : 'fifth'}
document.write(angular.toJson(sampleStr));

7. AngularJS <isUndefined> Function

AngularJS <isUndefined> function returns true, if the value parameter passed in it is not defined.

Syntax

angular.isUndefined(value);

AngularJS <isUndefined> Function Example.

var sampleObj;
var str = "AngularJS Tutorial";  
  
document.write(angular.isUndefined(sampleObj));    
document.write(" ");  
document.write(angular.isUndefined(str));

8. AngularJS <isDefined> Function

AngularJS <isDefined> function returns true, if the value parameter passed in it is defined as an object.

Syntax

angular.isDefined(value);

AngularJS <isDefined> Function Example.

var sampleObj;
var str = "AngularJS Tutorial";  
  
document.write(angular.isDefined(sampleObj));    
document.write(" ");  
document.write(angular.isDefined(str));

9. AngularJS <isObject> Function

AngularJS <isObject> function returns true, if the value parameter passed in it is a JavaScript object.

Syntax

angular.isObject(value);

10. AngularJS <isNumber> Function

AngularJS <isNumber> function returns true, if the value parameter passed in it is a number.

Syntax

angular.isNumber(value);

11. AngularJS <isDate> Function

AngularJS <isDate> function returns true, if the value parameter passed in it is a Date object.

Syntax

angular.isDate(value);

12. AngularJS <isString> Function

AngularJS <isString> function returns true, if the value parameter passed in it is a String object.

Syntax

angular.isString(value);

13. AngularJS <isArray> Function

AngularJS <isArray> function returns true, if the value parameter passed in it is an Array object.

Syntax

angular.isArray(value);

AngularJS <isArray> Function Example

var myArray = [20,40,60,80,100,120];
var str = "AngularJS Tutorial";

document.write(angular.isArray(myArray)); 
document.write("</br>");
document.write(angular.isArray(str));

14. AngularJS <isFunction> Function

AngularJS <isFunction> function returns true, if the value parameter passed in it is a JavaScript function.

Syntax

angular.isFunction(value);

AngularJS <IsFunction> Example

function messageStr()
{
    return "AngularJS Tutorial";
}

document.write(angular.isFunction(messageStr));

15. AngularJS <isElement> Function

AngularJS <isElement> function returns true, if the value parameter passed in, is either a DOM element object or a jQuery element object.

Syntax

angular.isElement(value);

AngularJS <isElement> Function Example

<!DOCTYPE html>
<html ng-app=""> 
<head> <!-- www.techbeamers.com -->
<title>AngularJS Sample code</title> 
<script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"> 
</script> 

</head> 
<body bgcolor="#bnde45">
<fieldset>
<legend>AngularJS isElement Function</legend>
<script> 
document.write(angular.isElement('title')); 
document.write("</br>");
</script>
</fieldset>
</body> 
</html>

16. AngularJS <uppercase> Function

This function converts the input text or string parameter into its upper case version.

Syntax

angular.uppercase(str);

17. AngularJS <lowercase> Function

This function converts the input text or string parameter into its lower case version.

Syntax

angular.lowercase(str);

18. AngularJS <merge> Function

This function creates a deep copy of one or more source objects into the destination object. In a way, it is similar to AngularJS <extend> function. However, unlike the <extend> function, <merge> descends recursively into object properties of source objects, thus creating a deep copy. Functional parameters include one destination and one or more source objects.

Syntax

var object = angular.merge({}, obj1, obj2);

AngularJS <merge> example

var person = { 'Name': 'Maya', 'Age': '25', 'Skills': { 'name': dancing', place': 'Delhi' } };
var job = { 'Title': 'Programmer', 'Experience': '5', 'Skills': { 'name': 'Designing', 'experience': '2', 'certified': 'true' } };

console.log(angular.merge({}, person, job));
//output : { 'Name': 'Maya', 'Age': '25', 'Skills': { 'name': 'Designing', 'experience': '2', 'certified': 'true', 'place': 'Delhi' }, 'Title': 'Programmer', 'Experience': '5' };

19. AngularJS <module> Function

This function is used to create, register and retrieve Angular modules. It acts as a container for different parts of AngularJS application like controllers, services, filters, directives, etc. AngularJS allows you to declare a module using the angular.module() method.

Syntax

angular.module(name, [requires], [configFn]);

AngularJS <module> Function Example

<html>
<head>
<title>AngularJS sample code for modules function</title>
<Script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
</Script>
<Script>
//Defining Controller Using AngularJS Module
var app = angular.module('myApp', []);
    app.controller('sampleController', function($scope) {
        $scope.student = { subject: "English", class: "fifth", score: 90 };
    });
</Script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="sampleController"> 
<p>Student Subject : {{ student.subject }}</p>
<p>Student Class : {{ student.class }}</p>
<p>Student Score : {{ student.score }}</p>

</div>
</div>
</body>
</html>
//Output

Student Subject : English
Student Class : fifth
Student Score : 90

20. AngularJS <bind> Function

This function is used to bind the current context to a function, but actually, execute it at a later time. It allows working with partial functions.

Syntax

angular.bind(self, fn, [args]);

AngularJS <bind> function example

<!DOCTYPE html>
<html >
<head>
    <title>AngularJS Sample code</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="bindController">
        angular.bind value = {{Add}}
    </div>
</body>
</html>
<script>
    var app = angular.module("myApp", []);
    app.controller('bindController', ['$scope', function ($scope) {
        function addition(x, y) {
            return x + y;
        }
        var data = angular.bind(this, addition, 10);
        $scope.Add = data(5);
    }]);
   
</script>
//Output

angular.bind value = 15

Footnote.

We hope the above tutorial would have helped you cover the most commonly used AngularJS APIs with ease. We’ve attached supporting examples in almost all the APIs so that it is easy for you to understand the API and its usage.

In case, you’d any query regarding the API explanation given above, then do let us know.

However, if you liked this post on “AngularJS APIs“, then don’t mind sharing it further. Also, follow us on our social media (Facebook/Twitter) accounts.