CODEWITHSUNDEEP
javascriptangularjsrestngresource
glock18
glock18

Reputation: 790

Angular ngResource $save Method Clears $resource Object

Using Angular 1.5.5 here:

Is there any way to tell Angular to ignore response body for particular requests (such as $save)? It drives me crazy that after I call $save, angular updates the model with the object returned by a server, which initially was supposed to be used to distinguish between different resolutions of the request. It results in unwanted form clear. Interestingly enough, this behaviour remains even if I send a 400 or 500 http status code.

In case you need more info, relevant code is below.

Controller:

  'use strict';
  angular
    .module('app.operators')
    .controller('OperatorNewController', OperatorNewController);

  OperatorNewController.$inject = ['operatorsService', 'notify'];

  function OperatorNewController(operatorsService, notify) {
    var vm = this;
    vm.done = done;

    activate();

    function activate() {
      vm.operator = new operatorsService();
    }

    function done(form) {
      if (form.$invalid) {
        // do stuff
        return false;
      }

      vm.operator.$save(function(response) {
        if (response.success && response._id) {
          $state.go('app.operators.details', {id: response._id}, { reload: true });
        } else if (response.inactive) {
          // do stuff
        } else {
          // do other stuff
        }
      }, function (error) {
        // do other stuff
      });
    }
  }

Service:

  'use strict';
  angular
    .module('app.operators')
    .service('operatorsService', operatorsService);

  operatorsService.$inject = ['$resource'];

  function operatorsService($resource) {
    return $resource('/operators/:id/', {id: '@_id'}, {
      'update': { method: 'PUT' }
    });
  }

Server request handler is also fairly simple:

  .post('/', function (req, res) {
    if (!req.operator.active) {
      return res.status(500).json({ inactive: true, success: false });
    }
    // do stuff
    return res.json({ success: true });
  });

In either way I don't like the idea of having to send the entire object from server (particularily when it's a failed request), and even if I have to, I still need a way to send some extra data that will be ignored by Angular.

Your help is very much appreciated!

Upvotes: 0

Views: 369

Answers (1)

georgeawg
georgeawg

Reputation: 48968

The $save method of the resource object empties and replaces the object with the results of the XHR POST results. To avoid this, use the .save method of the operatorsService:

  //vm.operator.$save(function(response) {
  vm.newOperator = operatorsService.save(vm.operator, function(response),
    if (response.success && response._id) {
      $state.go('app.operators.details', {id: response._id}, { reload: true });
    } else if (response.inactive) {
      // do stuff
    } else {
      // do other stuff
    }
  }, function (error) {
    // do other stuff
  });

UPDATE

It results in unwanted form clear. Interestingly enough, this behaviour remains even if I send a 400 or 500 http status code.

This behavior is NOT VERIFIED.

I created a PLNKR to attempt to verify this behavior and found that the $save method does not replace the resource object if the server returns a status of 400 or 500. However it does empty and replace the resource object if the XHR status code is 200 (OK).

The DEMO on PLNKR

It drives me crazy that after I call $save, angular updates the model with the object returned by a server

It helps to understand how browsers handle traditional submits from forms.

The default operation for a submit button uses method=get. The browser appends the form inputs to the URL as query parameters and executes an HTTP GET operation with that URL. The browser then clears the window or frame and loads the results from the server.

The default operation for method=post is to serializes the inputs and place them in the body of an HTTP POST. The browser then clears the window or frame and loads the results from the server.

In AngularJS the form directive cancels the browser default operation and executes the Angular Expression set by either the ng-submit or ng-click directive. All $resource instance methods including $get and $save, empty and replace the resource object with XHR results from the server if the XHR is successful. This is consistent with the way browsers traditionally handle forms.

In RESTful APIs, HTTP GET operations return the state of a server resource without changing it. HTTP POST operations add a new resource state to the server. APIs usually return the new resource state, with additional information such as ID, Location, timestamps, etc. Some RESTful APIs return a redirect (status 302 or 303) in which case browsers transparently do an HTTP GET using the new location. (This helps to Solve the Double Submission Problem.)

When designing RESTful APIs, it is important to understand how traditional browsers behave and the expectations of RESTful clients such as AngularJS ngResource.

Upvotes: 1

Related Questions