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代码中，您正在创建一个＆＃39; / tasks＆＃39;您尝试使用角度代码命中的端点。当您尝试在浏览器中运行此功能时，您只需按下“/”任务即可。返回预期响应的api端点。您需要在Spark中创建另一个端点，该端点将提供相应的HTML和JavaScript代码。

Answer 2

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

因此，为了从$http请求中获取数据，我会做类似的事情，

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

result.data是$http上的数据结构与我在代码中看到的不同。

尝试使用console.log(data)来查看通话回来的内容。

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

2 个答案: