从angularjs调用RESTful服务的正确方法

时间:2014-11-21 17:14:19

标签: javascript json angularjs rest

我正在尝试使用RESTful api做一个简单的待办事项应用程序。我的restful服务返回以下JSON,

[{"title":"completed this","completed":false},{"title":"and this too","completed":false}]

作为application / json返回而不是字符串。

我的观点如下,

<div class="container" ng-app="todomvc">
        <div id="todoapp" ng-controller="TodoCtrl">
             <div class="row" ng-repeat="todo in todos">         
             {{todo.title}}
             </div>
        </div>
</div>

我有以下带控制器和工厂的JS代码,

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

todomvc.factory('todoREST', function ($q,$http) {
 function get(){
   return $http.get('http://localhost/test.php');
 }
 return{get:get};
});

todomvc.controller('TodoCtrl', function TodoCtrl($scope, $location, $filter, todoREST) {
    var todos = $scope.todos = todoREST.get().then(function(data){
    todos = data.data;
    console.log(todos); // Data available here
    });
});

加载时我无法在页面中获取标题。我究竟做错了什么?我的方法是进行RESTful呼叫的正确方法吗?

这是我所做的一个链接, http://plnkr.co/edit/kaSCe9HoMPEK1hD4QgJl?p=preview

1 个答案:

答案 0 :(得分:2)

您将$ scope.todos分配给服务返回的承诺,而不是来自回调的数据。

尝试

todoREST.get().then(function(data){
    $scope.todos = data.data;
    console.log($scope.todos); // Data available here
});

http://plnkr.co/edit/C3fbK3NicU7XkdHAbzCr?p=preview