title: AngularJS - Send data in body of POST request
body: <p>I am trying to send data in the body of a POST request to a RESTful API in my AngularJS application.</p>
  
  <p>My current structure for this request is a <strong>controller</strong> which grabs data and send this to a <strong>service</strong>, which then calls the request from its associated <strong>factory</strong>, as follows:</p>
  
  <p><strong>Controller</strong></p>
  
  <p><code>userService.saveReport(vm.user.id, searchParams)</code></p>
  
  <p><strong>Service</strong></p>
  
  <pre><code>service.saveReport = function (id, searchData) {
        var deferred = $q.defer();
  
        user.saveReport({ userID: id, searchData: searchData }, function(response) {
          deferred.resolve(response);
        }, function(e) {
          deferred.reject(e);
        });
  
        return deferred.promise;
      };
  </code></pre>
  
  <p><strong>Factory</strong></p>
  
  <pre><code>    function user($resource, $localStorage, constants) {
      return $resource(constants.API_URL + '/users', { userID: '@userID' }, {
        getReports: {
          method: 'GET',
          url: constants.API_URL + '/users/:userID/reports',
          format: 'json',
          headers: {
            'Accept': 'application/vnd.abp.v1+json',
            'X-Mode': function() {
              return $localStorage.get('mode');
            }
          }
        },
        saveReport: {
          method: 'POST',
          url: constants.API_URL + '/users/:userID/reports',
          format: 'json',
          headers: {
            'Accept': 'application/vnd.abp.v1+json',
            'X-Mode': function() {
              return $localStorage.get('mode');
            }
          }
        }
      });
    }
  
    angular
      .module('abp')
      .factory('user', user);
  
  })();
  </code></pre>
  
  <p>I have seen various posts which state <code>$resource</code> allows <code>data:</code> to be send through to form the body of the request, but this doesn't seem to be working. I've tried to add <code>searchData: '@searchData'</code> into the params allowed by the <code>$resource</code> call and then add this into a data section as follows, but this doesn't work (condensed for brevity):</p>
  
  <pre><code>return $resource(constants.API_URL + '/users', { userID: '@userID', searchData: '@searchData' }, {
      saveReport: {
          method: 'POST',
          url: constants.API_URL + '/users/:userID/reports',
          format: 'json',
          data: ':searchData',
          headers: {
            'Accept': 'application/vnd.abp.v1+json',
            'X-Mode': function() {
              return $localStorage.get('mode');
            }
          }
        }
  }
  </code></pre>
  
  <p>How can I send the data of this request in the body of the POST request?</p>