如何为 REST json 数据创建一个基本的 angularjs 页面？答案

【问题标题】：How to create a basic angularjs page for REST json data?如何为 REST json 数据创建一个基本的 angularjs 页面？
【发布时间】：2015-08-07 13:49:11
【问题描述】：

我正在尝试创建一个显示由http://rest-service.guides.spring.io/greeting 检索到的数据的基本网页。

json输出为：

{"id":2273,"content":"Hello, World!"}

我正在使用以下 html 页面：

<body ng-app="hello">
    <div class="container">
        <h1>Greeting</h1>
        <div ng-controller="home" ng-cloak class="ng-cloak">
            <p>The Id is: {{greeting.id}}</p>
            <p>The content is: {{greeting.content}}</p>
        </div>
    </div>
    <script src="js/angular-bootstrap.js" type="text/javascript"></script>
    <script src="js/hello.js"></script>
</body>

还有 hello.js：

var myApp = angular.module('hello', []);

myApp.controller('home', ['$scope', function($scope) {
    $scope.greeting = {};

    $http.get('http://rest-service.guides.spring.io/greeting')
        .success(function(data, status, headers, config) {
            $scope.greeting = data;
        });
}]);

结果：占位符 greeting.id/content 未解析。这里可能有什么问题？

【问题讨论】：

如果在 http 块上方，您写：$scope.greeting = {"id": "test", "content": "test2"}; 您可以检查 $http 请求是否有问题 - 是吗？
@brendan 是的，在这种情况下一切正常。
好的。那么如果不是$scope.greeting = data;，而是$http 中的console.log(data); 呢？抱歉，如果您已经完成了所有这些操作，但它可能会更好地为我们阅读而隔离问题
在执行 get 请求时收到Access-Control-Allow-Origin header missing。

标签： javascript json angularjs rest

【解决方案1】：

你没有注入$http服务。

myApp.controller('home', ['$scope, $http', function($scope, $http) {...}]);

编辑

还值得一提的是 cvverb 在他的answer 中所说的话。在 Angular 1.4 中，您应该将 .success() 替换为 .then()，因为 .success 已被弃用。

现在的用法应该是：

$http.get(url).then(
  function(data){
     //success callback
  }, 
  function(){
     //error callback
  });
);

【讨论】：

嗯，现在占位符不见了，但是我仍然没有看到任何数据显示。只是空白。
作为一般说明，如果您看到占位符，则 Angular 遇到了错误，您可以在浏览器的 js 控制台中检查。
控制台日志，看看你在回调函数中得到了什么......检查你的控制台
在控制台我可以看到cross origin blocked: Missing Cross-Origin Resource Sharing (CORS) Response
@membersound，这可能是因为外部服务器不允许跨源请求。搜索一下这个问题，你会发现比我给你的解释更好；）

【解决方案2】：

将您的 $http 调用更改为以下。您还没有在控制器中注入 $http。

 $http.get('http://rest-service.guides.spring.io/greeting')
        .success(function(data, status, headers, config) {
            $scope.greeting = data.data;
        });

【讨论】：

没有改变任何东西。
有什么区别？
响应中没有嵌套的data。

【解决方案3】：

将您的.success() 更改为.then()，.success() 方法已被弃用，其工作方式与普通承诺不同。

如果你想继续使用它，你可以这样使用它。

 $http.get('http://rest-service.guides.spring.io/greeting')
        .success(function(data) {
            $scope.greeting = data;
        });

另见$http的文档。

【讨论】：