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

Question

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

我从简单的任务开始:

@Data
public class Todo {

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

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

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 代码。