AngularJS Resource - URL template not formatting passed parameters properly

Question

I am new to angularjs and ui-router and having trouble getting the resource service to format the GET URL in the way I would like, using the parameter I am passing to it.

Here is my Controller code:

views: {

            'detail': {
              templateUrl: 'app/receipts/receipts.detail.html',
              resolve: {
                receipt: 
                  function( receiptAPI, $stateParams ){

                    //send state param: receiptId to service and get data
                    var receiptAPIresponse = receiptAPI.query({receiptId:$stateParams.receiptId});
                    return receiptAPIresponse;

                }
              },

              controller: ['$scope', '$stateParams', 'receipt',
                function (  $scope,   $stateParams,   receipt) {

                    $scope.receipt = receipt;


                }]
            }, 

Here is my Resource Service that requests data from the API:

var receiptAPIservice = angular.module('receiptAPIservice', ['ngResource']);

receiptAPIservice.factory('receiptAPI', ['$resource',
  function($resource){

    return $resource('http://myapi.url/api/receipts/:rId', {

      rId: '@receiptId',

    }, {

      query: {
        method:'GET', 
        headers:{
          'session-id':'rest-session-id-forconsumer-consumerid2',
          'Content-Type':'application/json',
          'Accept':'application/json'
        },
      }
    });
  }]);

This all works, except that the service is requesting the URL:

http://myapi.url/api/receipts?receiptId=81

when I would like the URL to be formatted as:

http://myapi.url/api/receipts/81

It appears that the template replacement is not working as it specifies that it should, in the documentation at: http://docs.angularjs.org/api/ngResource/service/$resource

Can someone please tell me what am I missing?

Answer 1

This line:

var receiptAPIresponse = receiptAPI.query({receiptId:$stateParams.receiptId});

Needs to be changed to this:

var receiptAPIresponse = receiptAPI.query({rId:$stateParams.receiptId});

Notice the rename of your receiptId to rId property. You need to make sure that the parameter name matches the placeholder in your URL template.