In this blog we will make simple create, read, update and delete operation using AngularJS to develop an application for performing CRUD operations with HTML. We will use the following features of AngularJS in our application.I hope it will help you to understand basic logic of Angularjs.
Some Angular Directives used in this example:-
Output like this:-
Description:- We are using single controller "Book" and module "app" to manage data from html page.coming data from html view "item" store in array "items".for delete remove row from array.for show data bind item $scope value in html element using ng-model in table.for good design using bootsrap.css.
For video session follow:-https://www.youtube.com/watch?v=w-mSJshwEzg
Note:-CRUD with database on next blog.
Some Angular Directives used in this example:-
Directives use to add capability of extending HTML. They are the most important part of AngularJS. Here are some in-built directives used in this example.
For more details of directive follow this link:-
For more details of directive follow this link:-
- ng-app:- Used to auto bootstrap the AngularJS application. This is typically applied to the root of HTML document e.g. <html>, <body>.
- ng-controller:- Used to attach the controller class to the view. This helps to expose the action methods and the scope model from the controller to be accessible to view.
- ng-model:- Used to bind the scope model declared in the controller to the UI elements e.g. input, select,etc.
- ng-repeat:- Used to instantiate the template for each item in the source collection received from the scope of the controller.
- ng-click:- Executes the action method form the controller class when the element on the View is clicked
Basic Example of Crud operation using HTML :-
Step 1:-Create simple HTML page.
Step 2:-Include AngularJs library to support Angularjs in your application inside head tag with script tag.
Step 1:-Create simple HTML page.
Step 2:-Include AngularJs library to support Angularjs in your application inside head tag with script tag.
Crud.html:-
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="library//crud.js"></script>
</head>
<body>
<div ng-app="MyApp" class="container" ng-controller="Book">
<table class="table table-striped table-bordered">
<tr>
<td>ID</td>
<td>
<input type="text" class="form-control" ng-model="item.id" /></td>
</tr>
<tr>
<td>Name</td>
<td>
<input type="text" class="form-control" ng-model="item.name" /></td>
</tr>
<tr>
<td>EmailID</td>
<td>
<input type="text" class="form-control" ng-model="item.email" /></td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="password" class="form-control" ng-model="item.password" /></td>
</tr>
<tr>
<td>Phone</td>
<td>
<input type="text" class="form-control" ng-model="item.phone" /></td>
</tr>
<tr>
<td class="text-right" colspan="2">
<button ng-click="addItem(item)" class="btn btn-primary">
Add
</button>
</td>
</tr>
</table>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>EmailID</th>
<th>Phone</th>
<th>Edit</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td><span ng-hide="editMode">{{item.id}}</span>
<input type="text" ng-show="editMode" ng-model="item.id" />
</td>
<td>
<span ng-hide="editMode">{{item.name}}</span>
<input type="text" ng-show="editMode" ng-model="item.name" />
</td>
<td>
<span ng-hide="editMode">{{item.email}}</span>
<input type="text" ng-show="editMode" ng-model="item.email" />
</td>
<td>
<span ng-hide="editMode">{{item.phone}}</span>
<input type="text" ng-show="editMode" ng-model="item.phone" />
</td>
<td>
<i ng-hide="editMode" ng-click="editMode = true; editItem(item)" class="glyphicon glyphicon-edit"></i>
<i class="glyphicon glyphicon-saved" ng-show="editMode" ng-click="editMode = false"></i>
</td>
<td>
<i ng-click="removeItem($index)" class="glyphicon glyphicon-trash"></i>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Step 3:-Create js file
Crud.js:-
var app = angular.module('MyApp', []); //create modelStep 4:-Run your page..
app.controller("Book", function ($scope) { //create controller
$scope.items = [];
$scope.addItem = function (item) { //to add item
$scope.items.push(item);
$scope.item = {};
},
$scope.removeItem = function (index) { //to remove item
console.log(index);
$scope.items.splice(index, 1)
},
$scope.editItem = function (index) { //to edit item
$scope.editing = $scope.items.indexOf(index);
}
});
Output like this:-
Description:- We are using single controller "Book" and module "app" to manage data from html page.coming data from html view "item" store in array "items".for delete remove row from array.for show data bind item $scope value in html element using ng-model in table.for good design using bootsrap.css.
For video session follow:-https://www.youtube.com/watch?v=w-mSJshwEzg
Note:-CRUD with database on next blog.
You have just read an article that categorized by title AngularJs
by title Basic CRUD Operation in angularjs without Database.. You can bookmark this page with a URL https://bikeshsrivastava.blogspot.com/2016/02/part-13-basic-crud-operation-in.html. Thank You!
Author:
Bikesh Srivastava - Saturday, February 27, 2016
I really appreciate the information shared above. It’s of great help. MaxMunus provides Remote Support For Corporate and for Individuals. If anyone is facing any issue in his project of # ANGULAR JS we can support them remotely , kindly contact us http://www.maxmunus.com/contact
ReplyDeleteMaxMunus Offer World Class Industry best Consultant on# ANGULAR JS. We provide end to end Remote Support on Projects. MaxMunus is successfully doing remote support for countries like India, USA, UK, Australia, Switzerland, Qatar, Saudi Arabia, Bangladesh, Bahrain, and UAE etc.
Saurabh
MaxMunus
E-mail: saurabh@maxmunus.com
Skype id: saurabhmaxmunus
Ph:(0) 8553576305/ 080 - 41103383
http://www.maxmunus.com
Yes why not call me on 08802592478
DeleteI like your blog, I read this blog please update more content on hacking,
ReplyDeleteNice post,and good information Thanks for sharing
further check it once at .NET Online Course
It is an impressive article. It is very useful. Thank you for sharing this with us.
ReplyDeleteAngular JS Online training
Angular JS training in hyderabad
Thanks for providing a good stuff.
ReplyDeleteAngular JS Online training
Angular JS training in hyderabad
Given article is very helpful and very useful for my admin, and pardon me permission to share articles here hopefully helped:
ReplyDeleteErp In Chennai
IT Infrastructure Services
ERP software company in India
web design company in india
Mobile Application Development Company in India
ERP in India
Web development company in chennai
I like your post very much. It is very useful for my research. I hope you can share more info about this. Keep posting mule 4 certification
ReplyDeleteservicenow developer Certification
Workday training
Workday financial training
Workday HCM Online training