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

Controlled Checkbox Component in React

Implementing a dual hover effect on a Div element

Guidelines for ASP.NET MVC 4: Delivering a file from a controller to a view using AngularJS

Failed to build development environment: Unable to assign the attribute 'fileSystem' to a null value

Tips for displaying dynamic content in VueJS?

Can images be sent to an Express API using SvelteKit's `on:change` event handler in combination with Form Actions?

AJAX function in Chrome console is throwing an error message stating "Unexpected Token }"

ExpressJS encountered an error due to an unsupported MIME type ('text/html') being used as a stylesheet MIME type

Inserting HTML code into the polymer

What's the most effective approach to verify if all visible input fields possess a value? (excluding the use of jQuery validator

Will my JavaScript function be triggered when the page is resized while printing?

The issue with setting width using % in React Native is causing trouble

Capturing C# log data for JavaScript interactions

Looking to $post the text strings within select boxes, rather than just their values

Menu that sorts items based on a specified range of values entered by the user

encountering an issue while working with Selenium on Google Colab

Ways to reload an independent page in order to access PHP session variables:

Exploring the intricacies of React's useEffect: Solving the challenge of updating data when two separate dependency arrays are

Showing a variety of pictures within a specified time frame

Using Javascript and jQuery to create an infinite animated background change with fade effect