Angular and ASP NET Web API

Text version of the video

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.

Slides

Angular 2 Tutorial playlist

Angular 2 Text articles and slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

In this video we will discuss creating ASP.NET Web API service that retrieves employees data from a database table. In our next video we will discuss, how to call this ASP.NET Web API service using Angular

Step 1 : Execute the following SQL Script using SQL Server Management studio. This script creates
1. EmployeeDB database
2. Creates the Employees table and populate it with sample data

Create Database EmployeeDB
Go

Use EmployeeDB
Go

Create table Employees
(
code nvarchar(50) primary key,
name nvarchar(50),
gender nvarchar(50),
annualSalary decimal(18,3),
dateOfBirth nvarchar(50)
)
Go

Insert into Employees values ('emp101', 'Tom', 'Male', 5500, '6/25/1988')
Insert into Employees values ('emp102', 'Alex', 'Male', 5700.95, '9/6/1982')
Insert into Employees values ('emp103', 'Mike', 'Male', 5900, '12/8/1979')
Insert into Employees values ('emp104', 'Mary', 'Female', 6500.826, '10/14/1980')
Insert into Employees values ('emp105', 'Nancy', 'Female', 6700.826, '12/15/1982')

Step 2 : To keep Angular and Web API projects separate, let's create a new project for our Web API Service. Right click on "Angular2Demo" solution in the Solution Explorer and select Add - New Project.

Step 3 :
In the Add New Project window
Select "Visual C#" under "Installed - Templates"
From the middle pane select, ASP.NET Web Application
Name the project "EmployeeWebAPIService" and click "OK"

Step 4 : On the next window, select "Web API" and click "OK". At this point you should have the Web API project created.

Step 5 : Add ADO.NET Entity Data Model to retrieve data from the database. Right click on "EmployeeWebAPIService" project and select Add - New Item
In the "Add New Item" window
Select "Data" from the left pane
Select ADO.NET Entity Data Model from the middle pane
In the Name text box, type EmployeeDataModel and click Add

Step 6 : On the Entity Data Model Wizard, select "EF Designer from database" option and click next

Step 7 : On the next screen, click "New Connection" button

Step 8 : On "Connection Properties" window, set
Server Name = (local)
Authentication = Windows Authentication
Select or enter a database name = EmployeeDB
Click OK and then click Next

Step 9: On the nex screen, select "Employees" table and click Finish.

Adding Web API Controller

1. Right click on the Controllers folder in EmployeeWebAPIService project and select Add - Controller

2. Select "Web API 2 Controller - Empty" and click "Add"

3. On the next screen set the Controller Name = EmployeesController and click Add

using System.Collections.Generic;
using System.Linq;
using System.Web.Http;

namespace EmployeeWebAPIService.Controllers
{
public class EmployeesController : ApiController
{
public IEnumerable[Employee] Get()
{
using (EmployeeDBEntities entities = new EmployeeDBEntities())
{
return entities.Employees.ToList();
}
}

public Employee Get(string code)
{
using (EmployeeDBEntities entities = new EmployeeDBEntities())
{
}
}
}
}

At this point when you navigate to /api/employees you will see all the employees as expected. However, when you navigate to /api/employees/emp101, we expect to see employee whose employee code is emp101, but we still see the list of all employees.
This is because the parameter name for the Get() method in EmployeesController is "code"

public Employee Get(string code)
{
using (EmployeeDBEntities entities = new EmployeeDBEntities())
{
}
}

config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{code}",
defaults: new { code = RouteParameter.Optional }
);

[DecentProgrammer]

You helped so many people with your knowledge. Thanks from all of us.

[Tall-Cool-Drink]

Fabulous. Short and sweet.
Body does it better.
Thanks.

[sonaighosh]

excellent series..helped me a lot to learn angular basics..Thanks Sir

[excitingmonkey]

Mr.Venkat, why dont you use some public API like Twitter /Soundcloud / Google which requires auth to access them. It will be quite useful. I expect in your next video.

[rogersmith]

when deploying to Azure app services...do i need to change the baseURL for the API controller location from "localhost:50327" to something else in order for it to work on Azure..or just keep it as is and Azure will change it for us...

[satyarupireddy]

Can someone tell me how to create build definition for this project ? Should I have two publish artifact's ? One for angular (ng build publish files) and one for VSbuild(build from visual studio)??

[kk-hkqd]

Sir I can see a huge difference in angular and angular 2
I find learning angular 2 as a new learning curve
Please make a video what are the changes in angular and angular 2 for developers to learn

[gorakhwaghmode]

Respected sir, My question is that I am working on PHP mysql from last two years and interested in working angular 2. so is it possible to develope application with PHP and MySql? If yes tell me the way?

[leonardacquaye]

Thank you for the videos.  Any chance you're planning on showing how to use Identity make authorized HTTP requests?

[vasamsetti]

Hiii,
I am working on angular and spring boot . Is this video useful for me as it belongs to ASP.NET ?

[samuelaluri]

can we use same process in AngularJS instead of AngularJS-2, actually I am looking for AngularJS with MVC5 WEB API Login page... pls help

[bogdanchlebowski]

Thank very much for the lesson . Can I create WCF service instead of ASP Web API and consume it using Angular ?

[sanjaychouhan]

hello i am front end developer and want to make above database by MySQL but my connection test failed is any specific settings that i want to do because in Visual studio drop down of database not showing any database but i created DB name EmployeeDB plz help me out

[cardeep]

What is employeeDBentities... Plz tell... How did u get that... Asap

[Akash-oytq]

Employee and dbcontext object in employeecontroller is unable to find giving error can u please help on this

[nxttech]

what r the step's for connecting with database(sql) if ur not using visual studio ??

[maheshbabuemani]

Hi sir, can u plz share send list of check box data to wepapi from angular??

[nrupesh]

How to upload image file in angularjs using webmethod in asp.net webform ??? if you know, tell me how ?

[RassiqueMukkarram]

What we can use to connect to database instead of ADO entity framework ?? Any other

[alamshuvozubayer]

Where did you get the api/employees. Please it will be very helpful for me if you explain to me