In the preceding code, note that the action method is declared as public void Customer(string customerID, string nothing = null). The second parameter in the method is a dummy parameter and will never be used. The only reason to declare this parameter is to fulfill the requirement of the overloaded methods, as the definition of overloaded methods states that it is a method with the same name and type but different data type or different number of parameters. As you can see, we have already declared the Customer action method with the parameter CustomerID string. This method will get a specific customer.

The following code example shows how to consume the preceding ASP.NET Web API using angularjs $http:

<! -- *********** GET ALL CUSTOMER ************* -- >
    
    var Url = '/api/Customer/Customer'

    $http({

            method: 'GET',
            url:Url

         }).success(function (customerList) {

            $scope.AllCustomer = customerList;

         }).error(function () {


    });


    <! -- ************ GET CUSTOMER BY CUSTOMER ID -- >
    $scope.GetCustomerByCustomerID = function(customerID)
    {
       $http({

                method: 'GET',
                url: Url,
                params: { customerID: customerID }

              }).success(function (customerList) {

                $scope.CustomerByID = customerList;
                $('#customerByIDModal ').modal('show');

             }).error(function () {


           });
    }

 

Using $http with the angularjs factory

All applications are composed of objects that work together to complete a task. These objects have to be instantiated and strengthened together for applications to work. In the angularjs framework, these objects are instantiated and bound together automatically with the injector service. However, the angularjs framework also offers factory, service, and provider “recipes” to produce and register our own objects. In angularjs, factory is the most popular recipe to create an object and configure a service. The advantage of creating objects in angularjs is the same as in object-oriented programming; we can use this object whenever we need it instead of creating it repeatedly.

In the following code example, we create an object (factory), which contains properties and then returns the same object. When we need to use this object (factory), we need to pass this object (factory) name into your controller. The properties of the object will then be available in the controller, as shown:

app.factory('myOperations', function ($http) {

    return {

        Create: function (Url, data) {

            return $http({
                method: 'POST',
                url: Url,
                data: data

            });

        },
        ReadList: function (Url) {

            //return $http.get(url);


            return $http({

                method: 'GET',
                url: Url

            })

        },
        Read: function (Url, parameters) {

            return $http({

                method: 'GET',
                url: Url,
                params: parameters

            })

        },

        Update: function (Url, parameters, data) {

            //return $http.put(url + customer.Id, data);

            return $http({

                method: 'PUT',
                url: Url,
                params: parameters,
                data: data

            })


        },

        Delete: function (id) {

            return $http.delete(url + id);

        }