How To Call A Web Service Using Angularjs

Here are the steps,

Pace i: Open your Visual Studio, create a new empty Web Application and requite it a meaningful proper noun.

Step 2: In your Web.config file, add the connection cord to make the connexion with your SQL database.

Step 3: Create the database table. In my instance, I take used the tabular array chosen Employee.

Step 4: Go to the Visual Studio and open the Solution Explorer. Right click on the name of your Spider web Application and add a class file. Give it a meaningful name. I named it Employee.cs.

Step 5: Implement the properties of the Employee course. In my example, I have five properties, which all of them are public and auto implemented, as shown in the figure.

Footstep six: Now, we need to create the web service for our Web Application. To do that, correct click your Web Awarding and get to add new item, then yous will see the list of new items provided past the Visual Studio. Select Web service and give it a name. I named that as EmployeeService.asmx.

Step 7: Now, nosotros are going to implement the service using some ADO.Internet code. Earlier implementing the service, we need to import some ADO.Cyberspace namespaces.

Arrangement. Configuration;
System.Information.SqlClient;
System.Web.Script.Serialization;

These namespaces are used to convert data in to JSON format. We need to call this Web service from JavaScript. Hence, simply uncomment the following lawmaking line.

System.Web.Script.Services.ScriptService

Next, rename the part and give information technology a proper noun as your ain. I named the function in my instance as GetAllEmployees.

This function is not going to return anything. It'southward actually going to write employee data in a JSON format. Hence, nosotros need to change the return type of the office to Void.

Step 8: To cheque the Web service, right click on the Web service file and view it on the Browser. You will encounter the following, equally the result. Click on the method GetAllEmployees. Afterwards clicking the Invoke button, you lot will see the employee data in JSON format.

Footstep 9: If you get the following event, it means that we have created the Web service successfully.

At present, we need to create the Angularjs controller to phone call the Web Service.

Pace ten: In the controller, nosotros need to ascertain the $http object to call our Spider web method with the help of using following line of lawmaking:

$http.post( 'EmployeeService.asmx/GetAllEmployees' )

This request will exist executed asynchronously. Information technology means the information volition not be immediately available. Hence, we demand to utilize promise to go the response. We can implement promises using "then" fundamental word in AngularJs. In the then function we use our $telescopic object to get the response. When the request completes successfully, the function is called.

$scope.employee = responce.data;

Step 11: Side by side, nosotros need to create the HTML page to view our employee data.

In alphabetize.heml page, we demand to use our Athwart Model name and controller name in ng-app and ng-controller directives respectively.

Then save changes and run the Spider web Application but you won't get the expected outcome based on some reason.

But go to inspect the elements, select panel and you will meet the Mistake 500 that calls the internal Server error. It is because we have used Http Get method to telephone call the Web request. Alter the become method every bit Postal service and then refresh the Browser and you lot will run into employee data, which we expected to display.

Footstep 12: If nosotros need to apply get method to call the Web request, we need to exercise some modification to the spider web.config file by adding following lawmaking lines.