如何从 Spark 获取数据并使用 Angular 显示

Question

作为 Spark 框架和 AngularJS 的初学者，我试图构建一个简单的 REST 应用程序。但是我显然无法从服务器检索数据并使用 Angular 进行显示。

我从简单的任务开始：

@Data
public class Todo {

private String title = "foo";
private String description= "bar" ;
}

为了在浏览器中显示待办事项，我发送一个 JSON 对象作为获取请求的响应。

get("/tasks", (request, response) ->  {
   response.type("application/json");

   Todo todo = new Todo();
   ObjectMapper mapper =  new ObjectMapper();
   mapper.configure(SerializationFeature.INDENT_OUTPUT, true);
   String data = mapper.writeValueAsString(todo);
   return data;
});

Angular 部分如下所示：

(function() {
   var app = angular.module('todoapp', []);

   app.controller('TaskController', ['$http', function($http) {
       var store = this;
       store.tasks = [];

       $http.get('/tasks').success(function(data) {
           store.tasks = data;
       });
   }]);

})();

还有 index.html ：

<ul ng-controller="TaskController as taskCtrl">
   <li ng-repeat="task in taskCtrl.tasks">{{task.title}}, {{task.description}}</li>
</ul>

运行Spark并在浏览器中输入http://localhost:4567/tasks后，只显示JSON表示：

{
"title": "foo",
"description": "bar"
}

我做错了什么？

Answer 1

在您的 Spark 代码中，您正在创建一个“/tasks”端点，您正试图使用​​您的 Angular 代码来命中它。当您尝试在浏览器中运行它时，您只是点击了返回预期响应的“/tasks”api 端点。您需要在 Spark 中创建另一个端点，它将提供适当的 HTML 和 JavaScript 代码。

Answer 2

我不确定您使用的是哪个版本的 angular，但在我使用的版本中 $http 返回的数据结构与您显示的不同。

所以要从$http 请求中获取数据，我会执行类似的操作，

$http({
    url: '/tasks',
    method: 'get'
}).then(function(result){
    $scope.tasks = result.data;
});

result.data 是 $http 返回的数据结构与我在您的代码中看到的不同的地方。

尝试console.log(data) 来查看电话回电的情况。