AngularJS Consuming ASP.NET Web API RESTful Services

In this post let’s see how we can use AngularJS to consume RESTful ASP.NET Web API services. Please note that I am not going to go deeper in ASP.NET Web API here. Even though ASP.NET Web API is related to our subject today, it should be discussed under it’s own separate topic. Today I assume that you have some knowledge in working with ASP.NET Web API. (If you are not, go and have some quick lessons on Learn About ASP.NET Web API)

In one of my previous posts, I wrote about Creating an Empty ASP.NET Project Powered by AngularJS using Visual Studio and for this post I am going to use that sample as the base and modify from there.

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.

New Project

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

Web API

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.

Project URL

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

Project URL

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”.

using System.Collections.Generic;

namespace WebAPI.Models

{

    public class Employee

    {

        public int EmployeeId { get; set; }

        public string FirstName { get; set; }

        public string LastName { get; set; }

        public static List<Employee> GetEmployees()

        {

            return new List<Employee>()

            {

                new Employee()

                {

                    EmployeeId=1,

                    FirstName="Jaliya",

                    LastName="Udagedara"

                },

                new Employee()

                {

                    EmployeeId=2,

                    FirstName="John",

                    LastName="Smith"

                },

                new Employee()

                {

                    EmployeeId=3,

                    FirstName="Jane",

                    LastName="Smith"

                }

            };

        }

    }

}

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.

Web API 2 Controller - Empty

I am giving the Controller names as “EmployeesController”.

EmployeesController

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.

using System.Collections.Generic;

using System.Linq;

using System.Web.Http;

using WebAPI.Models;

namespace WebAPI.Controllers

{

    public class EmployeesController : ApiController

    {

        [HttpGet]

        [Route("employees")]

        public IEnumerable<Employee> GetEmployees()

        {

            return Employee.GetEmployees().AsEnumerable();

        }

    }

}

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.

Result

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”.

'use strict';

app.controller('homeController', ['$scope', 'employeeService', function ($scope, employeeService) {

    $scope.message = "Now viewing home!";

    $scope.employees = {

        EmployeeId: "",

        FirstName: "",

        LastName: ""

    };

    employeeService.getEmployees($scope);

}])

app.service('employeeService', ['$http', function ($http) {

    this.getEmployees = function ($scope) {

        return $http({

            method: "GET",

            url: "../api/employees",

            headers: { 'Content-Type': 'application/json' }

        }).success(function (data) {

            $scope.employees = data;

            console.log(data);

        }).error(function (data) {

            console.log(data);

        });;

    };

}]);

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.

<div ng-controller="homeController">

    <h1>{{message}}</h1>

    <div ng-repeat="employee in employees">

        <label>{{employee.EmployeeId}}</label>

        <label>{{employee.FirstName}}</label>

        <label>{{employee.LastName}}</label>

    </div>

</div>

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.

Result

Here 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.

I am uploading the sample to OneDrive.


Happy Coding.

Regards,
Jaliya