Introduction
In this article we will learn about the basic CRUD operation using AngularJs and without database. How can we perform the create, read, update, delete operation using AngularJs. AngularJS attributes to achieve CRUD operation.
Previous Updates
In previous articles we have learnt Read Write connection string from web.config file. Base64 Encoding And Decoding In SQL Server. AngularJS vs JavaScript Example. Binding Data To HTML using AngularJS.
CRUD Using AngularJS:-
Here i am sharing the HTML code for performing the CRUD. Her we learn all the operation in step-wise. First we will do the Create and Read then Update and Delete.
One important thing which is required in this code is angular Library given into the script tag. Through this angular script link you can use angular in your Html page.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div ng-app="mainApp" data-ng-controller="CRUDController">
<table>
<tr>
<td>CusId: </td>
<td>
<span>{{ CusModel.Id }}</span>
</td>
</tr>
<tr>
<td>Name:</td>
<td>
<input type="text" data-ng-model="CusModel.Name" />
</td>
</tr>
<tr>
<td>Contact:</td>
<td>
<input type="number" data-ng-model="CusModel.Contact" />
</td>
</tr>
<tr>
<td>
<input type="button" value="Save Data" data-ng-click="AddData()" />
</td>
<td>
<input type="button" value="Update Data" data-ng-click="UpdateData()" />
</td>
</tr>
</table>
<table border="1" style="width: 300px">
<thead>
<th>Id</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tr data-ng-repeat="Cus in CustomerList" data-ng-click="BindSelectedData(Cus)">
<td>{{ Cus.Id }}</td>
<td>{{ Cus.Name }}</td>
<td>{{ Cus.Contact }}</td>
<td>
<input type="button" value="Delete" data-ng-click="DeleteData(Cus)" />
</td>
</tr>
</table>
</div>
</body>
</html> |
Save And display Using AngularJS :-
|
<script type="text/javascript">
var app = angular.module("mainApp", []);
app.controller('CRUDController', function ($scope) {
$scope.CusModel = {
Id: 0,
Contact: +91,
Name: '',
};
$scope.CustomerList = [];
$scope.AddData = function () {
var _Cus = {
Id: $scope.CustomerList.length + 1,
Name: $scope.CusModel.Name,
Contact: $scope.CusModel.Contact
};
$scope.CustomerList.push(_Cus);
ClearModel();
}
function ClearModel() {
$scope.CusModel.Id = 0;
$scope.CusModel.Name = '';
$scope.CusModel.Contact = 0;
} });
</script>
|
you can paste this code under the Had section of above given HTML code or also with in Body section.
In this script code i define a module for angular and then define a controller for that module. Within the CRUDController module i define a object by using $scope.CusModel and provide initial value to it.
A customerList for save all the data temporarily in clientside . AddData function for adding new data and also a ClearModel function for clearing the text values after Save.
Update Using AngularJS :-
<script type="text/javascript">
var app = angular.module("mainApp", []);
app.controller('CRUDController', function ($scope) {
$scope.BindSelectedData = function (Cus) {
$scope.CusModel.Id = Cus.Id;
$scope.CusModel.Name = Cus.Name;
$scope.CusModel.Contact = Cus.Contact;
}
$scope.UpdateData = function () {
$.grep($scope.CustomerList, function (e) {
if (e.Id == $scope.CusModel.Id) {
e.Name = $scope.CusModel.Name;
e.Contact = $scope.CusModel.Contact;
}
</script> |
Here $scope.BindSelectedData binds the record from tabel data to TextBoxes. And
$scope.UpdateData update the record by clicking on UpdateData Button.
Delete Using AngularJS :-
|
<script type="text/javascript">
var app = angular.module("mainApp", []);
app.controller('CRUDController', function ($scope) {
$scope.DeleteData = function (Cus) {
var _index = $scope.CustomerList.indexOf(Cus);
$scope.CustomerList.splice(_index, 1);
} });
</script>
|
This is the Simple delete function in AngularJS. Read the index customer and remove that record from tabular data list.
Now after combining all the code here is the final HTML page for you.
Use Below Given Code For Practice :-
|
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div ng-app="mainApp" data-ng-controller="CRUDController">
<table>
<tr>
<td>CusId: </td>
<td>
<span>{{ CusModel.Id }}</span>
</td>
</tr>
<tr>
<td>Name:</td>
<td>
<input type="text" data-ng-model="CusModel.Name" />
</td>
</tr>
<tr>
<td>Contact:</td>
<td>
<input type="number" data-ng-model="CusModel.Contact" />
</td>
</tr>
<tr>
<td>
<input type="button" value="Save Data" data-ng-click="AddData()" />
</td>
<td>
<input type="button" value="Update Data" data-ng-click="UpdateData()" />
</td>
</tr>
</table>
<table border="1" style="width: 300px">
<thead>
<th>Id</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tr data-ng-repeat="Cus in CustomerList" data-ng-click="BindSelectedData(Cus)">
<td>{{ Cus.Id }}</td>
<td>{{ Cus.Name }}</td>
<td>{{ Cus.Contact }}</td>
<td>
<input type="button" value="Delete" data-ng-click="DeleteData(Cus)" />
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var app = angular.module("mainApp", []);
app.controller('CRUDController', function ($scope) {
$scope.CusModel = {
Id: 0,
Contact: +91,
Name: '',
};
$scope.CustomerList = [];
$scope.AddData = function () {
var _Cus = {
Id: $scope.CustomerList.length + 1,
Name: $scope.CusModel.Name,
Contact: $scope.CusModel.Contact
};
$scope.CustomerList.push(_Cus);
ClearModel();
}
$scope.DeleteData = function (Cus) {
var _index = $scope.CustomerList.indexOf(Cus);
$scope.CustomerList.splice(_index, 1);
}
$scope.BindSelectedData = function (Cus) {
$scope.CusModel.Id = Cus.Id;
$scope.CusModel.Name = Cus.Name;
$scope.CusModel.Contact = Cus.Contact;
}
$scope.UpdateData = function () {
$.grep($scope.CustomerList, function (e) {
if (e.Id == $scope.CusModel.Id) {
e.Name = $scope.CusModel.Name;
e.Contact = $scope.CusModel.Contact;
}
});
ClearModel();
}
function ClearModel() {
$scope.CusModel.Id = 0;
$scope.CusModel.Name = '';
$scope.CusModel.Contact = 0;
}
});
</script>
</body>
</html>
|
0 comments:
Post a Comment