In this simple tutorial we demonstrate the use of AngularJS to perform the CRUD operation on the Data. We are using JSON data to do the demonstration, also Form validation and Array Iteration.
This is an introductory tutorial of crud operations using AngularJS. In this tutorial we are not using any kind of database connectivity or web service, If you are interested in CRUD using restful web service you can look at the Angular+RestEasy(JAX-RS) CRUD Tutorial. In this tutorial We will create a demo book store page which provides a page with input form and table that lists the entries.
The tutorial makes use of JSON notation. We will use a JavaScript array to store and interpret our objects. So lets get started with the HTML part first.
Note: We are assuming that you are familiar with the basics of AngularJS concepts.
We are going to create a simple HTML file and include angular library using CDN in that HTML file, and all of our angular code will reside in a js file called book.js. Initially my HTML code looks like this.
<!doctype html> <html> <head> <title>My Book Store</title> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script> <script src="book.js"></script> </body> </html>
Now we are going to define the initial part of our logic inside the book.js. First of al we are going to make sure our declaration of angular stuff don’t pollute the global scope of JavaScript used in the application, its not necessary but is a good practice. After that we need to define the Angular App and controller.
(function(){
...
})();
Now the rest of the code is placed inside this scope. We have defined a variable with name app and given the name “bookStore” to the application. Then we have defined a controller withing the scope of this app by the name of “bookStoreController”.
(function(){
//defining app name
var app = angular.module('bookStoreApp',[]);
//defining app controller
app.controller('bookStoreController',['$scope',function($scope){
$scope.books = [
{title:"AngularJS",author:"Brad Green",cost:20},
{title:"Head First EJB",author:"Kathy Sierra",cost:25},
{title:"Professional Website Performance",author:"Peter Smith",cost:10}
];
$scope.book = {};
//utility function definitions
$scope.addBook = function(book){
$scope.books.push(book);
$scope.book = {};
}
$scope.editBook = function(index){
$scope.editId = index;
$scope.book = $scope.books[index];
}
$scope.updateBook = function(book){
$scope.books[$scope.editId] = book;
$scope.editId = undefined;
$scope.book = {};
}
$scope.deleteBook = function(index){
$scope.books.splice(index,1);
}
}]);
})();
Further more we have defined an array which holds some sample objects, which we are going to use in the example. There are three functions one for each CRUD(read is performed directly on the array) operation along with one extra function which serves to place the values in the form fields for editing. Here you will notice a variable by the name of editId, this is to keep track of the entry which is being updated.
We are using push() to add the newly created object into the array containing the book list and simply assigning the new object to the selected object reference to update, splice to remove an object. $scope is a angular injection which helps to define the scope of the thing in the controller.
Now is the time to fill up the HTML form and to complete the work. Completed HTML code holds a form to create and update the object and a table to list the entries of the array.
<!doctype html>
<html>
<head>
<title>My Book Store</title>
<style>
.ng-dirty .ng-valid {
border: 2px solid #0f0;
}
.ng-dirty .ng-invalid {
border: 2px solid #f00;
}
form div{
display:block;
}
</style>
</head>
<body ng-app="bookStoreApp" ng-controller="bookStoreController">
<form novalidate name="form" ng-submit="form.$valid && addBook(book)">
<div>
<label>Title</label>
<input type="text" ng-model="book.title" required />
</div>
<div>
<label>Author</label>
<input type="text" ng-model="book.author" required />
</div>
<div>
<label>Cost</label>
<input type="number" ng-model="book.cost" required />
</div>
<div ng-hide="form.$valid">Form is Invalid</div>
<div>
<input type="submit" value="Save" ng-show="editId==undefined"/>
<input type="button" value="Update" ng-click="updateBook(book)" ng-hide="editId==undefined" />
</div>
</form>
<table border="1" cellspacing="2" cellpadding="1">
<thead>
<th>Title</th>
<th>Author</th>
<th>Cost</th>
<th></th>
</thead>
<tbody ng-repeat="book in books">
<tr>
<td>{{book.title}}</td>
<td>{{book.author}}</td>
<td>{{book.cost | currency}}</td>
<td>
<a href="javascript:void(0);" ng-click="editBook($index)">Edit</a>
<a href="javascript:void(0);" ng-click="deleteBook($index)">delete</a>
</td>
</tr>
</tbody>
<table>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script src="book.js"></script>
</body>
</html>
Lets Discuss various angular components we have used in the HTML code above.
ng-app – To define the application scope.
ng-controller – To define controller scope.
ng-model – To bind data with view and opposite.
$valid – To check the validation of the form.
ng-show – To display an entity only when a certain condition is satisfied.
ng-hide – To hide an entity only when a certain condition is satisfied.
ng-repeat – To repeat over the objects in array.
ng-click – To bind function with click event.
ng-submit – To bind function with form submit event.
We have used editBook() and deleteBook() function calls with the parameter $index which is actually the index of the elements inside the book array.
Please take a look at the Working Demo.
