如何将控制器 http 调用转换为接受参数的 Service/factory 模式

Question

我有一个控制器正在调用 http.get、http.push 和 http.post 方法。

我正在学习 angularjs 并且发现最好在您的服务文件中调用您的 http.get。我可以用一个简单的 http.get 来做到这一点，但会与带有参数的 http.get 或 http.get/http.post 混淆：

我现在的控制器是这样的

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;
}

我想这样分开

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")
    };

 };

Answer 1

简单。制作一个接受参数的工厂。

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

app.factory("SharedServices", ["$http", function($http) {
    return {
        getItems: function(url, parameters) {
            return $http.get(url, {
                //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',
            });
        }
        // ETC. ETC. ETC.
        // follow this pattern for methods like PUT, POST, anything you need
    };
}]);

在您的控制器中使用服务：

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

    //do things with the shared service
    $scope.postMyThings = function() {
        SharedServices.postItems('path/to/api', itemsArray).then(function(response) {
            //success callback, do something with response.data
        }, function(response) {
            //an error has occurred
        });
    };

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

}]);

如何将控制器 http 调用转换为接受参数的 Service/factory 模式

How do I convert a controller http call to a Service/factory pattern that takes in a parameter

javascript

angularjs

angularjs-service

angularjs-factory