The main aim of this blog is to give information about how we can call web Api methods using angular "$http" services (for more info about "$http" click here) . I have created a MVC4 application with web Api as project template in Visual Studio 2012.
Full source code is available here.
Before you read this blog, I hope you have some knowledge about angular js and its directives else please go through my last blog. Lets begin the show---
Basically I am trying to load a drop down on page load event using angular "$http" service by calling a web Api method. And also I am trying to post some hard coded data to the web Api method using angular post call. Meanwhile I am trying to maintain coding standards like separating Api call service from the angular controllers, which will help you to maintain your code clear and steady.
Initially I will explain the solution architecture, so that you can have clear picture about the application flow.
Full source code is available here.
Before you read this blog, I hope you have some knowledge about angular js and its directives else please go through my last blog. Lets begin the show---
Basically I am trying to load a drop down on page load event using angular "$http" service by calling a web Api method. And also I am trying to post some hard coded data to the web Api method using angular post call. Meanwhile I am trying to maintain coding standards like separating Api call service from the angular controllers, which will help you to maintain your code clear and steady.
Initially I will explain the solution architecture, so that you can have clear picture about the application flow.
HTML:
UI:
I have written one HTTP Get method and one HTTP Post method as shown below:
In Web API, "GetDropdownList()" method I am just sending a list of states with Id and in "GetResult" method, I am returning a string. The response of both methods are JSON serialized. Next, we need to provide route configuration. Hence I am using "WebApiConfig.cs" file. For more information about the web Api please click here.
Now let's start angular stuff. Before I proceed, there are many other ways to communicate with back end Api. We can make use of "$http" angular service or "ngResource" angular directive. If you are communicating with the REST Api then please go with "ngResource", because it reduces amount of code you right for communication. In this blog I am using using "$http" angular service. In next part of this blog I will try to explain you about "ngResource".
In web application, we usually need to communicate with Api from different locations of the angularjs controllers. So I prefer to wrap the web Api communication code in a angularjs service and call the service whenever you want. So I have created two folders within "Scripts". One folder will contain angular controllers and another will have services.
Now let's start angular stuff. Before I proceed, there are many other ways to communicate with back end Api. We can make use of "$http" angular service or "ngResource" angular directive. If you are communicating with the REST Api then please go with "ngResource", because it reduces amount of code you right for communication. In this blog I am using using "$http" angular service. In next part of this blog I will try to explain you about "ngResource".
In web application, we usually need to communicate with Api from different locations of the angularjs controllers. So I prefer to wrap the web Api communication code in a angularjs service and call the service whenever you want. So I have created two folders within "Scripts". One folder will contain angular controllers and another will have services.
I have created two functions within "ApiCall" service, one is http GET and another one is http POST. For every web Api call we need Api controller name and method name. So whenever I call these methods, I will pass controller name, method name and data to post back to controller as parameters to the angular service to communicate with the back end.
Now create a angular module and controller and call the service methods, as shown in below image.
Actually, the drop down will load during angular controller load (same as page load event in web forms) using "GetApiCall" of service. And I am passing controller name ("Values") and method name (GetDropdownList) as parameter. Make sure that you have decorated the web Api method as "[HttpGet]" or "[HttpPost]" attributes for respective method. If every thing goes right you will get returned data from web Api to the angular service with status. Parse the returned data and assign it to the drop down.
While "Post API" button click, I am passing data object along with controller name and method name to the angular service. The angularjs "PostApiCall" will communicate with the "HttpPost" method "GetResult" and posts data object back to the controller. Again if everything goes right then data will be returned to angularjs service along with the status. Initially the message vale will be "Don't give up", but once we get data from web Api through post Api method, the message value will be changed.
I hope you have enjoyed the post and in next post I will try to explain "ngResource". Thanks for your patience.
No comments:
Post a Comment