Angular and ASP NET Web API Video Lecture | Angular 2 tutorial - Front-End Programming

this is part 26 of angular 2 tutorial in
this video well discuss creating an
asp.net web api service to retrieve
employee's data from a database table
and in our next video we'll discuss
calling this asp.net web api service
using angular so the first step is to
create the employee's table here is the
sequel script to create the table and
populate it with test data I will have
the script available on my blog and in
the description of this video
I've already executed the script and at
the moment within our employees table we
have got six rows and this employees
table is present in a database called
employee dB
next let's create our asp.net Web API
project we are going to keep this
project separate from our angular
project here is the angular project that
we have been working with so far in this
video series so to the solution right
here let's add a new project let's
right-click on the solution ad and we
want to add a new project on the Left
menu right here select fab from the
middle pane select asp.net web
application and let's name a Web API
project employee Web API service and
then click OK on the screen right here
select Web API and click OK the Web API
project is successfully created now
let's use a do dotnet entity data model
to retrieve data from our database table
so to this project let's add a new area
door to the entity data model so let's
right click on the project add and we
want to add a new item on the Left
select data from the middle pane select
ad or dotnet entity data model and let's
name our entity model employee data
model and then click Add we want to
generate our entity data model from the
database so select this first option
entity framework designer from database
and then click Next
on the screen click new connection
button this is going to open up a vendor
where we can specify the details about
database server
so I'm going to work with sequel server
that's installed on my local machine so
the server name in this case is going to
be dot and I'm going to use Windows
authentication and from this drop-down
list select the database which contains
your employees table in my case it's
present in this database employee DBA
click test connection notice we get the
message test connection succeeded click
OK and then click OK right here and this
is going to save the connection string
in web config file with this named
employee DB entities I'm going to leave
that default name there and then click
Next now this is going to bring up all
the tables that we have in our employee
DB database at the moment we've got only
one table and that is employees table so
select the table and then click finish
the ato dotnet data model is
successfully created now let's add a
very big controller to our asp.net Web
API project so right leg on the
controllers folder within our Web API
project and select add and we want to
add a new controller from this window
select Web API to controller empty and
then click add let's name our controller
employees controller and then click add
the employees controller is successfully
created within this controller let's
include a method which is going to
return us the list of all employee
objects this method is going to be
public and it's going to return I
enumerable of employee objects if you're
wondering where did we get this employee
object from the IDEO dotnet entity
framework has provided us that class and
let's call this method get this method
is going to respond to get requests and
we are going to make use of another
class called employee DB entities let's
call the instance entities equals new
employee DB entities now if you're
wondering what this class is and they
did we get this from again a do dot
identity framework provided us this
class this class helps us to connect you
to the employee DVD
which contains our employees table now
to get the list of employees we can use
the entities object and it has got
employees property and on that just
called to list which is going to return
us the list of employee objects and we
want to return that list from this
method so this method is going to return
us the list of all employee objects
let's include another overloaded version
of get method this method is going to
take employee code and we know employee
code is of type string and when we pass
employee code we want to return that
specific employee with that employee
code so here instead of returning the
entire list let's use first our default
and we want an employee whose code is
equal to whatever we are passing into
this method and we don't want this
method to return and ienumerable of
employee objects instead we want to
return that one employee whose code
matches with the one that we are passing
is a parameter to this method so with
all these changes in place let's view
this project our Web API project in the
closer so I'm going to right click on
the project and then select view and I
want to view it in the browser in Google
Chrome which is my default so here is
the home page of our web api service now
let's navigate to slash API slash
employees notice we get the list of all
employees every employee has got
employee code now what we want to be
able to do is we want to pass the
employee code in the URL like this and
we do that this method within our
employees controller which has got cold
as a parameter will respond and this
method is going to return as that
specific employee let's see if that
happens so when we hit enter here with
employee code in the URL look at that we
still get the list of all employees and
that's basically because if you look at
this app and its co-star folder but in
this we have this file web API config
dots yes
this file we have the default route for
our web api and look at the name of the
parameter button this default route this
is named ID and within our controller we
name the parameter of our method code so
there's a mismatch so let's change ID to
code here and here as well and let's
give our solution a build and reload
this webpage notice now we only get that
specific employee when we remove the
code from the URL we get the list of all
employees and here is the employee
controller code in our next video we'll
discuss how to call this Web API service
using angular thank you for listening
and have a great day