Call Web API From AngularJS

WebAPI support below HTTP verbs

POST, GET, PUT, DELETE, PATCH.

Lets make a sample application on that we pass some data from AngularJS to Web API and retrieve some data from Web API to AngularJS.


Create a Web API with simple steps.

Select Empty Project template. You can also select Web API templates.



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



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.


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.

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


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.



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:




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




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


In SchoolController, the data is being displayed as:








Posted in Labels: |

0 comments:

Post a Comment