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>

<head>

</head>

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

<body>

</div>

</body>

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

Three Text-Boxes for Name, E-Mail and Phone Number.
One Hidden Field for id.
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:

<form>

<table>

<tr>

</tr>

<tr>

<td>Email</td>

</tr>

<tr>

<td> Phone</td>

</tr>

<tr>

</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.

<tr>

<th>Email</th>

<th>Phone</th>

<th>Action</th>

</tr>

<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>

</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>

<head>

</head>

<body>

<form>

<table>

<tr>

</tr>

<tr>

<td>Email</td>

</tr>

<tr>

<td>Phone</td>

</tr>

<tr>

</tr>

</table>

</form>

<tr>

<th>Email</th>

<th>Phone</th>

<th>Action</th>

</tr>

<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:

After Saving

When clicking on the edit button:

edit
Save
Saved Data

When the Delete button is clicked:

Deleted Data