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) {
    3. $scope.formdata = {};
    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