javascript - 如何使用 Restangular 将我的任务添加回我的列表

Question

所以这是我想要的请求明智的流程，初始页面加载 -> 获取任务 -> 添加任务。添加任务，不应要求随后获取其创建的任务或列表。

这是迄今为止我的 app.js 的相关部分

.config(function (RestangularProvider) {
RestangularProvider.setBaseUrl('http://localhost:8080');
RestangularProvider.addResponseInterceptor(function halInterceptor(data, operation, what) {
  var resp;

  if (operation === 'getList') {
    if (typeof data._embedded !== 'undefined') {
      resp = data._embedded[what];
      resp.page = data.page;
      return resp;
    }
    else {
      return [];
    }
  }

  return data;
});
})

这是我的 Controller

'use strict';
angular.module('myTaskApp')
.controller('Task', function ($scope, Restangular) {
var tasks = Restangular.all('task');

if ( typeof $scope.tasks === 'undefined' ) {
  $scope.tasks = tasks.getList().$object;
}

$scope.add = function add() {
  tasks.post($scope.task).then(function () {
    console.log('add task: ', $scope.task);
    // MAGIC HERE
  });
 };
})
;

这是创建的响应 header

HTTP/1.1 201 Created
Server: Apache-Coyote/1.1
Access-Control-Allow-Origin: *
Access-Control-Allow-: POST, GET, PUT, OPTIONS, DELETE
Access-Control-Allow-Headers: content-type, x-requested-with
Access-Control-Max-Age: 3600
Location: http://localhost:8080/task/5c75235d-d9f7-4cdd-98b4-3487603d8fcb
Content-Length: 0
Date: Sat, 20 Sep 2014 06:34:59 GMT

我认为我的部分问题是响应不会返回主体，但是，我可以预测它应该是什么样子，并且在获取位置后很容易制作。

{
"description" : "better",
"_links" : {
  "self" : {
   "href" : "http://localhost:8080/task/5c75235d-d9f7-4cdd-98b4-3487603d8fcb"
  }
 }
}

如何才能做到这一点，以便当我创建新资源时，我可以将其添加到 $scope.tasks 列表中，并将其反射(reflect)在我的 ng-repeat 中>。同样，这应该不需要进一步调用 API。

Answer 1

更新了我的提供程序，它现在包含一个 selfLink 定义和一个 post 处理程序。我从响应中检索位置并构造部分响应对象。

.config( function ( RestangularProvider ) {
RestangularProvider.setBaseUrl( 'http://localhost:8080' );
RestangularProvider.setRestangularFields({ selfLink: '_links.self.href' });
RestangularProvider.addResponseInterceptor( function halInterceptor( data, operation, what, url, res ) {
  console.log( data, operation, what, url, res );

  if ( operation === 'getList' ) {
    if ( typeof data._embedded !== 'undefined' ) {
      var resp = data._embedded[ what ];
      resp.page = data.page;
      return resp;
    }
    else {
      return [];
    }
  }

  if ( operation === 'post' && res.status == 201 ) {
    return {
      _links: {
        self: { href: res.headers('Location') }
      }
    };
  }

  return data;
} );

然后在我的 Controller 中，我所要做的就是使用 angular.extend 来组合响应并创建一个“智能对象”

angular.module('lifeManagerApp')
.controller('Task', function ($scope, Restangular) {
var tasks = Restangular.all('task');

if ( typeof $scope.tasks === 'undefined' ) {
  $scope.tasks = tasks.getList().$object;
}

$scope.add = function add() {
  tasks.post($scope.task).then(function ( task ) {
    var obj = angular.extend($scope.task, task);
    console.log('add task: ', obj );
    $scope.tasks.push(obj);
  });
};
});

值得注意的是，对于我的东西，我还必须 update CORS并确保 my controller wasn't loading multiple times