3

I thought this would be simple to do but it terribly confusing.

I want to set my Angular login form to allow my users to login. On the login form, I want to take the input and send it as a POST request to my server for verification.

However, I cannot find a single example of $resource being used to send a POST request. Does anyone have any examples they can share?

CodyBugstein
  • 21,984
  • 61
  • 207
  • 363

2 Answers2

6

After defining your resource, you can use the save method which is default action for post defined by $resource. The first parameter of save takes arguments used as url params, and the second parameter takes post data.

var LoginResource = $resource("/rest/path/login");
var bodyObject = {username:"test", password:"test"};
LoginResource.save({}, bodyObject);

Then you can access response to your request by using promise of $resource. To clarify I will give an sample service and controller which will make a post request.

angular.module('yourApp').
factory('yourService', ["$resource", function($resource){
    var LoginResource = $resource("/rest/path/login");
    var serviceObject = {loginUser: function (userName, password){
        return LoginResource.save({}, {userName: userName, password: password}).$promise; //this promise will be fulfilled when the response is retrieved for this call
    }};
    return serviceObject;
}];

angular.module("yourApp").controller("LoginCtrl", ["$scope", "yourService",     
   function($scope, yourService){
    yourService.loginUser("test", "test").then(
        function(loginResult){
           console.log(loginResult);
        },
        function(err){
           console.error(err);
        }
    )
  }];
cubbuk
  • 7,800
  • 4
  • 35
  • 62
  • `The first parameter of save takes arguments used as url params, and the second parameter takes post data.` So the first parameter takes `GET` data and the second takes `POST` data? – CodyBugstein Dec 08 '14 at 15:14
  • 1
    Well, lets put it this way the first parameter, takes parameters used in the url, whereas the second parameter takes the body object. So lets say your resource was parameterized such as this: `rest/path/:id/login`, the id parameter would be given in the first parameter like this: `LoginResource.save({id: givenId}, {userName: userName, password: password})` – cubbuk Dec 08 '14 at 15:17
  • In your example, where is `LoginResource` defined? – CodyBugstein Dec 08 '14 at 15:23
  • I still can't figure out how to tell if my login was successful. How do I check the server response? Is there a simple way? – CodyBugstein Dec 08 '14 at 16:31
  • 1
    You see in the controller, after calling `loginUser`, I used `then` function, that is the success condition of the returned promise. So when the response retrieved from the server that part will be called, in that part you can check whether you are successfully logged in or not. – cubbuk Dec 08 '14 at 19:31
1

If you look on the docs: https://docs.angularjs.org/api/ngResource/service/$resource

Scroll down to where you can see Returns.

You will see this list:

{ 'get':    {method:'GET'},
  'save':   {method:'POST'},
  'query':  {method:'GET', isArray:true},
  'remove': {method:'DELETE'},
  'delete': {method:'DELETE'} };

This is where it tells you what is defined on the $resource object by default. As you can see if you call get then you will use HTTP GET, save => HTTP POST.

So if you define this:

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

Then you can perform a GET:

var user = User.get({userId:123}, function() {
  user.abc = true;
  user.$save();
});

If you define this:

var User = $resource('/user/:userId', {userId:'@id'}, {specialAction: {method: 'POST'}});

And call it:

User.specialAction({someParam:someValue});

You will perform the same action as save. You have just renamed it :)

So $resource just wraps around $http to make using RESTful API's easier. You can defined your own set of methods if you wish, you can specify to great detail how these are supposed to be executed.

Callum Linington
  • 14,213
  • 12
  • 75
  • 154