Introduction To AngularJS – Day Fourteen (Built-in Functions)

Jeetendra Gund
8y
7.7k
0
1

Article

Introduction

Before moving to key players/concepts of AngularJS, please read my previous articles:

angular.copy

It creates a copy of an object or an array. We just have to pass two parameters to this function, first for source and second is destination to copy. There are two ways to use this function as follows:

Syntax: angular.copy (source, destination); or
destination = angular.copy (source);

Example:

app.js
1. /// <reference path="angular.min.js" />
2. var app = angular.module("myApp", []);
4. app.controller("myController", function ($scope) {
6. $scope.copy = function () {
7. $scope.copy_text = angular.copy($scope.enter_text);
8. };
9. });
copy.html
1. <!DOCTYPE html>
2. <html ng-app="myApp">
3. <head>
4. <title>AngularJS Built-in Functions</title>
5. <meta charset="utf-8" />
6. <script src="app/angular.min.js"></script>
7. <script src="app/app.js"></script>
8. </head>
9. <body ng-controller="myController">
10. Enter text to copy : <input type="text" ng-model="enter_text" /><br />
11. <input type="button" value="Copy Text" ng-click="copy()" /><br />
12. <h4>Copied text is {{copy_text}}</h4>
13. </body>
14. </html>
Output:

After entering text into textbox, click on ‘Copy Text’ button, it will show output as follows:
angular.equals

This function returns a result as true or false. It takes two parameters, it compares two values or objects are equivalent or not. It supports types, values, objects.

Syntax: angular.equals(obj1, obj2);

Example:

app.js
1. /// <reference path="angular.min.js" />
2. var app = angular.module("myApp", []);
4. app.controller("myController", function ($scope) {
7. $scope.equal = function () {
8. $scope.result = angular.equals($scope.first_text, $scope.second_text);
9. };
10. });
equal.html
1. <!DOCTYPE html>
2. <html ng-app="myApp">
3. <head>
4. <title>AngularJS Built-in Functions</title>
5. <meta charset="utf-8" />
6. <script src="app/angular.min.js"></script>
7. <script src="app/app.js"></script>
8. </head>
9. <body ng-controller="myController">
10. <h2>AngularJS equal Function</h2>
11. Enter First Text <input type="text" ng-model="first_text" /><br /><br />
12. Enter Second Text <input type="text" ng-model="second_text" /><br /><br />
13. <input type="button" value="Check" ng-click="equal()" />
14. <h3>Text is equal or not: {{result}}</h3>(This function returns result in true or false).
15. </body>
16. </html>
Output:

Enter the text in both the textboxes and click on ‘Check’ button, it will show output as follows:

The above entered text is equal so value returned by function is true, for false check the following output:
angular.fromJson

This function deserializes a JSON string. This function takes only one parameter; i.e., JSON string data.

Syntax : $scope.result = angular.fromJson(str_json);

aap.js:
1. /// <reference path="angular.min.js" />
2. var app = angular.module("myApp", []);
4. app.controller("myController", function ($scope) {
6. $scope.fromJson = function () {
7. var str_json = '{"author_name":"Jeetendra Gund","technology":"AngularJS","site":"C# Corner"}';
8. $scope.result = angular.fromJson(str_json);
9. };
10. });
fromJson.html
1. <!DOCTYPE html>
2. <html ng-app="myApp">
3. <head>
4. <title>AngularJS Built-in Functions</title>
5. <meta charset="utf-8" />
6. <script src="app/angular.min.js"></script>
7. <script src="app/app.js"></script>
8. </head>
9. <body ng-controller="myController">
10. <h2>AngularJS fromJson Function</h2>
11. <input type="button" value="fromJson" ng-click="fromJson()" />
12. <h3>Author Name : {{result.author_name}}</h3>
13. <h3>Technology : {{result.technology}}</h3>
14. <h3>Author At : {{result.site}}</h3>
15. </body>
16. </html>
Output:

After clicking on ‘fromJson’ button you can see the data fetched from JSON string format and displays objects as follows:
angular.toJson

This function converts or serializes the pass string to JSON-formatted string.

Syntax: $scope.result = angular.toJson($scope.str_json);

app.js
1. /// <reference path="angular.min.js" />
2. var app = angular.module("myApp", []);
4. app.controller("myController", function ($scope) {
6. $scope.toJson = function () {
7. $scope.result = angular.toJson($scope.str_json);
8. };
9. });
toJson.html
1. <!DOCTYPE html>
2. <html ng-app="myApp">
3. <head>
4. <title>AngularJS Built-in Functions</title>
5. <meta charset="utf-8" />
6. <script src="app/angular.min.js"></script>
7. <script src="app/app.js"></script>
8. </head>
9. <body ng-controller="myController">
10. <h2>AngularJS toJson Function</h2>
11. Enter First Name : <input type="text" ng-model="str_json.firstName" /><br /><br />
12. Enter Last Name : <input type="text" ng-model="str_json.lastName" /><br /><br />
13. Enter City : <input type="text" ng-model="str_json.city" /><br /><br />
14. <input type="button" value="toJson" ng-click="toJson()" />
15. <h3>Json format string : </h3> {{result}}
16. </body>
17. </html>
Output:

Enter the text in textboxes firstName, lastName and city, and click on ‘toJson’ button; you can see the result is in JSON formatted string as follows:
angular.isArray

This function is used to check if pass value or object is array or not. It takes only one parameter and returns true or false result.

Syntax: $scope.result = angular.isArray(obj);

app.js
1. /// <reference path="angular.min.js" />
2. var app = angular.module("myApp", []);
4. app.controller("myController", function ($scope) {
7. $scope.first_val = [{ 'name': 'Varsha' }, { 'name': 'Monika' }];
8. $scope.second_val = 'Jeetendra';
9. $scope.isArray = function () {
11. $scope.first_res = angular.isArray($scope.first_val);
12. $scope.second_res = angular.isArray($scope.second_val);
13. };
14. });
isArray.html
1. <!DOCTYPE html>
2. <html ng-app="myApp">
3. <head>
4. <title>AngularJS Built-in Functions</title>
5. <meta charset="utf-8" />
6. <script src="app/angular.min.js"></script>
7. <script src="app/app.js"></script>
8. </head>
9. <body ng-controller="myController">
10. <h2>AngularJS isArray Function</h2>
11. <h3>First Value : {{first_val}} </h3>
12. <h3>Second Value : {{second_val}}</h3>
13. <input type="button" ng-click="isArray()" value="Check isArray" />
14. <h3>First Result : {{first_res}}</h3>
15. <h3>Second Result : {{second_res}}</h3>
16. </body>
17. </html>
Output:
In the above screenshot you can see initially we assign two values for ‘isArray’ function. First one is array and second one is simple string, after clicking on ‘isArray’ button you can see output as follows:
angular.extend

This function extends first object with second object and generates third object. It takes three parameters, first one is for result and other two are objects to extend.

Syntax: angular.extend(res_obj, Obj1,Obj2);

app.js:
1. /// <reference path="angular.min.js" />
2. var app = angular.module("myApp", []);
4. app.controller("myController", function ($scope) {
6. $scope.first_obj = { 'name1': 'Varsha', 'name2': 'Monika' };
7. $scope.second_obj = { 'name3': 'Prasad', 'name4': 'Makarand' };
9. $scope.extend = function () {
10. $scope.res_obj = {};
11. angular.extend($scope.res_obj, $scope.first_obj, $scope.second_obj);
12. };
13. });
extend.html
1. <!DOCTYPE html>
2. <html ng-app="myApp">
3. <head>
4. <title>AngularJS Built-in Functions</title>
5. <meta charset="utf-8" />
6. <script src="app/angular.min.js"></script>
7. <script src="app/app.js"></script>
8. </head>
9. <body ng-controller="myController">
10. <h2>AngularJS extend Function</h2>
11. <h3>First Object : {{first_obj}} </h3>
12. <h3>Second Object : {{second_obj}}</h3>
13. <input type="button" ng-click="extend()" value="Extend" />
14. <h3>Result : {{res_obj}}</h3>
15. </body>
16. </html>
Output:

In the above screenshot you can see we created two lists of string that we are passing to function ‘extend’ and after clicking ‘Extend’ button you can see the output as third list is created using these two lists as follows:

Great, we learned some built-in functions of AngularJS with example successfully.

Summary

I hope that beginners as well as students understood the functions in AngularJS with examples. If you have any suggestions regarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon!

Thanks for reading. Learn it! Share it!