AngularJS Resource: Interacting with RESTful APIs

REST (Representational State Transfer) is a software architecture style proposed by Dr. Roy Fielding in his doctoral thesis in 2000. The RESTful design not only has better readability (Human Readable), but also makes it easy to do caching and server scalability. The REST style is reflected in the URL design:

Each URL corresponds to a resource
Different operations on resources correspond to different methods of HTTP
The resource representation (representation) is specified by Accept and Content-Type
AngularJS provides $ resourceService to more easily interact with the RESTful server API, you can easily define a REST resource without having to manually declare all CRUD methods.

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

Resource Factory
$ resourceService is defined in ngResourceModule, you need to introduce the JS corresponding to this Module in your HTML, and add such a dependency in your APP

var app = angular.module (‘helloApp, [‘ ngResource ’]);
Then build a Factory for resources:

app.factory (‘Notes’, [‘$ resource’, function ($ resource) {
    return $ resource (‘/ notes /: id’);
}]);
Of course, you can save the instance of $ esource in the factory and store it directly in the controller: var Notes = $ resource (‘/ notes /: id)

CRUD
You can add, delete, and modify resources in your controller:

app.controller (‘NotesCtrl’, [‘$ scope’, ‘Notes’, function ($ scope, Notes) {
    var notes = Notes.query (function () {
        // GET: / notes
        // Response: [{id: 1, content: ‘hello‘}, {id: 2, content: ‘world‘}];
        
        var first = 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
$ resource provides five default operations: get, query, save, remove, delete. You can configure an update operation to complete 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 your Notes has six operations. There are two ways to call these operations:

Called by resource class, for example: Notes.update ({id: xxx});
Called by resource instance, for example: note. $ Update (), the operation name needs to be prefixed with $.
The specific calling parameters can refer to the document:

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])

Among them, the success parameter is (value, responseHeaders), and the error parameter is (httpResponse).

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

var Notes = $ resouce (‘/ users /: userId / notes /: noteId’, {
    noteId: ‘@id’,
    userId: ‘@owner’
}
The owner and id attributes of the note will be read to generate the URL, such as when deleting the note:

// note === {id: 123, owner: ‘alice‘, content: ‘hello‘}
note. $ delete ();
// DELETE: / users / alice / notes / 123
When constructing $ resource, more than attribute mapping will become URL Query. E.g:

var Notes = $ resouce (‘/ notes /: id’, {
    id: ‘@id’,
    user: ‘@owner’
});
// note === {id: 123, owner: ‘alice‘, content: ‘hello‘}
note. $ delete ();
// DELETE: / notes / 123? User = alice
In the declaration and invocation of REST operations, more attributes will become URL Query. E.g:

var Notes = $ 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 conversion
Sometimes based on the established background design, it is not possible to provide a fully RESTful API. For example, / notes returns a pager object instead of an array. At this point, we can still use $ resource, but we need to set the response conversion callback. E.g:

var Notes = $ 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 (data);
            return pager.content;
        }
    }
});
var notes = Notes.query (function () {
    // GET: / notes
    // notes === [{id: 1, content: ‘hello‘}, {id: 2, content: ‘world‘}]
});
Similar to response rewriting, you can also set the request to transform request.

Although the design of $ resource can support most of the URL and content representation design, if you find that the use of $ resource is extremely complicated, it may be that your server API does not meet the RESTful style.

 

 Go to http://harttle.com/2015/06/05/angular-resource.html
AngularJS Resource: interact with RESTful API