这种架构在Angular 1.2及更高版本下是否仍然有效

Question

有许多使用$ resource的代码示例.我遇到过这个,代码很清楚:https://github.com/apotry/stockwatch

我喜欢这个例子,因为:

• 它与Rails后端交互,这就是我使用Angular的方式
• 它使用$ resource
• 它使用非休息路线(ohlc)
• 代码非常干净

调用定义的函数非常简单,如下面的控制器代码所示,但是在工厂中嵌入存储是个好主意吗？

我的问题是:现在Angular 1.2+包含了承诺,这种类型的代码是否仍然有效并被认为是一种好的做法？这段代码如何响应错误状态？

这里定义了资源

app.factory('Stock', ['$resource', function($resource) {
  function Stock() {
    this.service = $resource('/api/stocks/:stockId', {stockId: '@id'}, {'update': { method: 'PUT' }});
  };
  Stock.prototype.all = function() {
    return this.service.query();
  };
  Stock.prototype.delete = function(stId) {
    return this.service.remove({stockId: stId});
  };
  Stock.prototype.create = function(attr) {
    return this.service.save(attr);
  };
  Stock.prototype.update = function(attr) {
    return this.service.update(attr);
  };
  Stock.prototype.ohlc = function(stId) {
    return $resource('/api/stocks/:stockId/ohlc', {stockId: '@id'}).get({stockId: stId});
  }
  return new Stock; 
}]);

以下是删除,创建和自定义路由(ohlc)的示例:

  $scope.requestOHLC = function (stockid) {
    return Stock.ohlc(stockid);
  }

  $scope.createStock = function() {
    $scope.fetchYahooFinanceData($filter('uppercase')    ($scope.newCompany["symbol"])).then(function(result) {
      $scope.error = false;
      $scope.stocks.push(Stock.create(result));
      $scope.newCompany = '';
    }, function(error) {
      $scope.error = true;
    });
  };

  $scope.deleteStock = function(id, idx) {
    Stock.delete(id);
    $scope.stocks.splice(idx, 1);
  };

编辑

我试图找出一个简单明了的做法,在角度中使用基于资源的休息路线.

与上面的代码不同,但基于它.假设下面的代码使用的服务与上面的工厂基本相同.在此示例中,我调用一个REST资源来创建新资源(rails表条目),然后将新创建的id传递给另一个调用.请注意,createPanelHeader引用$ scope.selector.paneldata.primer3_parameter_id范围变量.不确定这是不是一个好习惯.

我发现这不起作用,除非我使用$ promise.then但这看起来有点令人费解.我是在正确的轨道上吗？

// Section: Create Panel header
createPrimer3Parameter = function() {
    primer3_parameter = Primer3Parameter.create().$promise.then(function(primer3_parameter){
    $scope.selector.paneldata.primer3_parameter_id = primer3_parameter.id;
    createPanelHeader();
    }, function() {
      alert('Error creating primer3parameter');
    })
};

评论

我真的只是想尝试一种从Rails API访问REST资源的简单方法,最多只有一级嵌套.我想我错过了一些东西,因为它看起来非常困难.

到目前为止我所听到的不是使用$资源,即使在1.2以下.我应该使用原始$ http或Restangular.

此外,似乎有一些影响Restangular的1.2变化.解决方案对我来说有点像黑客攻击:

https://github.com/mgonto/restangular#using-values-directly-in-templates

UPDATE

我没有真正100%清楚地离开,所以我发布了一个Bounty:https://bountify.co/write-an-angular-service-for-these-rails-routes-using-restangular

Answer 1

这种类型的代码仍然有效并被认为是一种好的做法吗？

此代码有效,但从1.2.0-rc3开始被视为已弃用.它适用于角度1.2和1.3的所有版本,但不包括1.3.0-beta10,其中自动承诺展开已被删除.

$scope.stocks.push(Stock.create(result));

在上面的行中,您已经创建了一个promise对象数组$scope.然后在index.html.erb中直接通过stock迭代器引用promise :

<li ng-repeat="stock in stocks">
      <div id='symbol'>
        {{stock.symbol}}
      </div>

处理promises的非弃用方法不允许您直接绑定到这样的promise.

这段代码如何响应错误状态？

该应用正在处理错误:

}, function(error) {
  $scope.error = true;
});

和这里:

<div ng-show="error">
    There was a problem with the Yahoo Finance API. Please try again later.
</div>

对于错误处理,您没有直接绑定到promise,因此在所有版本的angular中都可以正常工作.

更好的方法？

首先,在stockwatch示例中保存javascript目录结构.然后,请遵循此目录结构.最后,将Restangular集成到您的项目中.创建一个stockModel内部实例化Restangular对象的工厂,但返回将在promise解析后稍后填充的对象(model).而不是绑定部分中的promise,绑定未填充的结果对象.

.factory('stocksModel', function (Restangular) {
  var model = {};
  var rest_stocks = Restangular.all('stocks');

  model.doSomethingRESTful = function (...) {
    // return a promise in case the controller needs it
    return rest_carts.some_restangular_method(...)
      .then(function() {
        model.some_data_which_was_acquired_RESTfully = ...;
      });
  };

  return model;
});

在你的控制器中:

$scope.stocks = stocksModel;

在你的部分:

{{stocks.some_data_which_was_acquired_RESTfully}}