Angular js $http example Web API

Question

Here is my API controller method

 [HttpPut]

        public List<Employee> PutEmployee(int EmpID, Employee empl)
        {
            empl.EmpID = EmpID;
            int index = emp.GetEmployees().FindIndex(i => i.EmpID == empl.EmpID);
            emp.GetEmployees().RemoveAt(index);
            emp.GetEmployees().Add(empl);
            return emp.GetEmployees();
        }

Here is angularJS controller

   $scope.UpdateEmp = function () {
        var empl = $scope.Employee;
        empHttpFactory.update(empl.EmpID,empl ).success(function () { // update method in my resource uses $resource
            $location.path('/EmpList'); //redirect to list
        });

    };

Here is my service code

 var resource={
        update: function (ID, empl) {

           // var empl = {'EmpID':1,'FirstName':'Kailash', 'Salary':62000};
            var params = { EmpID: ID, empval: empl };

                         // return $http.put('../api/Emp/Put', { EmpID: ID , empval:   return $http({
                method: 'PUT',
                url: '../api/Emp/Put',
                data: params

            })

empl });

        }
    }

    return resource;

When i do the debug, i could see the value for EMPID and empval in the angularjs controller and service but when it comes to API controller part, i m getting the value for EMPID alone but not for empval, its coming as null. can someone provide me working sample of it. i m new to AngularJS

Update 1 :

I have replaced the Params to data in my http call. My API method expecting the parameter in the body as per my controller method. I changed the http call accordingly and it started working fine. Also in my first argument to the controller method, I m using the variable name as EmpID, if I have used as "id", then probably, id would have been passed as the parameter in the URL itself

 return $http({
                    method: 'PUT',
                    url: '../api/Emp/Put',
                    data: params

                })

Updated Question: This is regarding the $resource

In $resource documentation, 2nd argument is parameter and the 3rd has list of actions where I can mention the parameters. But if you see from my example, I haven't explicitly used params option but passing data to my controller method. Its working as expected because its taking it as data. Why it so???

$resource('../../Employee/PutEmployee/', { }, { update: { method: 'PUT', empval: { "EmpID": 1, "FirstName": "John", "LastName": "Peter", "Salary": 60000 } ,isArray: true } })

Answer 1

Here is an example of my toying web api project.

public class MoviesApiController: ApiController {
[HttpGet]
public IEnumerable<Movie> Get() { /* your implementation here */ }
[HttpGet]
public Movie Get(int Id) { /* your implementation here */ }
[HttpPut]
public HttpResponseMEssage Put(int Id) {/* your impl */ }
[HttpPost]
public HttpResponseMessage Post(Movie movie) {/* impl */}
[HttpDelete]
public HttpResponseMessage Delete(int id) { /*impl */ }

In fiddler, calll get with endpoint like: api/MoviesApi/

Call with specific movie id with endpoint like: api/MoviesApi/1

To issue a put, in fiddler change action to put, and rest endpoint like: api/MoviesApi/1

The same url goes for post and delete. Make sure you change it appropriately in fiddler

As for angularjs, I use $resource instead of $http, but your url should be the same. An example of my angularjs service:

angular.module("your_name").factory("your_name", ['$resource', function($resource) {
return $resource('/api/MoviesApi/:Id', null, {
'update' : {method: 'PUT'}});

Answer 2

If I understand correctly, the REST service is bound to the URL api/Emp/:EmpID, with method PUT, and expects to receive the new employee data as JSON, in the request body.

But that's not what you're doing in your angular code. You're sending a PUT request on the URL ../api/Emp/Put?EmpID=<theID>&empval=<the employee>, without any request body.

What you need to do is

$http({
    method: 'PUT',
    url: '../api/Emp/' + ID,
    data: empl
});

or, simpler:

$http.put('../api/Emp/' + ID, empl);