如何将控制器http调用转换为接受参数

时间:2016-05-02 19:02:40

标签: javascript angularjs angularjs-service angularjs-factory

我有一个调用http.get,http.push和http.post方法的控制器。

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

我当前的控制器看起来像这样

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

 };

1 个答案:

答案 0 :(得分:2)

简单。建立一个接受参数的工厂。

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

}]);