javascript - 如何将 Controller http 调用转换为接受参数的服务/工厂模式

Question

我有一个正在调用 http.get、http.push 和 http.post 方法的 Controller 。

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

我当前的 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;
}

我想像这样把它分开

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

使用 Controller 中的服务:

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

}]);