Migrating from http to ngResource Angular

Question

It's been 3months since I've used angular and I'm loving it. Finished an app using it and now I'm on a code refactoring or improving my code for better practice. I have an Api service.js that used $http and I want to migrate it to using $resource :)

I have here a sample of my api code using $http:

Service.js
authenticatePlayer: function(postData) {
        return $http({
          method  : 'POST',
          url     : api + 'auth/player',
          data    : postData,
          headers : {'Content-Type' : 'application/json'}
        });
      },

#Controller.js
Api.authenticatePlayer(postData).then(function (result){
    //success   
}, function(result) {
    //error also this will catch error 400, 401, and 500
});

The above code are working and now here is my first attempt on using $resource:

authenticate: function() {
    return $resource(api + "auth/:usertype",
        {
          typeOfUser : "@usertype" //types can be player, anonymous, admin
        },
        {
          post : { method : "POST" }
        }
    );
}
#Controller
var postData = {
    email    : scope.main.email,
    password : scope.main.password
};

var loginUser = new Api(postData);
loginUser.$post(); //error T__T

That just how far I get, don't know how to pass a data to my api using $resource from my controller. That just one part of my api call, there's still a bunch of it but for now this will do. :D.

Any help is greatly appreciated.

Thanks

Chickenrice · Accepted Answer · 2013-12-10 08:29:05Z

1

You could try this:

API

authenticate: function(){
  return $resource(api+"auth/:usertype",{},post:{method:"POST"});
}

Note: :usertype in URL means that the value of usertype property which you passed into postData will replace the part of URL

Controller

var postData = {email:scope.main.email,password:scope.main.password};

API.authenticate().post({usertype:'player'},postData,function(response){
  console.log(response);
});

Or you could fetch response like this:

var response = API.authenticate().post({usertype:'player'},postData);

Hope this is helpful.

edited Dec 10, 2013 at 8:29

answered Dec 10, 2013 at 6:21

Chickenrice

5,7372 gold badges24 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user2720708 Over a year ago

hi, thanks for taking time answering my question. :D. How would I change the typeOfUser in the controller? Since I have diff users. thanks again..

Chickenrice Over a year ago

You could add the user type data to postData and use :usertype to change your RESTful data source URL dynamically. Answer updated.

user2720708 Over a year ago

okay, I'm almost done, one last thing I'm getting a 500 response. And I noticed that the problem is that the data I passed was in the form of Query String Parameter which supposedly I have to pass the data as Request Payload. How would I do that?

Chickenrice Over a year ago

Actually.. you could try overload method(params, payload) to achieve your goal. Answer updated

user2720708 Over a year ago

woah, finally got it working. Thanks you for being their every step in a way. :D. #bow.

Collectives™ on Stack Overflow

Migrating from http to ngResource Angular

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related