Search code examples
angularjsflaskangular-resourceflask-cors

Flask API: How can I pass a param to url in angularjs $resource PUT method correctly?


I have the follow code, a factory that consumes an API rest:

angular.module('teachers')
.factory("TeachersService",
    function($resource) {

     var restPath = 'http://localhost:8001/entities/teacher/';

     return $resource(restPath + ':id', { id: "@teacherId" }, {

         'getSubjects': {
             method: 'GET',
             url: restPath + ':id' + '/subject',
             isArray: true
         },

         'update': { method: 'PUT'},

         'getClasses': {
             method: 'GET',
             url: restPath + ':id' + '/class',
             isArray: true
         }

     });


    });

In a controller I use the factory:

        vm.teacher = TeachersService.get({id: vm.teacherId}, function() {
            console.log(vm.teacher)
        }, function() {
            console.log('Teacher not found')
            vm.teacher = null;
        })

And the data is retrieved fine, but now I need update the data of this entity, and I want to use update method that the factory has:

            vm.teacher.$update(function() {
                console.log('success')
            }, function(error){
                console.log('error')
                console.log(error)
            });

But I don't know why it always give me a fail (the methods works with curl and with another programs like postman).

This is an example of header of fail:

Object { data: null, status: -1, headers: fd/<(), config: Object, statusText: "" }

I don't understand what's happens, I think that the problem is in the way that I pass the id. I'm sure that the entity vm.teacher has a teacherId value with an integer but I don't know why this is not passed. Also, I see the network console of Firefox (in my case) and I see that the call to server isn't exists but when I change the definition to id, like this for example :

{ id: "@_teacherId" }

The call is done but with error because the url haven't the entity identifier at end, and the server in PUT method need it.

An example of a fake user is (after to get it):

Object { createdBy: 1, phone: "+34740 51 73 72", createdAt: "Tue Oct 25 12:58:30 2016", name: "Alvaro", address: "Callejón Lourdes Pozuelo 11 Apt. 54…", teacherId: 4, $promise: Object, $resolved: true }

Any idea? I'm blocked too many times.

Thanks!

EDIT

If I change the code and set GET method the call it does:

         'update': {
             method: 'GET',
             url: restPath + ':id'
         }

but not when the method is PUT:

         'update': {
             method: 'PUT',
             url: restPath + ':id'
         }

Solution

  • Finally,the problem was in the Flask API, where I needed enable Cross-Origin Resource Sharing (CORS) mechanism. Because of this I tried again and again the examples without success, the problem wasn't in the $resource code at end.

    Status of -1 indicates AngularJS internal error such as timeout or Same Origin Policy/CORS problem. Thanks to @georgeawg .

    In service the code was fine:

    'update': {method: 'PUT'},
    

    In controller it was fine also:

     vm.teacher.$update()
    

    In my flask api I've needed add this:

    from flask.ext.cors import CORS, cross_origin
    ...
    app = Flask(__name__)
    CORS(app)
    

    More info about flask-core in doc: flask-cors.