了解$资源工厂和@ preFIX [英] Understanding the $resource factory and the @ prefix

问题描述

由于以下服务：

vdgServices.factory（'UserService'，['$资源'，
功能（$资源）{    返回$资源（API /用户/：身份证'，{}，{        的doGet：{
            方法：GET，
            PARAMS：{ID：'@userId'}
        }，        doPost方法：{
            方法：POST，
            PARAMS：{ID：'@userId'}
        }，        doPut：{
            方法：把'，
            PARAMS：{ID：'@userId'}
        }，        doDelete：{
            方法：删除，
            PARAMS：{ID：'@userId'}
        }    }）;}]）;


我遵守下列请求的URL：

VAR PARAMS = {用户名：42};
变种的onSuccess =函数（）{的console.log（OK）; };
VAR的onError =函数（）{的console.log（KO）; };UserService.doGet（参数，可以的onSuccess，onError的）;
//请求API /用户？用户id = 42UserService.doPost（参数，可以的onSuccess，onError的）;
//请求API /用户/ 42UserService.doPut（参数，可以的onSuccess，onError的）;
//请求API /用户/ 42UserService.doDelete（参数，可以的onSuccess，onError的）;
//请求API /用户？用户id = 42


任何人都可以解释为什么：ID URL参数会有时 42 替换，有时没有。

在理想情况下，我想将其替换为任何方法，即该请求的URL变成API /用户/ 42每次。

解决方案

AngularJS $资源

  

如果该参数值是与@ pfixed然后该参数的值将从数据对象上的相应的键可采取$ P $（为有用的非GET操作）。

您已经在错误的地方放PARAMS，你应该实现这样的

  .factory（'UserService'，函数（$资源）{
    返回$资源（API /用户/：身份证'，{ID：'@id'}，{        的doGet：{
            方法：GET
        }，        doPost方法：{
            方法：POST
        }，        doPut：{
            方法：把'
        }，        doDelete：{
            方法：删除
        }    }）;
}）;
 

允许测试

 描述（'userApp'，函数（）{
    VAR UserService
      ，$ httpBackend
    ;    beforeEach（函数（）{
        模块（'userApp'）;
    }）;    beforeEach（注（功能（_UserService_，_ $ httpBackend_）{
        UserService = _UserService_;
        $ httpBackend = _ $ httpBackend_;
    }））;    描述（用户资源 -  API /用户，功能（）{
        它（'调用get  -  API /用户/ {ID}'，函数（）{
            。$ httpBackend.expectGET（API /用户/ 42）响应（200）;            UserService.doGet（{ID：42}）;            $ httpBackend.flush（）;
        }）;        它（'调用POST  -  API /用户/ {ID}'，函数（）{
            。$ httpBackend.expectPOST（API /用户/ 42）响应（200）;            UserService.doPost（{ID：42}）;            $ httpBackend.flush（）;
        }）;        它（'呼叫PUT  -  API /用户/ {ID}'，函数（）{
            。$ httpBackend.expectPUT（API /用户/ 42）响应（200）;            UserService.doPut（{ID：42}）;            $ httpBackend.flush（）;
        }）;        它（'调用delete  -  API /用户/ {ID}'，函数（）{
            。$ httpBackend.expectDELETE（API /用户/ 42）响应（200）;            UserService.doDelete（{ID：42}）;            $ httpBackend.flush（）;
        }）;
    }）;
}）;
 

的jsfiddle： http://jsfiddle.net/krzysztof_safjanowski/vbAtL/

Given the following service:

vdgServices.factory('UserService', ['$resource',
function($resource) {

    return $resource('api/users/:id', {}, {

        doGet: {
            method: 'GET',
            params: { id: '@userId' }
        },

        doPost: {
            method: 'POST',
            params: { id: '@userId' }
        },

        doPut: {
            method: 'PUT',
            params: { id: '@userId' }
        },

        doDelete: {
            method: 'DELETE',
            params: { id: '@userId' }
        }

    });

}]);

I observe the following requested URLs:

var params = { userId: 42 };
var onSuccess = function() { console.log("OK"); };
var onError = function() { console.log("KO"); };

UserService.doGet(params, onSuccess, onError);
// requests api/users?userId=42

UserService.doPost(params, onSuccess, onError);
// requests api/users/42

UserService.doPut(params, onSuccess, onError);
// requests api/users/42

UserService.doDelete(params, onSuccess, onError);
// requests api/users?userId=42

Can anybody explain why the :id URL parameter gets sometimes replaced by 42, sometimes not?

Ideally, I would like it to be replaced for any method, i.e. that the requested URL becomes "api/users/42" everytime.

解决方案

AngularJS $resource

If the parameter value is prefixed with @ then the value of that parameter will be taken from the corresponding key on the data object (useful for non-GET operations).

You have put params in the wrong place, you should implement like this

.factory('UserService', function($resource) {
    return $resource('api/users/:id', { id: '@id' }, {

        doGet: {
            method: 'GET'
        },

        doPost: {
            method: 'POST'
        },

        doPut: {
            method: 'PUT'
        },

        doDelete: {
            method: 'DELETE'
        }

    });
});

Lets test it

describe('userApp', function () {
    var UserService
      , $httpBackend
    ;

    beforeEach(function () {
        module('userApp');
    });

    beforeEach(inject(function (_UserService_, _$httpBackend_) {
        UserService = _UserService_;
        $httpBackend = _$httpBackend_;
    }));

    describe('User resource - api/users', function () {
        it('Calls GET – api/users/{id}', function() {
            $httpBackend.expectGET('api/users/42').respond(200);

            UserService.doGet({id: 42});

            $httpBackend.flush();
        });

        it('Calls POST - api/users/{id}', function() {
            $httpBackend.expectPOST('api/users/42').respond(200);

            UserService.doPost({id: 42});

            $httpBackend.flush();
        });

        it('Calls PUT - api/users/{id}', function() {
            $httpBackend.expectPUT('api/users/42').respond(200);

            UserService.doPut({id: 42});

            $httpBackend.flush();
        });

        it('Calls DELETE - api/users/{id}', function() {
            $httpBackend.expectDELETE('api/users/42').respond(200);

            UserService.doDelete({id: 42});

            $httpBackend.flush();
        });
    });
});

jsfiddle: http://jsfiddle.net/krzysztof_safjanowski/vbAtL/

这篇关于了解$资源工厂和@ preFIX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！