AngularJS $http.get 示例

Question

我试着进入 angularJS 的 http.get

我有一个简单的 restful 服务。

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

将return一个"Hello World"纯文本。我想用 angularjs 检索它并提醒它，甚至更好地在我的 index.html

上显示它

但经过 2 小时的尝试，但没有更进一步，也许你们中的某个人可以提供帮助。

这些是我的 HTML5 和 js 代码片段：

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>

Answer 1

您嵌入了 agular 1.* 而不是更新的版本。您的资源也不再可用 (404)。

除此之外，代码有效。

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>

AngularJS $http.get 示例

AngularJS $http.get example

html

javascript

rest

angularjs