25 November 2016 Sudhanshu Ranjan 456

Create and consume a simple WCF Restful service using AngularJs application

In my Today article post, I’m going to explain How to create and consume a simple WCF Restful service using AngularJs application.

Follow the steps to implement

Step 1. Create a WCF Service application using Visual Studio. I have created a project with (CustomerService) named. I have renamed the service (MyService.svc) and interface (IMyService.cs).

Step 2.  In IMyService, I have declared new method and added the WebInvoke decoration, so that callers (like AngularJS and AJAX) can read our JSON formatted data.

[ServiceContract]
    public interface IMyService
    {

        [OperationContract]
        [WebInvoke(Method = "GET",
        ResponseFormat = WebMessageFormat.Json,
        RequestFormat = WebMessageFormat.Json,
        UriTemplate = "GetUser/")]        
        List<string> GetUser();

        // TODO: Add your service operations here
    }

Step 3. In MyService.cs I have defined the method.

        public List<string> GetUser()
        {
            List<string> username = new List<string>();
            username.Add("Sudhanshu Ranjan");
            username.Add("DotnetCube");
            username.Add("Amit Kumar");
            username.Add("Pawan Kumar");
            username.Add("Ravi Ranjan");
            username.Add("Rajesh kumar");
            username.Add("Suman singh");

            return username;
        }

Step 4. I have added some code inside <system.serviceModel> to define the behaviors and service endpoint.

<system.serviceModel>
    <behaviors>
      <serviceBehaviors>
        <behavior name="serviceBehavior">
          <!-- To avoid disclosing metadata information, set the value below to false before deployment -->
          <serviceMetadata httpGetEnabled="false" />
          <!-- To receive exception details in faults for debugging purposes, set the value below to true.  Set to false before deployment to avoid disclosing exception information -->
          <serviceDebug includeExceptionDetailInFaults="true" />
        </behavior>
      </serviceBehaviors>
      <endpointBehaviors>
        <behavior name="web">          
          <webHttp/>
          
        </behavior>
      </endpointBehaviors>
    </behaviors>
    <serviceHostingEnvironment multipleSiteBindingsEnabled="true" />
    <protocolMapping>
      <add binding="webHttpBinding" scheme="http"/>
    </protocolMapping>
    <services>
      <service behaviorConfiguration="serviceBehavior" name="CustomerService.MyService">
        <endpoint address="" binding="webHttpBinding" behaviorConfiguration="web" contract="CustomerService.IMyService"></endpoint>
      </service>
    </services>    
  </system.serviceModel>

 

Step 5. add Global.asax file

        protected void Application_BeginRequest(object sender, EventArgs e)
        {
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
            if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
            {
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "POST, PUT, DELETE");

                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
                HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
                HttpContext.Current.Response.End();
            }
         }

Step 6. Now your service has been setup for test. If you run the service using any browser you will see the output result.

 

Step 7. Now create an empty web application (Named CustomerRecord) using visual studio.

Add following file and directory(index.html, Script Directory) and add angularjs script refrence.

Load the AngularJS Libraries files
If you do not have the AngularJs library files, open the Package Manager Console. You will find it under View->Other->Package Manager Console.

Load the AngularJS files directly from NuGet by typing in the following command at the promt PM> Install-Package Angularjs.Core
This will add the AngularJS core library into the Scripts folder.

Step 8.  Now I am adding some HTML and angular script on index.html page. Using Angular script calling the Restful service method and fatching the data.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"" ng-app="AngularApp">
<head>
    <title></title>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular.min.js"></script>
</head>
<body>
    <div ng-controller="CustomerController">
        <ul ng-repeat="item in Customers">
            <li>{{item}}</li>
        </ul>
    </div>

    <script>
        var angular = angular.module("AngularApp", []);

        angular.service("customerService", function ($http) {
            this.getCustomerList = function () {
                var response = $http.get("http://localhost:24342/MyService.svc/GetUser");
                return response;
            }
        });

        angular.controller("CustomerController", function ($scope, customerService) {
            getAllCustomerList();
            function getAllCustomerList() {
                var response = customerService.getCustomerList();
                response.then(function (d) {
                    $scope.Customers = d.data;

                }, function () {
                    alert("Error in feaching the record");
                });
            }
        });


    </script>
</body>
</html>

Finally, you will get the result on screen as expected. Please feel free to ask any doubt.

You can share at :

About Author
Sudhanshu Kumar Ranjan | Lead Engineer at HCL Technologies | Expertise in Microsoft Technology | Author | Blogger | Programmer
Know More
Connect with him on Facebook | Google+ | LinkedIn | Twitter

Recommended Post

Leave a comment

About Dotnet Cube

It's my blog - Dotnet Cube, where you will learn and get solutions about programming, web designing and development. I started this website to share my knowledge and experience which might help someone.

You can get more details about me and my blog at About Us page.

Subscribe Newsletter

Subscribe to our monthly newsletter to get the latest industry news, Media Group updates and our current specials.

Follow On Us...

Home | About | Advertise | Copyrights | Privacy | Contact | Admin

Copyrights © 2015-2017 dotnetcube.com. All rights reserved