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.
From the next screen, select the “EF Designer from database” option.
On the next screen, click on the New Connection option. To create a new connection to the database we need to provide the database server name and choose the database from the drop down. Here we are working with the “Masterjee” database, so we’ve selected that from the drop down and provided the database server name djpc.
On the next screen, leave the default name of the connection string and click next. On the next screen we need to select the tables. Since we have only one table in the database, we will click on the table checkbox and select the City table.
As of now we have created the data model and added it to the project. Now we should see an EDMX file that has been added as part of the model in the project. At this point, let’s go ahead and build the project to verify whether everything is correct or not.
Scaffolding the Web API
Up til now, we’ve created the data model. Next, to create the WEB API, right click on the controller folder and a new controller. In the installed template of controllers, select Web API 2 controller with actions, using Entity Framework as shown in the image below.
As the model class, select the City class, and for the data context class, select masterjeeEntities class. We need to keep in mind that “masterjee” is the name of the database and by leaving everything as the default, the created context class name would be [databasename]Entities.
By clicking on Add, we are able to create the Cities Web API using the scaffolding. The created controller class will have a Web API for all the CRUD operations on the city table.
Now let’s build the project and run the application. In the browser we should be able to view the XML response of the created API as shown in the image below.
As of now we have successfully created the ASP.NET Web API for the CRUD operations on the City table.
Creating AngularJS Application
Now we need to create the AngularJS App to use the data returned from the API; essentially we need to create:
1. A service to fetch the data from the Web API;
2. A controller to use the service and pass data using the $scope object on the view;
3. And a view to render the data.
Service
To consume to a Web API, let’s create an AngularJS Service. A service factory can be created as shown here:
MyApp.factory('CityService', ['$http', function ($http) {
var urlBase = 'http://localhost:19098/api';
var CityService = {};
CityService.getCities = function () {
return $http.get(urlBase + '/Cities');
};
return CityService;
}]);
We are using the AngularJS service $http to make an HTTP get operation. AngularJS creates an instance of service when it is used, so unless the controller does not need data, AngularJS will not make a call to the ASP.NET Web API.
Controller
Now that we’ve created a service, next we need to create the controller and use the service to get the cities in the $scope object. A controller can be created as follows:
MyApp.controller('UpdateController', function ($scope, CityService) {
getCities();
function getCities() {
CityService.getCities()
.success(function (cities) {
$scope.cities = cities;
})
.error(function (error) {
$scope.status = 'Unable to load customer data: ' + error.message;
});
}
});
Here we are injecting the CityService in the controller and on the success of the $http.get assigning the returned data to the $scope cities property.
View
On the view, using the $scope object, data will be passed from the controller. The view will render the data as shown below:
<divng-controller="UpdateController">
<tableclass="table">
<tr>
<th>Idth>
<th>Nameth>
<th>Countryth>
tr>
<trng-repeat="a in cities">
<td>{{a.Id}}td>
<td>{{a.Name}}td>
<td>{{a.Country}}td>
tr>
table>
div>
Running the application
On running the application in the view, the data will be rendered in the table as shown in the image below:
Conclusion
In this post we successfully demonstrated how to work with the ASP.NET Web API and AngularJS. I hope you found this post useful, and thanks for reading!
