Robben Robben - 7 months ago 12
Java Question

My AngularJS client isn't consuming my RESTful call

I am trying to get my feet wet on angularjs that consumes a RESTful service, however, I am running into an issue.

I have a REST call, http://localhost:8080/application/webapi/myApp/, that returns the following JSON:

{
"content": "Hello World",
"id": 1
}


Also, I have the following angularjs controller:

var myApp = angular.module("myModule", [])
.controller("Hello", function($scope, $http) {
$http.get('http://localhost:8080/application/webapi/myApp/').
success(function(data) {
$scope.greeting = data;
});
});


And my index.html has the following,

<div ng-controller="Hello">
<p>The ID is {{greeting.id}}</p>
<p>The content is {{greeting.content}}</p>
</div>


where the ng-app is defined in the body tag.

But when I a run my index.html, on my Tomcat server, it doesn't consume my REST call. Instead, it produces blanks where my binding expressions are.

My index.html looks like this:

My First Application!

The ID is

The content is


I am not sure why it doesn't consume my REST call?

My index.html should say,

My First Application!

The ID is 1

The content is "Hello World"


but it doesn't :(.

I place console.log(result.data) and console.log(result)

enter image description here

Answer

From the angular DOC

The $http legacy promise methods success and error have been deprecated. Use the standard then method instead. If $httpProvider.useLegacyPromiseExtensions is set to false then these methods will throw $http/legacy error.

Try like this

$http.get('http://localhost:8080/application/webapi/myApp/').
then(function(result) {
    $scope.greeting = result.data[0];
});
Comments