ASP.NET 5 Hosting :: AngularJS Consuming ASP.NET Web API RESTful Solutions

In this post let’s see how we are able to use AngularJS to consume RESTful ASP.NET Net API solutions. Please note that I am not going to go deeper in ASP.NET Net API here. Even though ASP.NET Internet API is related to our subject today, it ought to be discussed beneath it is personal separate subject. Nowadays I assume that you simply have some understanding in working with ASP.NET Internet API.

ukwindows net 5 banner-02

So now I have a ASP.NET Empty project all configured with AngularJS. Let’s add a new project to the solution. I am right clicking on the solution and clicking on Add –> New Project.

1rtnrntrmI am giving a name and clicking on OK. From the next dialog window, I am selecting Web API and clicking on OK.

2eherdne Once the project is created, I am going to do some configuration changes in the project.

First right click on the AngularJSSample project and click on Properties. There under Web tab, copy the Project Url.

3fnbdsfnNow right click on the Web API project and click on Properties. There on the Web tab change the Project Url as follows.

4rehwj If you are prompted for creating a Virtual Directory, Click on OK. Basically what I have done here is making our ASP.NET Web API run on the same host under a different virtual directory. For example, if the AngularJSSample project Url is “http://localhost:2222”, the Web API project Url will be “http://localhost:2222/api”.

Now let’s start modifying the Web API project. First Let’s add a my favorite “Employee” model to the project. Right click on the “Model” folder and add a new class named “Employee”.

Now  in the Web API project, I am clicking on the Controllers folder and Add –> Controller. There I am selecting Web API 2 Controller – Empty.

5dfndenI am giving the Controller names as “EmployeesController”.

6mrfym Here for demonstration purposes, my “EmployeesController” would be exposing data which is returned by “Employee.GetEmployees()” method. In real implementations, you can be retrieving data from databases etc.

I am writing the following method to return all employees.

Here I have decorated my Action with HttpGet and Route attributes. These attributes are for saying when you request a HttpGet on “http://localhost:2222/api/employees”, call the GetEmployees() method. Here you don’t actually have to decorate the method with Route attribute unless you want to mention a custom route. Default route would be Controllers name without the Controller part of it (EmployeesController -> Route would be “http://localhost:2222/api/employees”). These of course, comes with ASP.NET Web API theories and practices.

Now run the Web API project, and navigate to Employees controller through the url. If all is good, you should be able to see the following.

7fnrt Now our task for today is consuming the above ASP.NET Web API REST service using AngularJS. In my Web API project, I will have a service with a HttpGet which will return me all the employees.

Let’s move into the AngularJSSample project. I am going to show all the employees in my home page. So let’s go to “App –> controllers” and start modifying the “homeController.js”.

Here I have used AngularJS Service named “employeeService” to call ASP.NET Web API. There I have a method named getEmployees() which is responsible for calling the Web API and setting the values in $scope object which was passed in as a parameter.

In my “homeController”, I am injecting the “employeeService” and making use of it. Then let’s modify the home template which was located in “App/views”, to show the values retrieved from the service.

Here I have used the ng-repeat directive which kind of acts as a foreach in C#. Now when I run the “AngularJSSample” project, I can see the following.

8ffrmHere I have only wrote about AngularJS querying values from ASP.NET Web API through HttpGet. It’s up for you to discover how AngularJS makes other operations such as HttpPost etc. on RESTful services.

Leave a Reply

Your email address will not be published.