How to fetch data from the database using angularjs in Web API

In this post I want to share, how to fetch data from the database using angular JS in Web API. This is my second post about Angular JS. My first post explained, how to setup angular JS Here .

Background:

We Know Angular JS is a client side script so we cannot use it server side. this article we fetch data from database so we will use SQL server database and data will call by using Web API from database in server side and  client side call using angular JS. at last after getting all data we will bind within html  table. Sounds good? Here I am going to use visual studio Application .

Now we will go and create our application. I hope you will like this.

You can always download the source code here.

dicon Application Code -6.96 MB

Firstly we will create a database

The following query can be used to create a database in your SQL Server.

To create Database

To create Table

Now database have created ,Finally we will get table like

222

we can insert data in database

let us

Creating  MVC application

Click File, New, then Project and then select ASP.NET  Web Application, will give project name,location and once click ok button. From the following pop up we will select the MVC and select the core references and folders for MVC and Web API.

565656

Once you click OK, a project with MVC like folder structure with core references will be created for you.

767676y

We will setup angular JS, if you do not know how to setup angular JS, click Here . after setup angular JS we will create a data model.

Create Entity Data Model

Right click on your model folder and click new, select ADO.NET Entity Data Model. Follow the steps given. Once you have done the process , you can see the edmx file and other files in your model folder. Here I gave SchoolMangementEntities for our Entity data model name. Now you can see a file with edmx extension have been created.

Create Controller

Right click on your Controller folder and select Add, click Controller ,select MVC 5 Controller- Empty and gave named StudentController.

Create View 

Right click Index Method which have in StudentController,click Add View.Follow the steps given

Create Web API Controller

We will create a folder for API in our project named “API”,right click API folder,select add,click controller,select Web API 2 Controller-Empty and give named “StudentController”

As you can see,we have action GetStudents for data get

So the coding part to fetch the data from the database is ready, now we need to check whether our Web API is ready for action!. To check that, you just need to run the URL:

http://localhost:10956/api/student/GetStudents

32323

Now we will start our angular part JS

Right click on Module folder,Select Javascript file,give named “app.js” which have ScriptsNg folder .Write following code in this file.

We create costume service right click on Services folder,Select Javascript file,give named “StudentService” which have ScriptsNg folder .Write following code in this file.

We create StudentController right click on Controller folder,Select Javascript file,give named “StudentController” which have ScriptsNg folder .Write following code in this file.

Now we will work Index view which have created

Finally we got result

121212

 

2 thoughts on “How to fetch data from the database using angularjs in Web API

Leave a Reply

Your email address will not be published. Required fields are marked *