Javascript – Consuming Wcf Data service in AngularJS

angularjs, c++, javascript, json, rest

Im new to AngularJS. I am trying to consume Wcf Data service with AngularJS. I keep failing as I am not sure where things are going wrong. Could someone please help me on this. Thanks.

The data service will return Json if queried like this:

http://localhost/Wcf/DataService/Report/ReportService.svc/SystemCategories?$format=json

Sample Json returned:

{"odata.metadata":"http://localhost/Wcf/DataService/Report/ReportService.svc/$metadata#SystemCategories","value":[    {"ID":1,"SystemName":"System-A","Description":"System A"},    {"ID":2,"SystemName":"System-B","Description":"System B"},    {"ID":3,"SystemName":"System-C","Description":"System C"}]}

The code (sample from w3school)

<!DOCTYPE html><html><script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script><body><div ng-app="myApp" ng-controller="systemCat"> <ul>  <li ng-repeat="x in categories">    {{ x.ID + ', ' + x.SystemName }}  </li></ul></div><script>var app = angular.module('myApp', []);app.controller('systemCat', function($scope, $http) {  $http.get("http://localhost/Wcf/DataService/Report/ReportService.svc/SystemCategories?$format=json")  .success(function (response) {$scope.categories = response.value;});});</script></body></html>

Best Solution

This code should work, if not take a look at the javascript console and whatever errors you find there would give you some idea as to what is going wrong.

<script>  var app = angular.module('myApp', []);  app.controller('systemCat', function($scope, $http) {    $http.get('http://localhost/Wcf/DataService/Report/ReportService.svc/SystemCategories?$format=json')      .success(function (data) {        console.log(data);        $scope.categories = data.value;      })      .error(function (data) {        console.log('error!');      });  });</script>