Call Web API Through AngularJS

Web API supports HTTP verbs like POST, GET, PUT, DELETE, PATCH.

• POST (HttpPost) - It is used to create.
• GET(HttpGet) - It is used to retrieve tthe data from API.
• PUT(HttpPut) - It is used to update the data.
• DELETE(HttpDelete) - It is used to delete the data.
• PATCH(HttpPatch) - It is used at the time of partial update.

Now, in this article, we first create a simple Web API with POST and GET methods and in these methods, we pass some data from AngularJS to Web API and retrieve some data from Web API to AngularJS.

Now, let's start coding:

Step 1

Create a Web API with simple steps.

I’m not going to make a solution heavy code, so just select Empty Project template. You can also select Web API templates.



Step 2

Create a Model School class. In this class, define some property of the school.


Step 3

Now, in controller folder, create a SchoolController. In this controller, define two methods, Get and Post.



You can give any name, but you have to use HTTP verbs over the method name.

Step 4

Now, our WEB API is ready. To check if Web API is working or not, just run the solution.



We can see the Get method that returns proper data. So our Web API development is done.

Now, we have to create a HTML page with the help of AngularJS. Through this page, we pass the data and retrieve the data.

So, let's start doing the coding of our HTML page.

Step 5

I am creating two folders- UI and scripts. In UI folder, I kept all my HTML pages and in Scripts Folder, all JS Files.

Step 6

Create a School.html page and in this page, take reference of Angular.js file and my script file and two buttons, where one is for Get and another for Post.



Step 7

Now, we have to do Angular coding.

Create a module and a controller. In the controller, we inject $http service, which is used to pass and retrieve the data from Web API. In this controller, we will create two functions, getData and postData.

It will look  as shown below:



Step 8

Run the solution and when we click on Get Button, the data comes from Web API and binds  to all the text boxes.



Step 9

When we give some value to text box and click Post button, the controller data shows:



In SchoolController, the data is being displayed as: