Consuming Web API Services in AngularJs (Part 6)

Angularjs framework has inbuilt support for consuming external service via $http.get method in json format. There are so many approaches to consume the service.

In this post I will explain one of the most popular approaches to consume external service using Ajax request from WEB API as external Service.

Step 1: Create the blank MVC 5.0 application.

Step 2: Go to controller folder and right click and add Web API EmpController like given below image


Step3: Write the code in EmpController like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using WebAPI_Sample.Models;
using System.Data;
using System.Data.SqlClient;

namespace WebAPI_Sample.Controllers
    public class EmpController : ApiController
       public List<Emp> GetEmpDetails()
            List<Emp> Emps = new List<Emp>();
            using (SqlConnection con = new SqlConnection("Data Source=(LocalDB)\\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\\Database1.mdf;Integrated Security=True"))
                using (SqlCommand cmd = new SqlCommand("Select * from tblEmp", con))
                    SqlDataReader dr = cmd.ExecuteReader();
                    while (dr.Read())
                        Emp objEmp = new Emp();
                        objEmp.Id = Convert.ToInt32(dr["Id"]);
                        objEmp.EmpName = dr["EmpName"].ToString();
                        objEmp.EmpAddress = dr["EmpAddress"].ToString();
                        objEmp.EmpSal = Convert.ToDecimal(dr["EmpSalary"]);
                    return Emps;


Note: Make ensure that there is table I.e tblEmp in your database with Id, EmpName, EmpAddress, EmpSalary field and there should be some dummy data.

Step 4: Now build the application and make ensure that service is working as per as expected. For this you to click F5. Then you will get forbidden error message like this.


Step 5: Now change the URL path like this to execute the Web Api Code


URL Change

Then you will get the data in xml format from Web api service like above image.

Step 6: Write the http get request to consume web api service in angularJs in plain HTML page like given below code

<!DOCTYPE html>
    <script src="../Scripts/angular.min.js"></script>
        table, th, td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;

            table tr:nth-child(odd) {
                background-color: #f1f1f1;

            table tr:nth-child(even) {
                background-color: #ffffff;
    <meta charset="utf-8" />

            <b> Demo application to consume WEB API in AngualarJs</b>

            <div ng-app="myApp" ng-controller="EmpController">

                            <th>Emp ID</th>
                    <tr ng-repeat="x in EmpNames">
                        <td>{{ x.Id }}</td>
                        <td>{{ x.EmpName }}</td>
                        <td>{{ x.EmpAddress }}</td>
                        <td>{{ x.EmpSal }}</td>

        //This is the Module in angular
        var app = angular.module('myApp', []);

        // This is the controller in angular
        app.controller('EmpController', function ($scope, $http) {
           .success(function (response) {
               $scope.EmpNames = response;




Step 7: Now run the HTML file and you will get out put like this



In this article we learnt that how to create Wep API Service and how to consume it in AngularJs.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.