Consuming ASP NET Web Service in AngularJS using $http

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.

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

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

[?xml version="1.0" encoding="utf-8"?]
[configuration]
[connectionStrings]
[add name="DBCS"
connectionString="server=.;database=SampleDB; integrated security=SSPI"/]
[/connectionStrings]
[webServices]
[protocols]
[add name="HttpGet"/]
[/protocols]
[/webServices]
[/configuration]

WebService (ASMX)

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

namespace Demo
{
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class EmployeeService : System.Web.Services.WebService
{
[WebMethod]
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);
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
Employee employee = new Employee();
listEmployees.Add(employee);
}
}

JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(listEmployees));
}
}
}

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

.then(function (response) {
});

});

[!DOCTYPE html]
[head]
[title][/title]
[/head]
[body ng-app="myModule"]
[div ng-controller="myController"]
[table]
[thead]
[tr]
[th]Id[/th]
[th]Name[/th]
[th]Gender[/th]
[th]Salary[/th]
[/tr]
[/thead]
[tbody]
[tr ng-repeat="employee in employees"]
[/tr]
[/tbody]
[/table]
[/div]
[/body]
[/html]

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

[khoinguyenpham]

I followed your code and it works. Thank you so much sir, I extremely love all of your tutorials. Really concise and pretty straight forward.
Btw your speech is awesome sir, it helps me concentrate better than any other tutorials.

[saktiprasadswain]

Now Excitement doubled..Waiting for crud operations...Love u Venket sir..

[pronoygomes]

I agree with all the web enthusiast comments. They are very informative and well explained. Thank you.

[ymtan]

Superb and crystal clear explanation for this video. Thanks a million Venkat.

[chaithrashetty]

Thank you very much Sir for clear & detailed explanation with simple examples. Videos you upload are making my learning process easy & fast.. Thanks a lot Sir..

[umeshk]

I like your example's, thous are real world example, thank you for the tutorials..!

[apekshashishodia]

very nice explanations for beginners...Thank you sir

[jasminemerchant]

Thank you sir for making it so your work....

[raqibulAlam-sujo]

Thank you very much Sir for clear & detailed explanation with simple examples. Videos you upload are making my learning process easy & fast.. Thanks a lot Sir..
1 million Thanks and like.

[bawagrafix]

This was wonderful tutorial, I used php service instead of asp.net which was quite simple. Thanks

[shmowlana]

Absolutely amazing! Keep up the great work Venkat!

[rajarajan]

Hi Sir You Have Done Good Job.I am Happy When I Watch This Link

[Karlponken]

Great video and good explanation and examples!

[manishjoshi]

Hello VAnkat
Great Work Keep it up..

[abuthakiru]

Very good tutorial for Angular. But one suggestion, the directive is very important part of Angular, if you add some video for directive then it would be very useful.

[badrkalitouss]

its worked perfectly ! thanks and continue

[virtualdars]

HI, this is good. Thanks for the video.
But why are you using an obsolete asmx web service instead of using web api + entity framework?

[nemanjavukovic]

This video helps me, and you explain perfectly ! Thank you a lot.. :)

[silvioalessio]

thank you for explication, very good!

[rahulsrivastava]

Thank you so much sir for nice explanation