Consuming ASP NET Web Service in AngularJS using $http Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

this is part 17 of NJ's tutorial in this
video we'll discuss how to consume an
asp.net web service in an angularjs
application here is what we want to do
we're going to have this database table
TBL employees we want to retrieve data
from this database table and display it
on a web page to retrieve data from the
database table we're going to make use
of an asp.net web service and then we
are going to call that web service from
angular code and retrieve the data
displayed on a web page so the first
step here is to create this database
table which I have already done at the
moment within this table we have got
five rows and here is the sequel script
to create and populate this table with
test data
I'll have the script available on my
blog in case you need it now let's flip
to visual studio here I have an asp.net
web application project within the web
config file we have a connection string
that points to the sample DB database on
our local server which is got our TBL
employees table now the next step is to
add a web service to this project which
is going to retrieve data from the
employees table so let's right-click on
this project add a new item and we want
to add a web service and I'm going to
name this web service employee service
so we are going to write some Adia
dotnet code here so I'm going to bring
in some ATO dotnet namespaces we need
system dot configuration we need system
dot data dot sequel client and we also
need system dot web dot script dot
serialization namespace we'll be using
this namespace for converting the data
to JSON format and we want this web
service to be called from JavaScript so
I'm going to uncomment this attribute
system dot web dot script dot services
start script service now let's rename a
function we want our function to
retrieve all the employees so I'm going
to call it get all employees this
function is not actually going to return
anything instead it's actually going to
write the employee data in a JSON format
so the return type here is going to be
wired and within the function we are
going to write some ad or net code the
think that we want to do is create a
list of employee objects basically the
list of employee objects that we want to
return now at the moment we don't have
the employee class so let's go ahead and
create that class first so I'm going to
add a class file and let's name this
file employee dot CS and this class is
going to have four properties all of
them are going to be public and auto
implemented properties so the first one
is going to be of type integer ID is the
name of the property and the second one
is going to be of type string and the
name of the property is going to be name
and the third property is going to be
gender and again of type string and
finally we are going to have an indeed a
property and this property name is going
to be salary so we have our employee
class ready so within our web method we
want to create a list of employee object
let's call it list employees equals new
list of employee now we want to read the
connection string from web config file
so to hold that connection string I'm
going to create a variable so
configuration manager class dot
connection string so of and the name of
our connection string is DB CS and then
let's use the connection strength
property so we have our connection
string property now next we are going to
use sequel connection class and create a
sequel connection object and let's pass
the connection string to this
constructor to create a sequel
connection object the next step is to
create a sequel command object let's
call it CMD and our sequel command is
going to be select star from our table
TBL employees and we want the sequel
command object to use this connection
object and the next thing to do is to
open that connection and we want to
execute
and so CM dot executes reader this is
going to return a sequel data reader
object so let's go ahead and create a
sequel data reader object now let's use
a while loop and loop through each
employee record that we get from the
database as we are looping through each
employee record what we want to do is
create an employee object let's call it
employee equals new employee and we want
to populate the properties of this
employee object so the first property
that we want to populate is ID which is
an integer type and the column name in
the DB is ID and we want to convert that
to India so let's use the convert class
dot two int 32 and we want to do same
thing for name and gender so the
property here is going to be name and
the column name is name and name is
actually of type string so I'm going to
use dot two string function and remove
this convert dot 2n 32 let's do the same
thing for gender so gender column name
is gender and we want to convert that to
a string and the property name on the
employee object is gender and finally we
have salary which is integer and the
column name is salary alright so we have
our employee object with all the
properties populated now we want to add
this employee object to this list that
we want to return so list employees dot
add what we want to add is our employee
object that we have constructed so by
the time this loop finishes we have the
list of employees added to this list
right here
so what we want to do is convert those
lists of employees to adjacent format
and write it to the current response
stream so to write it to the current
response stream I'm going to use the
context
to class so context dot response dot
right so I'm going to create an instance
of JavaScript serializer class which is
present in this namespace system row web
drop script dot serialization namespace
so let's create an instance of
JavaScript serialize a class let's call
it Jas and this javascript serializer
class has got serialize method which is
going to convert our list of employees
to json format so j s dot serialize and
to this we are going to pass our list
employees alright so we have a web
service ready let's quickly test this
web service to make sure it's returning
us the employee data in JSON format so
we have all get all employees web method
available let's invoke that and we
should be getting all the employee data
in a JSON format so we have our web
service ready now we want to call this
web service from angular code so I have
this HTML page one dot HTML so here we
have our development which is having
this ng-controller attribute and that's
pointing to my controller and this my
controller is present in our script our
GS file in the previous videos in this
video series you know we have been hard
coding the data within this controller
function but now this controller is
going to call the web service retrieve
the data and then you know present that
to this web page ok so to retrieve the
data we are going to use a service in
angular and that is dollar HTTP service
we'll discuss in detail about this
dollar HTTP service in our next video
for now understand that we can use this
service to communicate with a remote
server in our example we are going to
use this HTTP service to call the web
service and retrieve the data so how do
I get that HTTP service we just inject
it to this function right here just like
how we have injected the dollar scope
object so I'm going to inject dollar
HTTP service ok and I'm going to use
that object dollar
HTTP and this has got the ket function
so I'm going to use that function and
call the web service so what is the URL
for our web service first of all the
name of our web services employee
service dot ASM X so I'm going to copy
that
and within that service we have a
function and the name of the function is
get all employees that's the web method
that we want to call so get all
employees so we're using this get method
to call that web service now this
request will be executed asynchronously
that means the data may not be
immediately available when the request
completes in our there is another
function that's called then so this
function will be called okay and here we
can specify another JavaScript function
which is going to handle their response
that is returned you know from that
successful call so I'm going to have
another function here and this is the
function that will be called when the
request completes successfully and this
is going to get you know the response
from the call and the response is going
to have a data property which contains
the data from the web service and we
want to use that and initialize you know
a property on our dollar scope object
which is going to be the model so I'm
going to use this dollar scope object
and this is going to have employees
property equals we have the response
object and this is going to have data
property which will contain our employee
data and we are storing that in this
employees and employees is a model so
now all we have to do is within the view
that is within our HTML page one dot
HTML we can use an HTML table and
present the data so I'm going to use an
HTML table here and this table is going
to have a tea head section within that
let's include it TR and then we are
going to include three th elements
actually four so the first one is going
to display ID name
gender and finally celery and then let's
include a tea body section within our
table and within the tea body we are
going to use TR and on this TR element I
am going to use ng repeat and we are
going to use this expression here for
each employee in employees so employees
is au model that's what we have attached
to the scope object so within the TR we
are going to include forty DS and if
we're going to use the data binding
expression we are going to use this
variable employee and this should have
ID property employee dot ID similarly
let's retrieve name gender and salary
properties and display it so named
gender and finally salary all right so
let's save all our changes and when we
view this page in the browser we should
get the data from the database table for
some reason look at that it doesn't
display the data let's see why is that
so here if you look at our script and
now we are using HTTP dollar HTTP
service we are using the get function of
that object and we are calling the web
service now this function will be
asynchronously executed so the data will
not be immediately available when the
request completes successfully this den
function is called and we have a
function here which is handling the
response that is coming from this server
and we are populating the employees
property on the scope object and then
within our HTML page we have our
controller here and then we are looping
through each employee in our employees
that's the model so we can see that here
that's the property that we have
attached to the scope object and we are
using our data binding expressions to
retrieve ID name gender and salary
properties so for some reason it's not
displaying the data so let's launch
developer tools and inspect what's going
on so the developer tools so it
basically says the server responded with
the status of 500 we are getting an
internal
that's basically because here in a way
using a get request let's use a post
request and see what's going to happen
so when I change that to post it works
look at that it reduces the data and
display it as expected now to make it
work for get request there's one little
change that we have to do so when we use
get look at this when I reload this page
we get the same error 500 internal
server error so to make this work with
the get request we have to add one
configuration section with an over web
config file so I'm going to include here
a section under system dot web for web
services and under web services I'm
going to use protocols and under
protocols we are going to add HTTP GET
so let's save these changes and now when
we reload this page look at that it
works as expected so here we have our
controller function and here is the code
within the view thank you for listening
and have a great day