A step by step and simple demonstration of doing the crud
operation in AngularJS.
Create a simple form like
below.
1.
Defined the Ng-App and Ng-Controller at top.
Placed that ng-app on html tag.
<html ng-app="crudApp">
Put the ng-controller on the top level div.
<body><div class="container" ng-controller="CrudController">
2.
Take the reference of Bootstrap and angular
library.
<link rel="stylesheet" href="lib/css/bootstrap.css">
<script src="lib/js/angular.js"></script>
3.
Insert
New Records : Use Below code to create a simple form. It contains the two
section one to insert the records and another to Show that inserted record.
Use below code to insert the new records into form. It uses
ng-click to add new records.
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="fname">fname</label>
<input type="text" class="form-control" ng-model="fname" placeholder="First
name">
</div>
<div class="form-group">
<label class="sr-only" for="lname">lname</label>
<input type="text" class="form-control" ng-model="lname" placeholder="Last
name">
</div>
<div class="form-group">
<label class="sr-only" for="email">email</label>
<input type="text" class="form-control" ng-model="email" placeholder="Email">
</div>
<button type="submit" ng-click="addEmployee()" class="btn btn-primary">Add Employee</button>
</form>
4.
Update Existing Records: Use below line of code
for creating Update form. Using ng-show and ng-click of angular to handle it.
<form class="form-inline" ng-show="selectedEmpIndex >
-1">
<div class="form-group">
<label class="sr-only" for="fname">fname</label>
<input type="text" class="form-control" ng-model="efname" placeholder="First
name">
</div>
<div class="form-group">
<label class="sr-only" for="lname">lname</label>
<input type="text" class="form-control" ng-model="elname" placeholder="Last
name">
</div>
<div class="form-group">
<label class="sr-only" for="email">email</label>
<input type="text" class="form-control" ng-model="eemail" placeholder="Email">
</div>
<button type="submit" ng-click="updateEmployee()" class="btn btn-primary">Update Employee</button>
</form>
5.
Display Records:
Display records in table format and perform operation of deletion and edit of
existing records.
Use below code for same.
<table class="table
table-bordered">
<thead>
<th>First name</th>
<th>Last name</th>
<th>Email</th>
<th style="text-align:center;">Edit | Delete</th>
</thead>
<tbody>
<tr ng-repeat="eachEmp in employees">
<td>{{eachEmp.fname}}</td>
<td>{{eachEmp.lname}}</td>
<td>{{eachEmp.email}}</td>
<td style="text-align:center;">
<i ng-click="editEmployee(eachEmp, $index)" class="glyphicon glyphicon-pencil"></i> |
<i ng-click="deleteEmployee($index)" class="glyphicon glyphicon-remove"></i>
</td>
</tr>
</tbody>
</table>
6.
AngularJs Code : Use below AngularJs code to
perform the Crud operations.
As per below code adding into collection
and removing it from collections.
Having the modules as CrudApp and
angular.module('crudApp', [])
.controller('CrudController', function($scope){
$scope.employees = [
{fname: "Satya", lname:"Prakash", email:"raj@gmail.com"},
{fname: "Santosh", lname:"Singh", email:"santosh@gmail.com"},
{fname: "Rajesh", lname:"Gupta", email:"rajesh@gmail.com"},
{fname: "Manish", lname:"Yadav", email:"manish@gmail.com"}
];
$scope.addEmployee = function(){
var firstName = $scope.fname,
lastName =
$scope.lname,
email = $scope.email;
$scope.employees.push({
fname: firstName,
lname:lastName,
email:email
});
$scope.fname = '';
$scope.lname = '';
$scope.email = '';
};
$scope.deleteEmployee = function(index){
$scope.employees.splice(index,
1);
}
$scope.editEmployee = function( eachEmp, index ){
$scope.efname =
eachEmp.fname;
$scope.elname =
eachEmp.lname;
$scope.eemail =
eachEmp.email;
$scope.selectedEmpIndex =
index;
}
$scope.updateEmployee = function(){
var idx =
$scope.selectedEmpIndex;
$scope.employees[idx].fname
= $scope.efname;
$scope.employees[idx].lname
= $scope.elname;
$scope.employees[idx].email
= $scope.eemail;
$scope.selectedEmpIndex =
-1;
}
});
Nice Blog..Thanks for sharing this helpful article..
ReplyDeleteMat Lab Project Center in Chennai | IEEE Mat Lab Projects in Velachery
Interesting post! This is really helpful for me. I like it! Thanks for sharing!
ReplyDeleteBest VLSI Project Center in Chennai | VLSI Project Center in Velachery
Thanks for your information, very informative and highly effective one.
ReplyDeleteBest Photoshop Training Institute in Chennai | No.1 Adobe Photoshop Training Institute in Velachery
Hi, your way of explanation was very nice...Keep sharing..Web Designing Training Institute in Chennai | Web Designing Training Institute in Velachery
ReplyDeleteVery happy to see this blog. Gives a wonderful information with coded explanation. Thank you for this blog. very useful to me.
ReplyDeleteNo.1 IOS Training Institute in Velachery | Best Android Training Institute in Velachery | Core Java Training Institute in Chennai
I am really enjoying reading your well-written articles. It looks like you spend a lot of effort and time on your blog. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work.
ReplyDeleteVMware Training in Chennai
VMware course in Chennai
Vmware Learning
Automation Anywhere Training in Chennai
AWS Training in Chennai
Azure Training in Chennai
VMWare Training in Velachery
VMWare Training in Tambaram
VMWare Training in Adyar
Great Article
ReplyDeleteB.Tech Final Year Projects for CSE in Angular
Angular Training in Chennai
Project Centers in Chennai
JavaScript Training in Chennai
Thanks for your excellent blog and giving great kind of information.
ReplyDeleteGreat post!! This can be one particular of the most useful blogs.
Digital Marketing Training in Chennai | Certification | SEO Training Course | Digital Marketing Training in Bangalore | Certification | SEO Training Course | Digital Marketing Training in Hyderabad | Certification | SEO Training Course | Digital Marketing Training in Coimbatore | Certification | SEO Training Course | Digital Marketing Online Training | Certification | SEO Online Training Course