How to execute simultaneously an $http in angularjs

I have a module(app) which contains inside a service(globalService) with $http. This module now is included inside another module (invoicesApp) which has a service(invoicesService) too. Using the service of the second module I’m loading the service of the first service and returning back some information. The problem which I’m having is that the parameters of the first service are overridden from the second service and for that reason both $http are executing the same request. Here is my code

This is my first Service:

Read More
(function(angular){
  var app = angular.module('app',[])
    .config(function($locationProvider) {
        $locationProvider.html5Mode({
            enabled: true,
            requireBase: false
        });
    })
    .service('globalService', function($http, $location,$q){
        console.log("globalService");

        this.getPaging = function()
            {
                var deferred = $q.defer();
                var paging_parameters = $location.search();
                paging_parameters.action = "client_pagination";
                var req = {
                    url: ajaxpagingscript.ajaxurl,
                    method: "GET",
                    params: paging_parameters
                }
                $http(req).success(function(paging_data) {
                    console.log("globalService " + JSON.stringify(paging_data));
                    deferred.resolve(paging_data.paging);
                }).error(function(data, status, headers)
                {
                    $scope.error = "";
                });

                return deferred.promise;
            }
        });
 })(window.angular);

Second Service:

(function(angular){

    var invoicesApp = angular.module('invoicesApp',['ngRoute','app'])
         .config(function($locationProvider,$routeProvider) {
            $locationProvider.html5Mode({
                enabled: true,
                requireBase: false
            });
         })
        .controller('InvoicesController', ['$scope','transactionService',
        function($scope,invoicesService) {
            $scope.invoices = [];
            console.log("testing");

            var paging = invoicesService.getPaging();
            var promise = invoicesService.getInvoicess();
            promise.then(function(data)
            {
                console.log("invoices " +JSON.stringify(data));
                angular.forEach(data.new_data, function(JSON_ARRAY) {
                    $scope.invoicearray.push(JSON_ARRAY);
                });
            });
        }])
        .service('invoicesService', function(globalService, $http,$location,$q){

            this.getPaging = function() { return globalService.getPaging(); };
            this.getInvoicess = function() {
                    var deferred = $q.defer();
                    var invoices_parameters = $location.search();
                    invoices_parameters.action = "collect_invoice_data";

                    var req = {
                        url: ajaxpagingscript.ajaxurl,
                        method: "GET",
                        params: invoices_parameters
                    };
                    $http(req).success(function(data) {
                        deferred.resolve(data);
                    }).error(function(data, status, headers)
                    {
                        $scope.error = "";
                    });

                    return deferred.promise;
            };

        });
})(window.angular);

The console.log for both services, returning back the same data. The page that loads this app, loads invoicesApp so the globalService is executed fine but the parameters that pass to $http are wrong. Can anyone help me?

Related posts

Leave a Reply

1 comment

  1. You don’t need to call the function, you need to pass the reference of the function if that is what you are trying to do in invoicesService.

    this.getPaging = function() { return globalService.getPaging(); };
    

    should be

    this.getPaging = globalService.getPaging;