TechBeamersTechBeamers
  • Learn ProgrammingLearn Programming
    • Python Programming
      • Python Basic
      • Python OOP
      • Python Pandas
      • Python PIP
      • Python Advanced
      • Python Selenium
    • Python Examples
    • Selenium Tutorials
      • Selenium with Java
      • Selenium with Python
    • Software Testing Tutorials
    • Java Programming
      • Java Basic
      • Java Flow Control
      • Java OOP
    • C Programming
    • Linux Commands
    • MySQL Commands
    • Agile in Software
    • AngularJS Guides
    • Android Tutorials
  • Interview PrepInterview Prep
    • SQL Interview Questions
    • Testing Interview Q&A
    • Python Interview Q&A
    • Selenium Interview Q&A
    • C Sharp Interview Q&A
    • PHP Interview Questions
    • Java Interview Questions
    • Web Development Q&A
  • Self AssessmentSelf Assessment
    • Python Test
    • Java Online Test
    • Selenium Quiz
    • Testing Quiz
    • HTML CSS Quiz
    • Shell Script Test
    • C/C++ Coding Test
Search
  • Python Multiline String
  • Python Multiline Comment
  • Python Iterate String
  • Python Dictionary
  • Python Lists
  • Python List Contains
  • Page Object Model
  • TestNG Annotations
  • Python Function Quiz
  • Python String Quiz
  • Python OOP Test
  • Java Spring Test
  • Java Collection Quiz
  • JavaScript Skill Test
  • Selenium Skill Test
  • Selenium Python Quiz
  • Shell Scripting Test
  • Latest Python Q&A
  • CSharp Coding Q&A
  • SQL Query Question
  • Top Selenium Q&A
  • Top QA Questions
  • Latest Testing Q&A
  • REST API Questions
  • Linux Interview Q&A
  • Shell Script Questions
© 2024 TechBeamers. All Rights Reserved.
Reading: Learn to Use AngularJS APIs with Examples
Font ResizerAa
TechBeamersTechBeamers
Font ResizerAa
  • Python
  • SQL
  • C
  • Java
  • Testing
  • Selenium
  • Agile
  • Linux
  • MySQL
  • Python Quizzes
  • Java Quiz
  • Testing Quiz
  • Shell Script Quiz
  • WebDev Interview
  • Python Basic
  • Python Examples
  • Python Advanced
  • Python OOP
  • Python Selenium
  • General Tech
Search
  • Programming Tutorials
    • Python Tutorial
    • Python Examples
    • Java Tutorial
    • C Tutorial
    • MySQL Tutorial
    • Selenium Tutorial
    • Testing Tutorial
  • Top Interview Q&A
    • SQL Interview
    • Web Dev Interview
  • Best Coding Quiz
    • Python Quizzes
    • Java Quiz
    • Testing Quiz
    • ShellScript Quiz
Follow US
© 2024 TechBeamers. All Rights Reserved.
AngularJSLinux Tutorials

Learn to Use AngularJS APIs with Examples

Last updated: Mar 03, 2024 12:32 pm
By Meenakshi Agarwal
Share
11 Min Read
AngularJS APIs, their Usage & Application with Examples
SHARE

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

Contents
1. AngularJS <copy> FunctionAngularJS <copy> Function Example2. AngularJS <extend> FunctionAngularJS <extend> Function Example3. AngularJS <equals> FunctionAngularJS <equals> Function Example4. AngularJS <forEach> FunctionAngularJS <forEach> Function Example5. AngularJS <fromJson> FunctionAngularJS <fromJson> Function Example6. AngularJS <toJson> FunctionAngularJS <toJson> Function Example7. AngularJS <isUndefined> FunctionAngularJS <isUndefined> Function Example.8. AngularJS <isDefined> FunctionAngularJS <isDefined> Function Example.9. AngularJS <isObject> Function10. AngularJS <isNumber> Function11. AngularJS <isDate> Function12. AngularJS <isString> Function13. AngularJS <isArray> FunctionAngularJS <isArray> Function Example14. AngularJS <isFunction> FunctionAngularJS <IsFunction> Example15. AngularJS <isElement> FunctionAngularJS <isElement> Function Example16. AngularJS <uppercase> Function17. AngularJS <lowercase> Function18. AngularJS <merge> FunctionAngularJS <merge> example19. AngularJS <module> FunctionAngularJS <module> Function Example20. AngularJS <bind> FunctionAngularJS <bind> function example

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, converting JSON data, and so on. AngularJS implements this basic functionality in its global APIs.

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

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

  • AngularJS Interview Questions

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

Learn AngularJS APIs

AngularJS APIs, their Usage & Application with Examples

1. AngularJS <copy> Function

AngularJS <copy> function intends to create, a deep copy of a 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>  <!-- 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 the shallow copy).

AngularJS <extend> function allows us to do the same. Thus, it accepts the destination object and one or more source objects (that we want to copy into the 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 an 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. The 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> <!-- 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 lowercase 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 the 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 applications 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 has 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 have any queries 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.

You Might Also Like

Basic Linux Commands for Beginners With Examples

How to Use Bash to Replace Character in String

AngularJS Tutorial – History, Present, and Key Terms

Simple Bash Scripting Tutorial for Beginners

20 Bash Script Code Challenges for Beginners with Their Solutions

Sign Up For Daily Newsletter

Be keep up! Get the latest breaking news delivered straight to your inbox.
Loading
By signing up, you agree to our Terms of Use and acknowledge the data practices in our Privacy Policy. You may unsubscribe at any time.
Meenakshi Agarwal Avatar
By Meenakshi Agarwal
Follow:
Hi, I'm Meenakshi Agarwal. I have a Bachelor's degree in Computer Science and a Master's degree in Computer Applications. After spending over a decade in large MNCs, I gained extensive experience in programming, coding, software development, testing, and automation. Now, I share my knowledge through tutorials, quizzes, and interview questions on Python, Java, Selenium, SQL, and C# on my blog, TechBeamers.com.
Previous Article AngularJS Scope, Usage & Examples AngularJS Scope and Usage with Examples
Next Article Get Started with Python Time Module & Functions Python Time Functions Explained

Popular Tutorials

SQL Interview Questions List
50 SQL Practice Questions for Good Results in Interview
SQL Interview Nov 01, 2016
Demo Websites You Need to Practice Selenium
7 Sites to Practice Selenium for Free in 2024
Selenium Tutorial Feb 08, 2016
SQL Exercises with Sample Table and Demo Data
SQL Exercises – Complex Queries
SQL Interview May 10, 2020
Java Coding Questions for Software Testers
15 Java Coding Questions for Testers
Selenium Tutorial Jun 17, 2016
30 Quick Python Programming Questions On List, Tuple & Dictionary
30 Python Programming Questions On List, Tuple, and Dictionary
Python Basic Python Tutorials Oct 07, 2016
//
Our tutorials are written by real people who’ve put in the time to research and test thoroughly. Whether you’re a beginner or a pro, our tutorials will guide you through everything you need to learn a programming language.

Top Coding Tips

  • PYTHON TIPS
  • PANDAS TIPSNew
  • DATA ANALYSIS TIPS
  • SELENIUM TIPS
  • C CODING TIPS
  • GDB DEBUG TIPS
  • SQL TIPS & TRICKS

Top Tutorials

  • PYTHON TUTORIAL FOR BEGINNERS
  • SELENIUM WEBDRIVER TUTORIAL
  • SELENIUM PYTHON TUTORIAL
  • SELENIUM DEMO WEBSITESHot
  • TESTNG TUTORIALS FOR BEGINNERS
  • PYTHON MULTITHREADING TUTORIAL
  • JAVA MULTITHREADING TUTORIAL

Sign Up for Our Newsletter

Subscribe to our newsletter to get our newest articles instantly!

Loading
TechBeamersTechBeamers
Follow US
© 2024 TechBeamers. All Rights Reserved.
  • About
  • Contact
  • Disclaimer
  • Privacy Policy
  • Terms of Use
TechBeamers Newsletter - Subscribe for Latest Updates
Join Us!

Subscribe to our newsletter and never miss the latest tech tutorials, quizzes, and tips.

Loading
Zero spam, Unsubscribe at any time.
x
x