Detailed explanation of the data interaction between $resource and restfu server in AngularJs

$resource

Create a factory function of the resource object, which allows you to safely interact with the RESFUL server.

Install

ngResource module is an optional angularjs module. If you need to use it, we want to refer to js separately.

<script type="text/javascript" src="/javascripts/">

$resource application

We do not communicate with the server directly through the $resource service itself. $resource is a factory that creates resource objects and is used to create objects that interact with the server.

var User = $resource('/api/users/:userId', {userId:'@id'});

The returned User object contains methods to interact with the backend service. We can understand the User object as an interface that interacts with the backend service of RESTFul.

This object contains two methods of get type that have three methods of non-get type.

({id:'123'}, successFn, errorFn);

This method sends a get request to the url and expects a json-type response. Here a request will be sent to /api/users/123, successFn handles the request successfully, and errorFn handles the error.

(params, successFn, errorFn)

sameget()The method is similar, and is generally used to request multiple pieces of data.

save(params, payload, successFn, errorFn);

The save method will initiate a post request, the params parameter is used to fill the variables in the URL, and the object payload will be sent as the request body.

delete(params, payload, successFn,errorFn)

delete method a DELETE request, payload is sent as a message body

remove(params, payload, successFn, errorFn)

Similar to delete, the difference is that remove is used to remove multiple pieces of data.

When interacting with the server through the object generated by $resource, we can define functions that succeed and fail to process. The parameters accepted by these functions are not just simple objects, but wrapped objects and will be added$save() , $remove() , $deleteThere are three methods, these three methods can be called directly for the server to interact.

({id:'123'}, function(user){
  = 'changeAnotherName';
 user.$save();
// Here is equivalent to ({id:'123'},{name:'changeAnotherName'})});

$resource extension

$resource encapsulates five common requests, and we can also extend $resource.

To expand $resource here, we need to pass in a third parameter, which is an object.

$resource('/api/users',{},{
 sendEmail:{
  method:'',
  url:'',
  params:{},
  isArray:boolean,
  transformRequest:Function or array of functions
  transformResponse:Function or array of functions
  cache:Boolean or cached object
  timeout:Value orpromiseObject
  withCredentials:Boolean type
  responseType:String，Used to set upXMLHttpRequestResponseTypeproperty
 }
})

We can also use the $resource service as the basis for custom services.

('testApp', ['ngResource']),factory('UserService',['$resource', function($resource){
  return $resource(url,{},{});
}]);

Summarize

The above is all about the data interaction between $resource and restfu server in AngularJs. I hope this article will be helpful to everyone to learn or use AngularJS. If you have any questions, you can leave a message to communicate.