Posting data with angularjs v 1.3

Question

I have a web api 2.0 application and I have to post data of a form.. Here my js code:

(function (angular) {
    var public_area = angular.module("public-area", ['ngResource']);

    public_area.factory("MyService", function ($resource) {
        return {
            my_controller: $resource("/api/MyHttpControllerTest/")
        };
    });

    public_area.controller("MyController", function ($scope, MyService) {
        $scope.getPlans = function ()
        {
            var pianiTariffari =
                new MyService
                    .my_controller
                    .query({
                        customerType: $scope.customerType
                    }, isArray = true);
        }

        $scope.sendInvitation = function ( )
        {
            var invitation =
                 new MyService
                    .my_controller(
                        {
                            request: {
                                CustomerType: "test"
                            }
                        });

            invitation.$save();
        }
    });
})(angular);    

How you can see, I have a controller.. and two function, 1 in GET and 1 in POST...

I see you also the server side controller

public FillFormPresentaUnAmicoResponse GetPromozioni(string customerType)
    {
        ...
    }

    [HttpPost]
    public PresentaUnAmicoResponse InvitaAmico(PresentaUnAmicoRequest request)
    {
        ...
    }

Where the class PresentaUnAmicoRequest is

public class PresentaUnAmicoRequest
{
    public string CustomerType { get; set; }
}

The GET function works correctly! But the POST not... In the post I receive a valid instance of the "request", bu the property inside it is NULL...

The really strange thing to me is that if I call the Post method in this way:

var invitation = new MyService.my_controller(undefined);
invitation.$save();

server side, the "request" is instanced.. I expected "request = null" instead..

Can anyone help me? Thank you

UPDATE:

If I understood, I need always the same object to stick REST principles. So, according to spike's example I believe I have to create an object similar to this:

public class Promos
{
   public string CustomerType{ get; set; }
   public List<string> PromoPerCustomerType{ get; set; }
}

public class PresentaAmico 
{
    public Promos Promozioni { get; set; }
    public string Name{ get; set; }
    public string Surname { get; set; }
    ...
}

And my Rest service should be like this

[HttpGet]
public PresentaAmico Get(string customerType)
{
     ...
}

[HttpPost] 
public void Save(PresentaAmico myForm)
{
     ...
}     

Is it correct?

Answer 1

IMHO This is not the way the $resouce is works at its best and that's because you're not really sticking to REST principles. The idea of $resource, is to get an object, modify it and then $save it again, which maps to a GET and POST calls in which the object that comes back and is being sent, are the same.

You are GETting an FillFormPresentaUnAmicoResponse and POSTing another type of object, namely a PresentaUnAmicoResponse.

Which of course could start the whole discussion whether you are using REST as it would work with WebAPI: namely a resource, which you modify by mapping the HTTP verbs on it ( GET/POST etc. ) Your controller doesn't really stick to those rules since you send different types of objects over the wire.

So I would actually recommend 2 controllers, one for each of your types: FillFormPresentaUnAmicoResponseController and a PresentaUnAmicoResponseController. I would also reconsider the naming in this case - there's no need in the 'response' suffix.

var presenta = $resource('/presentaunamicoresponse/:id', { id:'@id'});
// The id doesn't make any sense here - which should raise the question on
// whether these stuff is really suitable for REST or whether you are really
// doing a remote procedure call, but OK.
presenta.CustomerType = 'Whatever';
presenta.$save();

I think this is how it would work. You would have to stick it in your factory though for consistency. But as you can see in the docs ( https://docs.angularjs.org/api/ngResource/service/$resource ) - you get the resouce, and manipulate properties on the resource itself. Then you call the $save() method on it.