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:
- 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:
<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]()