CODEWITHSUNDEEP
javascriptangularjshtmlrest
1elf
1elf

Reputation: 23

AngularJS $http.get example

I try to get into angularJS's http.get

I have a simple restful service.

http://groupify-webtechproject.rhcloud.com/api/test/helloworld

will return a "Hello World" plain text. I want to retrieve that with angularjs and and alert it or even better display it on my index.html

But after 2 hours of trying and not getting a step closer maybe one of you can help.

These are my HTML5 and js code snippets:

angular.module('myApp', []).controller('Hello', function ($scope, $http) {
    $http.jsonp('http://groupify-webtechproject.rhcloud.com/api/test/helloworld').
        success(function(data) {
			alert("success");
            alert(data);
            $scope.data = data;
            alert(data);
		}).
		error(function(data, status) {
			alert("error");
			alert(data);
        });
});
<!doctype html>
<html ng-app="myApp">
<head>
    <title>Hello AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular-resource.min.js"></script>
    <script src="main.js"></script>
</head>

<body>
<div ng-controller="Hello">
    <p>{{data}}</p>
</div>
</body>
</html>

Upvotes: 0

Views: 626

Answers (1)

Simon Wicki
Simon Wicki

Reputation: 4049

you embedded agular 1.* instead of a newer version. also your resource is not available anymore (404).

other than that, the code works.

angular.module('myApp', []).controller('Hello', function ($scope, $http) {
    $http.jsonp('http://groupify-webtechproject.rhcloud.com/api/test/helloworld').
        success(function(data) {
			console.log('success', data);
            $scope.data = data;
		}).
		error(function(data, status) {
			console.log('error', data, status);
            $scope.data = 'error with status code: ' + status;
        });
});
<!doctype html>
<html ng-app="myApp">
<head>
    <title>Hello AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-resource.min.js"></script>
</head>

<body>
<div ng-controller="Hello">
    <p>{{data}}</p>
</div>
</body>
</html>

Upvotes: 1

Related Questions