AngularJS Resource: Interacting with RESTful APIs

REST (representational status transfer, representational state Transfer) is a software architecture style proposed by Dr. Roy Fielding in his doctoral dissertation in 2000. RESTful style design is not only more readable (Human readable), but also easy to do cache and server Extensions (scalability). The rest style is reflected in the URL design:

• Each URL corresponds to a resource
• Different actions for resources correspond to HTTP methods
• Resource representation (representation) Adoption Accept and Content-Type designation

ANGULARJS provides a service to make it easier to $resource interact with the RESTful server API, and it is easy to define a rest resource without having to manually declare all the CRUD methods.

Reference Document: https://docs.angularjs.org/api/ngResource/service/$resource

Resource Factory

$resourceService definition in ngResource module, you need to introduce this module in your HTML JS, while adding such a dependency in your app:

var app = angular.module(‘helloApp, [‘ngResource‘]);

Then create a factory for the resource:

app.factory(‘Notes‘, [‘$resource‘, function($resource) { return $resource(‘/notes/:id‘);}]);

Of course, you can also not put $esource the instance into the factory, directly in the controller stored up: var Notes = $resource(‘/notes/:id) .

Crud

In your controller you can add and remove resources to check:

App.Controller(' Notesctrl ',[' $scope ',' Notes ',function($scope,Notes){VarNotes=Notes.Query(function(){GET:/notesResponse: [{id:1, content: ' Hello '}, {id:2, Content: ' World '};VarFirst=Notes[0];First.Content= ' halo ' first. $save  (); //POST:/notes/1 {id:1, content: ' Halo '} //Response: {id:1, Content: ' Halo '} second. $delete  (); //DELETE:/notes/2 var note = new notes  ({content:  ' xxx ' }); note. $save  (); //POST:/notes //Response: {id:3, content: ' xxx '}   

PUT operation

$resourceFive default actions are available:,,, get query save remove , delete . You can configure an update action to complete the HTTP PUT:

app.factory(‘Notes‘, [‘$resource‘, function($resource) { return $resource(‘/notes/:id‘, null, { update: { method:‘PUT‘ } }); }]);

Now you can get a note in the controller and update it:

 var note = notes. Get ({id: 3}),  $id = note. Id; Note. Content =  ' yyy ' ; Notes. Update ({id: $id }, note); //PUT/NOTES/3 {id:3, content: ' yyy '}           

Now you Notes have six kinds of operation. These operations are called in two ways:

1. Called through a resource class, for example: Notes.update({id: xxx}) ;
2. Called through the resource instance, for example: note.$update() , at which point the operation name needs to be prefixed $ .

The specific invocation parameters refer to the documentation:

HTTP GET "Class" Actions:Resource.action ([parameters], [success], [ERROR])

Non-get "Class" Actions:Resource.action ([parameters], PostData, [success], [ERROR])

Non-get instance actions:instance. $action ([parameters], [success], [ERROR])

Where the success parameter is (value, responseHeaders) , the error parameter is (httpResponse) .

Attribute/url mappings

In the example above, we see that the attributes of the note object id are mapped to the () in the URL :id /notes/:id . If your business is more complex, you can configure this mapping relationship manually. For example:

var Notes = $resouce(‘/users/:userId/notes/:noteId‘, { noteId: ‘@id‘, userId: ‘@owner‘}

Will read note the owner and id properties to generate the URL, such as when deleting the note:

// note === {id: 123, owner: ‘alice‘, content: ‘hello‘}note.$delete();// DELETE: /users/alice/notes/123

At construction $resource time, more than a property map becomes a URL Query. For example:

var Notes = $resouce(‘/notes/:id‘, { id: ‘@id‘, user: ‘@owner‘});// note === {id: 123, owner: ‘alice‘, content: ‘hello‘}note.$delete();// DELETE: /notes/123?user=alice

More than one property in the declaration and invocation of a rest operation becomes a URL Query. For example:

VarNotes=$resouce('/notes/:id ', {id: ' @id '}, { update: {method : ' PUT ', operator: ' Bob '}});  Note = = = {id:123, content: ' Hello '}note.  $update({trusted: true});  PUT:/notes/123?operator=bob&trusted=true {id:123, content: ' Hello '}       

Response conversions

Sometimes a fully restful API cannot be provided based on a given background design, such as /notes a pager object, not an array. At this point, we can still use it $resource , but we need to set the response conversion callback. For example:

VarNotes=$resouce('/notes/:id ',Null,{Pager:{Method:' GET ',Transformresponse:function(Data,Headers){Server respond:data = {Currentpage:1,TOTALPAGE:20,//pagesize:2, //content: [{id:1, content: ' Hello '}, {id:2, Content: ' World '}]} 
                                  
                                   var 
                                   pager = json. Parse (datareturn pager. Content} }}); var notes = notes. Query (function () {//GET:/notes //notes = = = [{id:1, content: ' Hello '}, {id:2, Content: ' World '}]   
                                  

Similar to the response rewrite, you can also set the request transformation transformRequest .

While $resource the design can support the vast majority of URLs and content presentation designs, if you find $resource the use process extremely complex, it may be that your server API does not satisfy the restful style.

Unless noted, this blog article is original, reproduced please link to the form of this article address: http://harttle.com/2015/06/05/angular-resource.html

AngularJS Resource: Interacting with RESTful APIs