Single Page Application CRUD $http service in AngularJS

How to create a $http service using Factory method to perform create, read, update and delete operations for Single Page Application in AngularJS?

In last post, we learnt how to create Single Page Application route navigation system using AngularJS route module.

Pre-requisite: It is important to read Single Page Application Web API creation post before this post.

After that we will learn how to create an AngularJS $http service that will help us to perform CRUD (create, read, update and delete) operations in the database table.

In order to create service, we will use Factory method. Below is the code snippet for the serviecs we will be using in this Single Page Application demonstration.

Single Page Application CRUD Service

Code snippet for 'PDService' that contains CRUD functions.

// ===================================================
// Angular Factory to create service to peform CRUD
// ===================================================
app.factory("PDService", function ($http) {
    var thisPDService = {};

    // get all data from database
    thisPDService.GetAll = function () {
        var promise = $http({
            method: 'GET',
            url: '/api/PersonalDetails'
           })
            .then(function (response) {
                return response.data;
            },
            function (response) {
                return response.data;
            });
        return promise;
    };


    // get single record from database
    thisPDService.GetSingle = function (id) {
        
        var promise = $http({
            method: 'GET',
            url: '/api/PersonalDetails/'+ id
        })
            .then(function (response) {
                return response.data;
            },
            function (response) {
                return response.data;
            });
        return promise;
    };


    // post the data from database
    thisPDService.Insert = function (firstName, lastName, age, active) {
        var personalDetail = {
            FirstName: firstName,
            LastName: lastName,
            Age: age,
            Active: active,
        };
        
        var promise = $http({
            method: 'POST',
            url: '/api/PersonalDetails',
            data: personalDetail
        })
        .then(function (response) {
            return response.statusText;
        },
        function (response) {
            return response.statusText;
        });

        return promise;
    };

    // put the data from database
    thisPDService.Update = function (autoId, firstName, lastName, age, active) {
        var personalDetail = {
            AutoId : autoId,
            FirstName: firstName,
            LastName: lastName,
            Age: age,
            Active: active,
        };

        var promise = $http({
            method: 'PUT',
            url: '/api/PersonalDetails/'+ autoId,
            data: personalDetail
        })
        .then(function (response) {
            return "Updated";
            // return response.statusText + ' ' + response.status + ' ' + response.data;
        },
        function (response) {
            return response.statusText + ' ' + response.status + ' ' + response.data;
        });

        return promise;
    };

    // delete the data from database
    thisPDService.Remove = function (autoId) {
        var promise = $http({
            method: 'DELETE',
            url: '/api/PersonalDetails/' + autoId
        })
        .then(function (response) {
            // return "Deleted";
            return response.statusText + ' ' + response.status + ' ' + response.data;
        },
        function (response) {
            return response.statusText + ' ' + response.status + ' ' + response.data;
        });

        return promise;
    };

    return thisPDService;
});

In above code snippet, we have created following functions inside "PDService".

GetAll() - This function retrieves all the data from the database. This function uses $http service to send GET request on the Web API url '/api/PersonalDetails'. Note that we are calling this with the promise variable as the $http service returns a promise object once the response has been received from the server; the same promise is then being returned to the GetAll function.
GetSingle() - this function receives id as parameter and make 'GET' call to the Web API and returns a single record data, again using the promise object.
Insert() - this function receives four parameter (firstName, lastName, age, active) and creates an object with those parameter values. After that sends 'POST' request to the server with the data object and returns response.statusText. This statusText would be the response whether the insertion of the record is successful or not.
Update() - this function updated record into the database. It accepts five parameters, creates an object with those parameters and sends 'PUT' request with the object data and return the response string.
Remove() - this function removes a record from the database. It accepts id as parameter and sends 'DELETE' request to the server and receive response text that is returned to the calling function. In case of this function, we are returning statusText, status and data just for the sake of visibility that what the server returns. You can just reutrn statusText only.