标签: restangular

我正在使用带有AngularJS应用程序的Restangular并从一个简单的CRUD应用程序开始.我遇到的问题是了解如何将新项目添加到预先存在的集合中.

在控制器内,预先存在的集合在服务中获得并在范围内可用:

$scope.data.items = Restangular.all('items');

通过表单创建一个新项目并在服务器上创建:

$scope.data.items.post(newitem);

我想将这个新项目添加到预先存在的集合中但不确定如何.该restangular样品只是调用Restangular.all('items')一次,因为所有的信息存在,这似乎非常浪费.理想情况下,我想做这样的事情:

$scope.data.items.post(newitem).then(function(response) {
  $scope.data.items.push(newitem);
});

但这不起作用.我应该如何添加到集合中,而不是每次创建新项目时都重新获取整个集合？

我正在创建一个RESTFUL Web服务,它从一个使用restangular服务的angularjs应用程序调用.REST服务要求每个请求都发送一个身份验证令牌.如何使用restangular通过每个请求发送此消息？

查看文档,我可以看到有一个setRequestInterceptor方法,我可以在配置中设置,看起来我可以使用:

RestangularProvider.setFullRequestInterceptor(function(element, operation, route, url, headers, params) {
      return {
        element: element,
        params: params,
        headers: _.extend(headers, {Authorization: 'Basic ' +  base64.encode('sometoken')})
      };
    });

我无法通过将它放入我的配置来实现甚至调用它.我不知道需要从哪里注入RestangularProvider提供程序才能让htis工作？我还想创建一个外部服务,它读取已经生成的令牌,我不知道在哪里放这个.有没有这个在任何地方工作的例子？我只能找到使用$ ngresource的场景.

任何帮助赞赏.

我对AngularJS比较陌生,我一直在尝试各种方法来使用Restangular保持我的AngularJS CRUD方法DRY,所以我很感激社区的任何建议.

我有很多API端点,每个我都希望显示一个项目列表,允许选择每个项目(以显示该项目的详细信息)并删除,以及向列表中添加项目.

我到目前为止尝试过的方法都是非常非干的,没有适当地挂钩到范围内,或者有点hacky ......

包裹Restangular

将Restangular包装到服务中,并使用addElementTransformer在返回的集合上设置其他方法似乎是一种不错的方法; 在select和add方法清洁,从模板很容易实现,而当承诺解决自动更新列表.但是,因为该delete方法实际上是从元素范围(集合的子集)中调用的,所以在删除后更新列表需要在服务中注入一个非常可疑的$ scope - 我能想到的最好的方法如下:

(注意:通过仅说明单个API端点/控制器/模板,我使示例更容易阅读)

应用程序/ JS/services.js

function ListTransformer(collection) {
    collection.selected = {}
    collection.assignedTo = {}
    collection.assignedName = ""

    collection.add = function(item) {
        collection.post(item)
        .then(function(response){
            collection.push(response);
        })
    };
    collection.delete = function(item, scope) {
        item.remove()
        .then(function(response){
            console.log(item)
            console.log(collection)
            collection.assignedTo[collection.assignedName] = _.without(collection, item);
        })
    };
    collection.select = function(item) {
        this.selected = item;
    };
    collection.assignTo = function(scope, name) {
        scope[name] = collection;
        collection.assignedTo = scope
        collection.assignedName = name
    };
    return …

为了将文件作为表单的一部分发送,我将内容类型更改为"multipart/form-data",但是当我检查控制台时,它仍然使用application/json; charset = utf-8和Node.js(与Sails.js框架)打印错误,说它是无效的JSON.

这是代码:

$rootScope.objects.user.withHttpConfig({
    transformRequest: angular.identity
}).customPUT($scope.objects.user, "", { // user object contains a file
    'Content-Type': "multipart/form-data" // should change content-type. I've tried using `undefined` as well
}).then(function(resp) {
    if (resp == "OK") {
        $scope.successes = [{
            msg: "Saved"
        }];
    }
}, function(err) {
    console.log(err);
    $scope.errors = err.data.errors;
});

Google Chrome中的"检查网络请求"标签显示:

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:30.0) Gecko/20100101 Firefox/30.0
Referer:    http://localhost:1337/user/settings
Host:   localhost:1337
DNT:    1
Content-Type:   application/json;charset=utf-8
Content-Length: 505679
Connection: keep-alive …

我是Javascript和AngularJS的新手,这个让我挠头:/

前提

• REST服务从后端提供我的数据
• AngularJS 1.2.21和Restangular 1.4.0
• 一个AngularJS控制器,它要求服务提供所提供的加香版本

是)我有的

这是有问题的方法:

   service.getSlices = function() {

        Restangular.all('entries').getList().then(function(entries) {

            //some rather complex modification of the backend data go here
            //...

            return  resultOfModification; //this is what should be returned for getSlices();
        })

        //I want the resultOfModification to be returned here


    };

这个问题

基本上我想等到getSlices()承诺得到解决resultOfModification才能在实际计算时返回我的承诺.

另外的情况
我也可以想象返回一个承诺getSlices(),然后提供resultOfModification.但是我担心我不太了解这个和/或同时太沮丧/厌倦.

答案和任何建议都是受欢迎的,特别是指向良好的阅读材料.谢谢

所以我开始研究一个自己的项目,我正在开发我的网站的前端.我开始使用PHP Laravel后端,并为我的数据库设置了一个API服务.

考虑到混合应用程序,我开始在我的前端Web应用程序中使用angularjs.为了使用REST与我的API进行通信,我遇到了restangular,这非常好,因为它正是我所希望的.

只有一个困扰我的问题,没有真正的"指南"如何设置可维护的模块/工厂/提供者/服务来复制您的api系统将数据存储在本地存储或设置简单系统,您可以注入将"模型"转换为控制器,只需Model->getAll()取出所有模型即可.

因为我是angularJS的新手,因此我对如何解读这个问题的了解非常有限.到目前为止,我已经做到了这一点:

主要应用

var client = angular.module('clientApp', ['angulartics', 'angulartics.google.analytics', 'ngRoute', 'restangular']);

client.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/', {
            controller: 'flongsController',
            templateUrl: '/client_partials/Homepage.html'
        })
        .when('/flongs/:slug', {
            controller: 'flongsController',
            templateUrl: 'client_partials/Flong.html'
        })
        .otherwise({
            redirectTo: '/'
        });
}]);

flongsController

client.controller('flongsController', ['$scope', 'Restangular', '$routeParams', function ($scope, Restangular, $routeParams) {
    //controller variables
    var baseFlongs = Restangular.all('flongs');

    $scope.flongs = {};

    init();

    function init() {
        baseFlongs.getList().then(function(flongs){
            $scope.flongs = flongs;
        });
    }

}]);

所以,我的问题很简单:

如何改进此代码以使其更高效,更易于维护？

在此先感谢Nick van der Meij

      EC2Restangular.setBaseUrl('localhost:9000/');
      EC2Restangular.setDefaultRequestParams({
        "Id": ID
      });

有没有办法从Restangular中的baseUrl中删除默认查询参数？

我们正在重建当前的产品.

1.)主要关注UI, Graphical Representation

2.)UI应该是responsive,widget类似的结构.

3.)图表应该重新加载数据 every n seconds

我已经通过几个图表API,

角nvd3

fusioncharts //不是免费的

Rest Service将被曝光,Json数据将被返回.将使用多种类型的图.(酒吧/尖刺等)

需要帮助选择可以与Rest Angular集成的图表的良好API.

对于小部件结构的任何更好的结构,应根据屏幕进行调整.小部件也将出现在大屏幕上.

如果您最近通过凉亭更新了restangular,它将安装最新的lodash - 新的4.0.然而这是一个问题,因为restangular/angular现在抛出错误 - "_.contains()不是函数."

你怎么解决？

在我的角度4应用程序中,我正在使用ngx-restangular来处理所有服务器调用.它返回可观察的结果,并且该模块具有处理错误的钩子(如401等).

但是从文档中,我可以处理403(401)所以:

  RestangularProvider.addErrorInterceptor((response, subject, responseHandler) => {
    if (response.status === 403) {

      refreshAccesstoken()
      .switchMap(refreshAccesstokenResponse => {
        //If you want to change request or make with it some actions and give the request to the repeatRequest func.
        //Or you can live it empty and request will be the same.

        // update Authorization header
        response.request.headers.set('Authorization', 'Bearer ' + refreshAccesstokenResponse)

        return response.repeatRequest(response.request);
      })
      .subscribe(
        res => responseHandler(res),
        err => subject.error(err)
      );

      return false; // error handled
    }
    return true; // error …