Contact Book Using AngularJS

Introduction

In this article, I am creating a book application using AngularJS. For creating a Simple Contact Book in AngularJS use the following procedure provided here.
 
Step 1: First of all you need to add an external Angular.js file to your application, for this you can go to the AngularJS official site or download my source code and then fetch it or click on this link and download it: ANGULARJS.

After downloading the external file you need to add this file to the Head section of your application as in the following:

<!doctype html>    

<html ng-app>    

  <head>    

    <script src="angular.min.js"></script>    

  </head>  
 
Step 2: Now create a division for ng-controller inside the body tag.
 

<body>

    <div ng-controller="ContactController">

    </div>

</body>
 
Step 3: Now create a form in HTML (inside division) with following elements:

  1. Three  Text-Boxes for Name, E-Mail and Phone Number.
  2. One Hidden Field for id.
  3. One Button for Save.

And all the elements bind with ng-model directives, and button bind with ng-click directive.

I have created this like as in the following:

<div ng-controller="ContactController">

    <form>

    <table>

        <tr>

            <td>Name</td>

            <td><input type="text" name="name" ng-model="newcontact.name" /></td>

        </tr>

        <tr>

            <td>Email</td>

            <td><input type="text" name="email" ng-model="newcontact.email" /></td>

        </tr>

        <tr>

            <td> Phone</td>

            <td><input type="text" name="phone" ng-model="newcontact.phone" /></td>

        </tr>

        <tr>

            <td><input type="hidden" ng-model="newcontact.id" /></td>

            <td><input type="button" value="Save" ng-click="saveContact()" /></td>

        </tr>

    </table>

    </form>

</div>

Note: all the functions of JavaScript I have created in another file, that I will describe later.
 
Step 4: Now create a table (inside the div tag and after form tag) in which we will show our saved contacts.
 

<table border="1">

    <tr>

        <th>Name</th>

        <th>Email</th>

        <th>Phone</th>

        <th>Action</th>

    </tr>

    <tr ng-repeat="contact in contacts">

        <td>{{ contact.name }}</td>

        <td> {{ contact.email }}</td>

        <td>{{ contact.phone }}</td>

        <td><a href="#" ng-click="edit(contact.id)">edit</a> | <a href="#" ng-click="delete(contact.id)">delete</a>

        </td>

    </tr>

</table>
     
Step 5: Now in the next step add a JavaScript file into your HTML file inside the head tag of this HTML file. I have created it with the name info.js.
 

<head>  

    <script src="angular.min.js"></script>  

    <script src="info.js"></script>  

</head>  

Step 6: Now make a new file as name info.js and make a global variable for the number of the id.

var uid = 0;
 
Step 7: Now create a function named ContactController as follows:

function ContactController($scope) {  
}  

Step 8: Create an array inside this ContactController function in which all the contacts will be saved.

$scope.contacts = [ ]; 
 
Step 9: For saving the contacts use the following:
 

$scope.saveContact = function () {

 if ($scope.newcontact.id == null) {

      //if this is new contact  

      $scope.newcontact.id = uid++;

      $scope.contacts.push($scope.newcontact);

}

//For Update the Existing contacts  

else {

       for (i in $scope.contacts) {

               if ($scope.contacts[i].id == $scope.newcontact.id) {

                        $scope.contacts[i] = $scope.newcontact;

                }

          }

   }

   $scope.newcontact = {}; // this will clear the form  
}  
 

Step 10: For deleting the contacts use the following:

$scope.delete = function(id) {             

//search contact with given id and delete it  

for(i in $scope.contacts) {  

    if($scope.contacts[i].id == id) {  

        $scope.contacts.splice(i,1);  

        $scope.newcontact = {};  

    }  

  }             

}  
 
Step 11: For editing the contacts use the following:
 

$scope.edit = function (id) {

    //search contact with given id and update it  

    for (i in $scope.contacts) {

        if ($scope.contacts[i].id == id) {

            //angular.copy() method to create copy of originial object  

            $scope.newcontact = angular.copy($scope.contacts[i]);

        }

    }

}  

Complete Code

HTML Page Code

<!doctype html>  

<html ng-app>  

  <head>  

    <script src="angular.min.js"></script>  

<script src="info.js"></script>  

  </head>  

<body>  

<div ng-controller="ContactController">  

    <form>  

<table>  

<tr>  

<td>Name</td>   

<td><input type="text" name="name" ng-model="newcontact.name"/></td>  

</tr>  

<tr>  

<td>Email</td>  

<td><input type="text" name="email" ng-model="newcontact.email"/></td>  

</tr>  

<tr>  

<td>Phone</td>   

<td><input type="text" name="phone" ng-model="newcontact.phone"/></td>  

</tr>  

<tr>  

<td><input type="hidden" ng-model="newcontact.id" /></td>  

<td><input type="button" value="Save" ng-click="saveContact()" /></td>  

</tr>  

</table>  

    </form>  

<table border="1">  

<tr>  

    <th>Name</th>  

    <th>Email</th>  

    <th>Phone</th>  

    <th>Action</th>  

</tr>  

<tr ng-repeat="contact in contacts">  

    <td>{{ contact.name }}</td>  

    <td>{{ contact.email }}</td>  

    <td>{{ contact.phone }}</td>  

    <td>  

        <a  href="#" ng-click="edit(contact.id)">edit</a> |   

        <a href="#" ng-click="delete(contact.id)">delete</a>  

    </td>  

 </tr>  

</table>      

</div>  

</body>  

</html>  

JavaScript Page Code

var uid = 0;   

function ContactController($scope) {         

    $scope.contacts = [ ];         

    $scope.saveContact = function() {             

        if($scope.newcontact.id == null) {  

        //if this is new contact  

        $scope.newcontact.id = uid++;  

        $scope.contacts.push($scope.newcontact);  

        }   

        //For Update the Existing contacts  

        else {  

        for(i in $scope.contacts) {  

            if($scope.contacts[i].id == $scope.newcontact.id) {  

            $scope.contacts[i] = $scope.newcontact;  

            }  

        }                  

        }  

        $scope.newcontact = {};// this will clear the form  

    }              

    $scope.delete = function(id) {             

        //search contact with given id and delete it  

        for(i in $scope.contacts) {  

            if($scope.contacts[i].id == id) {  

                $scope.contacts.splice(i,1);  

                $scope.newcontact = {};  

            }  

        }             

    }                

    $scope.edit = function(id) {  

    //search contact with given id and update it  

        for(i in $scope.contacts) {  

            if($scope.contacts[i].id == id) {  

                //we use angular.copy() method to create   

                //copy of originial object  

                $scope.newcontact = angular.copy($scope.contacts[i]);  

            }  

        }  

    }  

}  
 
Output

When the page loads the first time:

page loads
After Saving

After Saving

When clicking on the edit button:

edit
Save
Saved Data

When the Delete button is clicked:

Delete Button

Deleted Data