AngularJS API – 8 Types of Global API’s with Examples

In this AngularJS API tutorial, we will discuss What is Global API and AngularJS API functions with their examples. But, before we start this AngularJS tutorial, do you know what is API?

API (Application Programming Interface) is a software intermediary that allows two applications to communicate with each other. Every application you are using on your phone involves API. When you are using an application on your cell phone, the application first gets connected to the internet and sends data to the server. After that data is retrieved at a server and it interprets the data, performs an action to convert it into a readable format and sends the data back to the phone. This is done because of the API.

Types of AngularJS Global API

What is the AngularJS Global API?

When you are using AngularJS to implement an application, you find that there are certain tasks that you need to perform regularly such as object comparison, data conversion etc. For this purpose, you require a lot of common functionalities, which are provided by AngularJS API.

It is a set of a function of javascript. When an angular.js library is loaded then only Global APIs become available in an angularJS application.

AngularJS global API is used to perform a task such as:

  1. Comparison of objects
  2. Iteration of objects
  3. Conversion of data

To access the AngularJS global API, the object is required.

Do you know what are the major Directives for AngularJS HTML DOM?

AngularJS API Function

Here, is a list of some common API function in AngularJS with examples:

1. angular.copy()

angular.copy API function is used to create a deep copy of an array of object.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="App" ng-controller="myController">
<p>orignal text: {{ a }}</p>
<p>result: Copied Text is {{ b }}</p>
</div>

<script>
var t = angular.module('App', []);
t.controller('myController', function($scope) {
    $scope.a = "Angular";
    $scope.b = angular.copy($scope.a);
});
    </script>

    </body>
</html>

Output:

Original text: Angular
Result: Copied Text is Angular

2. angular.lowercase()

angular.lowecase API function is used to convert the original string into a lowercase string.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="App" ng-controller="myController">
<p>orignal text: {{ a }}</p>
<p>{{ b }}</p>
</div>

<script>
var t = angular.module('App', []);
t.controller('myController', function($scope) {
     $scope.a = "Angular";
     $scope.b = angular.lowercase($scope.a);
});
</script>

</body>
</html>

Also, see – Two types of Data Binding in AngularJS

Output:

Original text: Angular

Result: Angular

3. angular.uppercase()

angular.uppercase API function is used to convert the original string into an uppercase string.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="App" ng-controller="myController">
<p>original text: {{ a }}</p>
<p>{{ b }}</p>
</div>

<script>
var t = angular.module('App', []);
t.controller('myController', function($scope) {
      $scope.a = "Angular";
      $scope.b = angular.uppercase($scope.a);
});
</script>

</body>
</html>

Output:

Original text: Angular

Result: ANGULAR

4. angular.Date()

angular.Date API function can return a true or false value. It returns a true value if the parameter passed is of date type otherwise returns false.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="App" ng-controller="myController">
<p>orignal text: {{ a }}</p>
<p>result: {{ b }}</p>
<p>orignal text: {{ a1 }}</p>
<p>result: {{ b1 }}</p>
</div>

<script>
var t = angular.module('App', []);
t.controller('myController', function($scope) {
    $scope.a = "Angular";
    $scope.b = angular.isDate($scope.a);
    $scope.a1 = new Date();
    $scope.b1 = angular.isDate($scope.a1);
});
</script>

</body>
</html>

Output:

Original text: Angular

Result: false

Original text: “2019-01-15T06:57:06.026Z”

Result: true

Learn How MVC works in AngularJS?

5. angular.toJson()

With this angular.toJson API function,  we can convert a javascript object into JSON string format.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="App" ng-controller="myController">
<p>orignal text: {{ a }}</p>
<p>result: {{ b }}</p>
</div>

<script>
var t = angular.module('App', []);
t.controller('myController', function($scope) {
     $scope.a = "Angular";
     $scope.b = angular.toJson($scope.a);

});
</script>

</body>
</html>

Output:

Original text: Angular

result: “Angular”

6. angular.equals()

angular.equals API function returns true or false. If the two strings are equals, it returns true otherwise false.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="App" ng-controller="myController">
<p>orignal text: {{ a }}</p>
<p>result: {{ b }}</p>
<p>result: {{ b1 }}</p>
</div>

<script>
var t = angular.module('App', []);
t.controller('myController', function($scope) {
     $scope.a = "Angular";
     $scope.a1= "angular";
     $scope.a2="Angular";
     $scope.b = angular.equals($scope.a,$scope.a1);
     $scope.b1 = angular.equals($scope.a,$scope.a2);
});
</script>

</body>
</html>

Output:

Original text: Angular

Result: false

Result: true

Follow this link to know about AngularJS Controller with syntax & example

7. angular.isString()

angular.isString API function returns true or false. If the reference is not the string, it returns false and if the reference is a string, it returns true.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="App" ng-controller="myController">
<p>Orignal text:{{ a }}</p>
<p>{{ a1 }}</p>
<p>Orignal text:{{ b }}</p>
<p>{{ b1 }}</p>
</div>

<script>
var x = angular.module('App', []);
x.controller('myController', function($scope) {
     $scope.a = "abc";
     $scope.a1 = angular.isString($scope.a);
     $scope.b = 123;
     $scope.b1 = angular.isString($scope.b);

});
</script>

</body>
</html>

Output:

Original text:abc

true

Original text:123

false

8. angular.isNumber()

angular.isNumber API function returns true or false. If the reference is not number, it returns false and if the reference is number, it returns true.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="App" ng-controller="myController">
<p>Orignal text:{{ a }}</p>
<p>{{ a1 }}</p>
<p>Orignal text:{{ b }}</p>
<p>{{ b1 }}</p>
</div>

<script>
var x = angular.module('App', []);
x.controller('myController', function($scope) {
     $scope.a = 123;
     $scope.a1 = angular.isNumber($scope.a);
     $scope.b = "abc";
     $scope.b1 = angular.isNumber($scope.b);
});
</script>

</body>
</html>

Output:

Original text:123

true

Original text:abc

false

Do you know how to implement View in AngularJS?

Summary

Hence, we can conclude that the AngularJS API is so valuable that it comprises a large part of the business. API in angularJS provided certain utilities such as lowercase, uppercase, equals, isString etc to perform common tasks more efficiently. It is a useful thing through which two applications can communicate and exchange information between themselves.

Hope, you liked our explanation, if you have any query, feel free to ask in the comment box. You feel excited to know Latest AngularJS Career Opportunities.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.