How To Perform CRUD Operation Using JSON File With Sorting And Paging In Angular - Part One

Today, in this article, we will learn how to perform CRUD operation with paging, sorting, validation, and also using file upload control, and then, how to retrieve the records from JSON file. Also, we will perform bulk delete operation using checkbox.

So here, I have divided the article into two parts - Part 1 and Part 2

In part1, I will retrieve data and display the records from JSON file with sorting and paging.

In Part2, I will perform Insert, Update, and Delete operations.

So now, we will perform the first part, i.e., reading the data from JSON with sorting and paging.

Step 1

Download the AngularJS library.

Step 2

We will add a JSON file. For that, go to Solution Explorer and right-click to select a new item. Select JSON file, name it and click "Add".



Now, let's write some records related to employee information in JSON format.

Employee.json

Step 3

When we create Angular.js applications, first we add ng-app directive. This is the starting point or root element of any AngularJS application.

So first, we have to create ng-app. For this, add a JavaScript file. Right click on Solution Explorer, go to Add >> New Item and choose a JavaScript File.



Click "Add" button and write the app code using module.

App.js

Note

AngularExample: This is the name of the variable of ng-app.

'AngularExampleApp' : This is the name of ng-app of our application.

'ui.bootstrap' : This is the botstrap ui for design and the functionality of paging

Step 4

Now, we will create some services for using in this application. So, add a JavaScript file and write this code.

Service.js

In above js file, we created two services - for reading the JSON data from read Employee.json file and another one is HTTP service.

And also, we have created Config service for paging definition.