What is the best way to change an http call in a controller to a Service/factory pattern that accepts a parameter?

Question

What is the best way to change an http call in a controller to a Service/factory pattern that accepts a parameter?

Currently, I have a controller making use of http.get, http.push and http.post methods within my AngularJS app.

During my learning journey with AngularJS, I've discovered that it's more efficient to place http.get calls in service files. While I can easily handle simple http.get requests, I find myself struggling with http.get by id or when passing parameters for http.get/http.post calls.

Here is a snippet of my current controller:

angular.module("app-complaints")
.controller("clcontrol", clcontrol);

function clcontrol($routeParams, $http, $scope) {
    $http.get(baseURL + "/api/complaints/" + $scope.complaintCase + "/checklists")
        .then(function (cl) {
            //success
            $scope.index = 0;
            $scope.cl = [];
            $scope.cl = cl;

I aim to refactor it like this:

controller.js

angular.module("app-complaints")
.controller('clcontrol', function ($http, $scope, $q, Service, $timeout) {
....
getCL();
function getCL(){
Service.getCl()
.success(function(cl){
$scope.cl = [];
$scope.cl = cl;
}

service.js

angular.module("app-complaints")
.factory('Service', ['$http', function ($http) {
        Service.getCL = function () {
        return $http.get(urlBase + "/api/complaints/" + complaintCase + "/checklists")
    };

 };

javascript angularjs angularjs-service angularjs-factory

Answer 1

Answer №1

Here's a simple solution: Create a factory that accepts parameters.

var app = angular.module("MyApp", [ /* dependencies */]);

app.factory("SharedServices", ["$http", function($http) {
    return {
        getItems: function(url, parameters) {
            return $http.get(url, {
                //include optional query string like {userId: user.id} -> ?userId=value
                params: parameters
            });
        },
        postItem: function(url, item) {
            var payload = {
                item: item
            };
            return $http.post(url, payload);
        },
        deleteItem: function(url, item) {
            var payload = {
                item: item
            };
            return $http({
                url: url,
                data: payload,
                method: 'DELETE',
            });
        }
        // Continue this pattern for other methods like PUT and POST as needed
    };
}]);

Utilize the service in your controller:

app.controller("MainCtrl", ["$scope","SharedServices", function($scope, SharedServices) {

    //use shared service functions here
    $scope.postMyThings = function() {
        SharedServices.postItems('path/to/api', itemsArray).then(function(response) {
            //handle success callback and work with response.data
        }, function(response) {
            //an error occurred
        });
    };

    $scope.getMyThing = function() {
        SharedServices.getItems('path/to/api/get').then(function(response) {
            //handle success callback and work with response.data
        }, function(response) {
            //an error occurred
        });
    }

}]);

Answer 2

Here's a simple solution: Create a factory that accepts parameters.

var app = angular.module("MyApp", [ /* dependencies */]);

app.factory("SharedServices", ["$http", function($http) {
    return {
        getItems: function(url, parameters) {
            return $http.get(url, {
                //include optional query string like {userId: user.id} -> ?userId=value
                params: parameters
            });
        },
        postItem: function(url, item) {
            var payload = {
                item: item
            };
            return $http.post(url, payload);
        },
        deleteItem: function(url, item) {
            var payload = {
                item: item
            };
            return $http({
                url: url,
                data: payload,
                method: 'DELETE',
            });
        }
        // Continue this pattern for other methods like PUT and POST as needed
    };
}]);

Utilize the service in your controller:

app.controller("MainCtrl", ["$scope","SharedServices", function($scope, SharedServices) {

    //use shared service functions here
    $scope.postMyThings = function() {
        SharedServices.postItems('path/to/api', itemsArray).then(function(response) {
            //handle success callback and work with response.data
        }, function(response) {
            //an error occurred
        });
    };

    $scope.getMyThing = function() {
        SharedServices.getItems('path/to/api/get').then(function(response) {
            //handle success callback and work with response.data
        }, function(response) {
            //an error occurred
        });
    }

}]);

What is the best way to change an http call in a controller to a Service/factory pattern that accepts a parameter?

Answer №1

Similar questions

Dynamic inheritance in Node.js based on the version being used

Issue with angular ui-router transition override/intercepted/disrupted/terminated

Is it possible to utilize the `.apply()` function on the emit method within EventEmitter?

How to return a variable to Express when clicking a button?

Removing connected entries with pre middleware on mongoose

Visual Studio Code encounters a Node.js error stating "Module not found"

Why am I receiving an error message stating "undefined is not a function" when trying

Ways to turn off hover highlighting

Easily validating forms using javascript

Only the first column of a row in Flexbox will have a line break when exceeding the

Unable to establish connection with remote database server on Hostinger platform

Use regular expressions to exclude occurrences of the character 'n' from your text

Find the elements of <a> tags specifically without the attribute href

Can we access local storage within the middleware of an SSR Nuxt application?

Change the state within the click event handler

To manipulate the array in a more complex manner, either add or remove the item based on its existence: if it's already in the array, remove it; if it

What is the best way to combine elements from different arrays to create a comprehensive listing?

Creating a personalized tab label in Angular Material's md-tabs

Calculate averages of an array and show them when the page loads using Vue

How to style the background color of the selected option in a <select> element using