Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

Consuming ASP.NET Web Service in AngularJS using $http

Suggested Videos
Part 14 - ng-hide and ng-show in AngularJS
Part 15 - AngularJS ng-init directive
Part 16 - ng-include directive in AngularJS

In this video we will discuss how to consume an ASP.NET Web Service in an AngularJS application. Let us understand this step by step from creating an ASP.NET web service to consuming it in an Angular application.

consuming web service in angularjs

Here is what we want to do
1. Create an ASP.NET Web service. This web service retrieves the data from SQL Server database table, returns it in JSON formt.
2. Call the web service using AngularJS and display employee data on the web page

Step 1 : Create SQL Server table and insert employee data 

Create table tblEmployees
    Id int primary key identity,
    Name nvarchar(50),
    Gender nvarchar(10),
    Salary int

Insert into tblEmployees values ('Ben', 'Male', 55000)
Insert into tblEmployees values ('Sara', 'Female', 68000)
Insert into tblEmployees values ('Mark', 'Male', 57000)
Insert into tblEmployees values ('Pam', 'Female', 53000)
Insert into tblEmployees values ('Todd', 'Male', 60000)

Step 2 : Create new empty web application project. Name it Demo. 

Step 3 : Include the following settings in web.config file.
<?xml version="1.0" encoding="utf-8"?>
    <add name="DBCS"
         connectionString="server=.;database=SampleDB; integrated security=SSPI"/>
        <add name="HttpGet"/>

Step 4 : Add a class file to the project. Name it Employee.cs. Copy and paste the following code.

namespace Demo
    public class Employee
        public int id { get; set; }
        public string name { get; set; }
        public string gender { get; set; }
        public int salary { get; set; }

Step 5 : Add a new WebService (ASMX). Name it EmployeeService.asmx. Copy and paste the following code.

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;

namespace Demo
    [WebService(Namespace = "")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class EmployeeService : System.Web.Services.WebService
        public void GetAllEmployees()
            List<Employee> listEmployees = new List<Employee>();

            string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
            using (SqlConnection con = new SqlConnection(cs))
                SqlCommand cmd = new SqlCommand("Select * from tblEmployees", con);
                SqlDataReader rdr = cmd.ExecuteReader();
                while (rdr.Read())
                    Employee employee = new Employee();
           = Convert.ToInt32(rdr["Id"]);
           = rdr["Name"].ToString();
                    employee.gender = rdr["Gender"].ToString();
                    employee.salary = Convert.ToInt32(rdr["Salary"]);

            JavaScriptSerializer js = new JavaScriptSerializer();

Step 6 : Add a new folder to the project. Name it Scripts. Download angular.js script file from, and past it in Scripts folder.

Step 7 : Add a new JavaScript file to the Scripts folder. Name it Script.js. Copy and paste the following code.

/// <reference path="angular.min.js" />

var app = angular
        .module("myModule", [])
        .controller("myController", function ($scope, $http) {

                 .then(function (response) {
                     $scope.employees =;

Step 8 : Add a new stylesheet to the project. Name it Styles.css. Copy and paste the following styles in it.

body {
    font-family: Arial;

table {
    border-collapse: collapse;

td {
    border: 1px solid black;
    padding: 5px;

th {
    border: 1px solid black;
    padding: 5px;
    text-align: left;

Step 9 : Add an HTML page to the ASP.NET project. Copy and paste the following HTML and Angular code

<!DOCTYPE html>
<html xmlns="">
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/Script.js"></script>
    <link href="Styles.css" rel="stylesheet" />
<body ng-app="myModule">
    <div ng-controller="myController">
                <tr ng-repeat="employee in employees">

AngularJS tutorial for beginners


  1. Hi Venkat,May i know? How can we apply validations using angular js.Thank you very much for post angular js tutorials.

  2. hi pragim can u upload some project based on your tutorials

  3. explain insert , update ,delete also sir by using angularjs with database

  4. Dear Venkat,

    Thnaks for sharing web service using in Angular js tutorial.

  5. Hii Venkat i am using angularjs with rest api i amunable to bind so please look into my code and correct it

    var myAngApp = angular.module('SharePointAngApp', []);
    myAngApp.controller('spCustomerController', function ($scope, $http) {

    method: 'Post',
    url: appWebUrl + "/_api/SP.AppContextSite(@TargetSite)/web/lists/getByTitle('InfoList')/items?@TargetSite='" + targetSiteUrl + "'",
    // url: appWebUrl + "/_api/SP.AppContextSite(@)/web/lists/getByTitle('InfoList')/items?$select=Title,Employee,Company",
    headers: { "Accept": "application/json;odata=verbose" }
    }).success(function (data, status, headers, config) {
    $scope.customers = data.d.results;
    }).error(function (data, status, headers, config) {

    $(document).ready(function () {
    var appWebUrl = "";

    var targetSiteUrl = "";
    var ready = false;
    var params = document.URL.split("?")[1].split("&");
    for (var i = 0; i < params.length; i = i + 1) {
    var param = params[i].split("=");
    switch (param[0]) {
    case "SPAppWebUrl":
    appWebUrl = decodeURIComponent(param[1]);
    case "SPHostUrl":
    targetSiteUrl = decodeURIComponent(param[1]);
    // load the request executor script, once ready set a flag that can be used to check against later
    $.getScript(appWebUrl + "/_layouts/15/SP.RequestExecutor.js", function () {
    ready = true;


  6. Hi Venkat,

    Shall you please show a demo of AngularJS Connecting with Database using web API and Rest API (These components are mainly used in real time scenario. Rather than using old asmx).

  7. thank you vekant for such tutorials but it would have been so much helpful for lazy programmers if you provide json output here. :D

  8. So nice of you, i appreciate your way of Explaining Examples

  9. wonder way to explain the Concept i have ever seen.

  10. Can you do an insert, update and delete from this example as well?

  11. Hi Venkat. Thanks for your very useful tutorials. I am new to programming and I just have finished Html, SQL, CSS and JavaScript. I just have started AngularJs and it is a bit difficult for me, especially this tutorial. What do you recommend to me to help me learn AngularJS better?

  12. hello sir,
    can u please tell me how to retrieve the data from database using php page and display it using angularjs if u have any such code please share it with me sir

  13. Hello Sir, Thanks for your very useful tutorials. you have any spring mvc based tutorials.

  14. How I can send a params please?

  15. Hi Venkat could you do a video on insert,update and delete

  16. Hi Venkat, I am using Visual Studio 2010. I am getting this error:The type or namespace name 'Employee' could not be found (are you missing a using directive or an assembly reference?) Please advise


It would be great if you can help share these free resources