How 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.
Let’s now discuss the most frequently used global API’s supported by AngularJS.
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 – Learn AngularJS APIs
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.
Thanks for reading !
#angular #angularrjs
