AngularJS API – 8 Types of Global API’s with Examples
Free Angular course with real-time projects Start Now!!
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.
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:
- Comparison of objects
- Iteration of objects
- 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.
We work very hard to provide you quality material
Could you take 15 seconds and share your happy experience on Google
