有许多使用 $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/