Basic CRUD Operations Using AngularJS

Jasminder Singh
8y
98.8k
0
8

Article

In this article, we will try to learn how we can use the AngularJS to perform simple CRUD operations, without using any database. We will be using the JavaScript arrays to perform this task.

So let's start by creating a new empty project in Visual Studio. We will name it as AngularCRUD.

Next, we will remove the web.config file and add an html page named CRUD.html and add reference to online angular js reference. So our html will looks 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>
</body>
</html>

Next, we will start with adding the data into a javascript array. For this purpose, we will add two input type controls and and buttons to save data.

Since we need to capture the data for this purpose, we will add a new angular module and define a model named EmpModel in it. It will be having three properties named Id, Name and Salary. We will bind the model with the input controls, by creating a new angular module named mainApp and then 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>

Next, we need to add data into javascript array. So we will add a method named AddData. This will simply get the data from the $scope and add it to the javascript array. So the code of controller code will look like the following:

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;
}
});

Next, we bind the AddData method to the button using ng-click directive and use the ng-repeat directive to display the data from the array in a table. So the html 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.

Next, we will try to delete the record from the table. For this we will add a delete function in our controller to delete the record, for which we press the button. So our code will look like the following:

$scope.DeleteData = function (emp) {
var _index = $scope.EmpList.indexOf(emp);
$scope.EmpList.splice(_index, 1);
}

This function will simply receive the argument of the type EmpModel, find its index and remove it from the array. This is because, we will bind the delete button click event with this function using ng-click with 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>

Now, run the code and see the results:

Now finally it's time to perform the update. For this, we first need to display the data to be updated, in textboxes. For this, we add a method named BindSelectedData in the controller, which will bind the data to the textboxes, through the $scope.EmpModel.

$scope.BindSelectedData = function (emp) {
$scope.EmpModel.Id = emp.Id;
$scope.EmpModel.Name = emp.Name;
$scope.EmpModel.Salary = emp.Salary;
}

Bind the method to the table row click using ng-click. So the html mark-up will look like the following:

<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>

Now select any row and data will be displayed in the textboxes, as they are attached to the $scope.EmpModel, which is further receiving the data from the emp object in the BindSelectedData method. See the screenshot below:

Next, we add an update button to update the data and add a method named UpdateData in the controller, to perform the update. So our update method will look like the following:

$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();
}

This method will simply find the record in the array and update it. Bind this method with the click event of the update button we added, using the ng-click directive. So code will look like the following:

<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>

Now run the application, edit and record and press Update button and see the data getting updated.

So our complete html code, including the javascript controller 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>
<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>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>
<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>
</div>
<script type="text/javascript">
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();
}
$scope.DeleteData = function (emp) {
var _index = $scope.EmpList.indexOf(emp);
$scope.EmpList.splice(_index, 1);
}
$scope.BindSelectedData = function (emp) {
$scope.EmpModel.Id = emp.Id;
$scope.EmpModel.Name = emp.Name;
$scope.EmpModel.Salary = emp.Salary;
}
$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();
}
function ClearModel() {
$scope.EmpModel.Id = 0;
$scope.EmpModel.Name = '';
$scope.EmpModel.Salary = 0;
}
});
</script>
</body>
</html>

Hope you enjoyed reading this article. Happy coding...!