javascript - 这个架构在 Angular 1.2 及以上版本下是否仍然有效

标签 javascript ruby-on-rails angularjs resources

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

我喜欢这个例子,因为:

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

调用定义的函数非常简单,如下面的 Controller 代码所示,但是将保存嵌入工厂是个好主意吗?

我的问题是:既然 Angular 1.2+ 包含了 promises,这种类型的代码是否仍然有效并被认为是一种好的做法?此代码将如何响应错误状态?

这里定义了资源

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);
  };

编辑

我正在尝试制定一个简单明了的实践,以在 Angular 中使用基于 $resource 的休息路线。

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

我发现除非我使用 $promise.then 否则这将不起作用,但这似乎有点令人费解。我走在正确的 rails 上吗?

// 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 层嵌套。我想我遗漏了一些东西,因为它看起来非常困难。

到目前为止,我听到的是不要使用 $resource,即使是在 1.2 下也是如此。我应该改为使用原始 $http 或 Restangular。

此外,似乎有一些 1.2 更改会影响 Restangular。该解决方案对我来说有点像破解:

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

更新

我并没有真正 100% 清楚,所以我发布了赏金:https://bountify.co/write-an-angular-service-for-these-rails-routes-using-restangular

最佳答案

is this type of code still valid and considered a good practice?

此代码有效,但 considered deprecated as of 1.2.0-rc3 .它适用于所有版本的 angular 1.2 和 1.3,直到 but not including 1.3.0-beta10, where automatic promise unwrapping has been removed。 .

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

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

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

处理 promise 的非弃用方式不允许您像这样直接绑定(bind)到 promise 。

How would this code respond to an error state?

应用正在处理此处的错误:

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

这里:

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

对于错误处理,您没有直接与 promise 绑定(bind),因此这在所有版本的 angular 中都可以正常工作。

更好的方法?

首先,搁置stockwatch 示例中的javascript 目录结构。然后,follow this directory structure反而。最后整合Restangular进入你的项目。创建一个 stockModel 工厂,在内部实例化一个 Restangular 对象,但返回将在 promise 解析后稍后填充的对象 (model)。不要在您的部分中绑定(bind) promise ,而是绑定(bind)未填充的结果对象。

.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;
});

在你的 Controller 中:

$scope.stocks = stocksModel;

在你的部分:

{{stocks.some_data_which_was_acquired_RESTfully}}

关于javascript - 这个架构在 Angular 1.2 及以上版本下是否仍然有效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24184845/

相关文章:

javascript - webview无法使用java代码android刷新

javascript - 在部分包含选项后获取选项结束标记的数组

angularjs - 禁用 AngularJS 中的 YouTube 视频在 Bootstrap 模式下播放

javascript - 在 AngularJS 中的页面之间共享数据返回空

javascript - JavaScript 中调用字段的方法

Javascript 图像处理?逐个像素

javascript - 根据子元素的内容对父元素进行排序 - javascript/jquery

ruby-on-rails - 将数组的数组拆分,[0] 拆分为一个,[1] 拆分为另一个

ruby-on-rails - Rails 如何测试一个方法接收 block 参数与 Rspec

javascript - AngularJS ng-repeat ng-click