How can I send parameters in my http request using AngularJS?

Question

How can I send parameters in my http request using AngularJS?

I am using the following code:

            $http({
                method: 'GET',
                url: '/Admin/GetTestAccounts',
                data: { applicationId: 3 }
            }).success(function (result) {
                $scope.testAccounts = result;
            });

The code sends the following to my server:

http://127.0.0.1:81/Admin/GetTestAccounts

When this is received by my MVC controller:

   [HttpGet]
    public virtual ActionResult GetTestAccounts(int applicationId)
    {
        var testAccounts =
            (
                from testAccount in this._testAccountService.GetTestAccounts(applicationId)
                select new
                {
                    Id = testAccount.TestAccountId,
                    Name = testAccount.Name
                }
            ).ToList();

        return Json(testAccounts, JsonRequestBehavior.AllowGet);
    }

It complains that there is no applicationId.

The parameters dictionary contains a null entry for parameter 'applicationId' of non-nullable type 'System.Int32' for method

Can someone explain why the applicationId is not being sent as a parameter? Previously I was doing this with the following non-Angular code and it worked just fine:

    $.ajax({
        url: '/Admin/GetTestAccounts',
        data: { applicationId: 3 },
        type: 'GET',
        success: function (data) {
            eViewModel.testAccounts(data);
        }
    });

angularjs

Answer 1

If you don't want to use jQuery's $.param you can use $http's param field which serializes an object.

var params = {
    applicationId: 3
}

$http({
    url: '/Admin/GetTestAccounts',
    method: 'GET',
    params: params
});

Answer 2

Ok, I will try to answer this.

I think the problem is that angularjs presume that data passed to http will be urlencoded. I am not sure why angular doesn't serialize it implicitly if there's an object. So you have to encode it yourself:

 $http({
       method: 'GET',
       url: '/Admin/GetTestAccounts',
       data: 'applicationId=3'
       })

or use jQuery param to encode it for you:

$http({
     method: 'GET',
     url: '/Admin/GetTestAccounts',
     data: $.param({ applicationId: 3 })
     })