Post
Ask Question

Call WCF Service in AngularJS - Part 2

I have used the following technologies in the article:

  • AngularJS
  • jQuery
Here's the link for the previous part of this series: How to call WCF Service Using jQuery - Part 1.

This image contains my solution explorer.

demo  
 
AngularDemo.html file
  •  ng-app is an application name in angular which is unique in project.
    1. <html xmlns="http://www.w3.org/1999/xhtml" ng-app="AngularApp">   
App.js file  
  •  Here we can integrate angular project name in app.js.
    1. var app = angular.module('AngularApp', []);    
AngularDemo.html file
  • ng-controller  is a specific controller for my project which I define in my body tag. 
    1. <body ng-controller="AngularController">     
Controller.js 
  •  Here  I used controller as an intermediate between service.js and app.js.

  •  The following GET method is used for getting all the records from service.
    1. app.controller('AngularController', ['$scope', '$http', 'AngularService', function ($scope, $http, AngularService) {    
    2.     
    3.     $scope.formdata = {};    
    4.     
    5.     //load data    
    6.     AngularService.get().success(function (response) {    
    7.         $scope.Products = JSON.parse(response.d);    
    8.     });  
Service.js 
  •  Below i declared get service for fetching records from service.

  •  WCF Service URL is taken from my previous article.

  •  So you can download my service from there and used here. 
    1. app.factory('AngularService', ['$http', function ($http) {    
    2.     return {    
    3.         //load data service    
    4.         get: function () {    
    5.             return $http({    
    6.                 method: 'POST',    
    7.                 headers: {    
    8.                     'Content-Type': 'application/json; charset=utf-8'    
    9.                 },    
    10.                 url: 'http://www.wcfdemo.somee.com/ProductService.svc/LoadAllProductDetail',    
    11.                 data: {}    
    12.             });    
    13.         }    
    14.   };    
    15. }]);  
 AngularDemo.html file
  •  ng-repeat is a working like for, foreach loop in angular
  •  ng-click is like onclick event in javascript.
  •  {{  }}   is a syntax for displaying data.
    1. <table class='table table-bordered'>  
    2.     <tbody>  
    3.         <tr>  
    4.             <th>Name</th>  
    5.             <th>Description</th>  
    6.             <th colspan="2">Action</th>  
    7.         </tr>  
    8.         <tr ng-repeat="Product in Products">  
    9.             <td>{{ Product.ProductName}}</td>  
    10.             <td>{{ Product.ProductDescription}}</td>  
    11.             <td><span><a href="javascript:void(0);" ng-click="edit(Product);">    
    12.                        <img width="16" height="16" alt="Close" src="Image/Edit.jpg" /></a></span></td>  
    13.             <td><span><a href="javascript:void(0);" ng-click="delete(Product.Id);">    
    14.                        <img width="16" height="16" alt="Close" src="Image/close.png" /></a></span></td>  
    15.         </tr>  
    16.     </tbody>  
    17. </table>   
Output 
 
You can also test the output here.

output 


Similar Articles