Recently I started exploring the angular js. So i decided to try with basic crud operations and create a new application. So let's see how we can do this. For our purpose, we will be using javascript arrays rather then any database. So let's start by adding
Remove the web.config file and add an html page. To use angular js, we will add reference to online angular js script file on the following link.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js">
To start with our sample, we will add data into a javascript array. For this, add two input type controls and and buttons to save data. Also, add a new angular module and define a model named EmpModel in it, having three properties called Id, Name and Salary. Bind this model with our input controls, by our angular module named mainApp and a controller named CRUDController. So our code will look like the following:
<!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> </head> <body> <div ng-app="mainApp" data-ng-controller="CRUDController"> <table> <tr> <td>EmpId: </td> <td> <span>{{ EmpModel.Id }}</span></td> </tr> <tr> <td>Name:</td> <td> <input type="text" data-ng-model="EmpModel.Name" /></td> </tr> <tr> <td>Salary:</td> <td> <input type="number" data-ng-model="EmpModel.Salary" /></td> </tr> <tr> <td></td> <td> <input type="button" value="Save Data"/></td> </tr> </table> </div> <script type="text/javascript"> var app = angular.module("mainApp", []); app.controller('CRUDController', function ($scope) { $scope.EmpModel = { Id: 0, Salary: 0, Name: '', }; }); </script> </body> </html>
To add data into our javascript array, let's add a method named AddData. This method will receive the data from $scope and add it to the array. So our controller will change to:
var app = angular.module("mainApp", []); app.controller('CRUDController', function ($scope) { $scope.EmpModel = { Id: 0, Salary: 0, Name: '', }; $scope.EmpList = []; $scope.AddData = function () { var _emp = { Id: $scope.EmpList.length + 1, Name: $scope.EmpModel.Name, Salary: $scope.EmpModel.Salary }; $scope.EmpList.push(_emp); ClearModel(); } function ClearModel() { $scope.EmpModel.Id = 0; $scope.EmpModel.Name = ''; $scope.EmpModel.Salary = 0; } });
Bind the AddData method to our button using ng-click angular directive. To display the data, we use the ng-repeat directive which will read the data from the array and generate an html table. So our html form will look like the following:
<table>
<thead>
<th>Id</th>
<th>Name</th>
<th>Salary</th>
</thead>
<tr data-ng-repeat="Emp in EmpList">
<td>{{ Emp.Id }}</td>
<td>{{ Emp.Name }}</td>
<td>{{ Emp.Salary }}</td>
</tr>
</table>
Now, run the application and see the data get's added.
Now let's delete the record from the table. Add a function for deletion in the controller. So our controller code will change to the following:
$scope.DeleteData = function (emp) { var _index = $scope.EmpList.indexOf(emp); $scope.EmpList.splice(_index, 1); }
The argument of this function is of type EmpModel and will contain the data of the record which we are going to delete. We will find index of the record and remove it from the array. Next bind the delete button click event with our delete function using ng-click and pass the EmpModel instance as the parameter. See the code below:
<table border="1" style="width: 300px"> <thead> <th>Id</th> <th>Name</th> <th>Salary</th> </thead> <tr data-ng-repeat="Emp in EmpList"> <td>{{ Emp.Id }}</td> <td>{{ Emp.Name }}</td> <td>{{ Emp.Salary }}</td> <td> <input type="button" value="Delete" data-ng-click="DeleteData(Emp)" /></td> </tr> </table>
Run the code, add new records and try to delete them.
Now, let's perform the update. First will display the data to be updated, in our input controls. Add a new method named BindSelectedData in our controller, which will pass the data to the input controls, using the $scope.EmpModel. Our function will look like the following:
$scope.BindSelectedData = function (emp) {
$scope.EmpModel.Id = emp.Id;
$scope.EmpModel.Name = emp.Name;
$scope.EmpModel.Salary = emp.Salary;
}
To use the above method, bind it to the table row click using ng-click directive. Our html will change to:
<table border="1" style="width: 300px"> <thead> <th>Id</th> <th>Name</th> <th>Salary</th> </thead> <tr data-ng-repeat="Emp in EmpList" data-ng-click="BindSelectedData(Emp)"> <td>{{ Emp.Id }}</td> <td>{{ Emp.Name }}</td> <td>{{ Emp.Salary }}</td> <td> <input type="button" value="Delete" data-ng-click="DeleteData(Emp)" /></td> </tr> </table>
Select rows from the table and see that the data get's bind to the input controls through the $scope.EmpModel, which get;s the data from the emp object(argument of the BindSelectedData method). See the screenshot below:
$scope.UpdateData = function () { $.grep($scope.EmpList, function (e) { if (e.Id == $scope.EmpModel.Id) { e.Name = $scope.EmpModel.Name; e.Salary = $scope.EmpModel.Salary; } }); ClearModel(); }
Our method will find the record in our array and perform it's updation. Attach our method with the click event of our update button by using the ng-click directive. So html mark-up will change to:
<table>
<tr>
<td>EmpId: </td>
<td>
<span>{{ EmpModel.Id }}</span></td>
</tr>
<tr>
<td>Name:</td>
<td>
<input type="text" data-ng-model="EmpModel.Name" /></td>
</tr>
<tr>
<td>Salary:</td>
<td>
<input type="number" data-ng-model="EmpModel.Salary" /></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>
Run the application, edit and record and click the Update button..
