Dhananjay Kumar

Read full article on the Infragistics blog

In this post we will learn to work with AngularJS and ASP.NET Web API in a step by step manner. I’ll assume that you are already familiar with some of the basic terms like what AngularJS and a Web API is, and we’ll work in a hands-on way, fetching data from the database and displaying that in an AngularJS application using the following:

• Database in the SQL Server
• Data model using Entity Framework database-first approach
• The ASP.NET Web API
• Using the Web API in an AngularJS application

Essentially, data resides in the SQL Server database and is exposed as JSON data using the ASP.NET Web API. We then consume the JSON data from the ASP.NET Web API in the AngularJS application.

Setting up the Database

Here we have a table named city with the following columns:

The table is populated with the following data:

This table is inside the SQL Server, and we’ll connect to SQL Server using the Entity Framework database first approach.

ASP.NET Web API

Let us go ahead and create a Web API project in Visual Studio. To do this, select File->New Project-> Web Application>Web API as shown in the image below.

On clicking Ok, we can verify in the solution explorer that a web API project has been created.

Creating the Data Model

Next, to create the data model we’re going to follow the Entity Framework database first approach. To do this, right click on the Model folder in the project and select Add new item.

Read full article on the Infragistics blog