Using $http request results to present in differen module in Angular

Question

I am asking the user to put in his details and submit his form which invokes a $http request to the server and delivers data.

app.service('Request',function($http,$location)
var baseUrl='/system/views/files.json';
    var method='GET';
    var details={}
    this.flightReq=function(){
        $http({
            method:method,
            url:baseUrl,
            headers:{'Content-Type': 'application/x-www-form-urlencoded'},
            params: {'dep':'a', 'arl':'b','number':'c', 'date1':'d'},
            cache:true
        })
        .success(function(data,status){
            console.log(data);
            console.log(status);
            $location.path('/resultpresentation/example');
            details.flightDet=function(){ return data }
        })
        .error(function(data,status){
            console.log(data||"Request failed");
            console.log(status);
            $location.path('/');
        })
    };

As the request shows, once it has been successful the user will be redirected to a new location. However on this result page I now seek to present the results. Therefore I have to store the results in a variable or function which I need to inject into the other module. The http request is injected to both modules, but the results should only be injected to the result module.

However, even though I inject the Service Request now and use $scope.data=Request.flightDet; in the controller, I am not able to present the data in the view. I can see now it is presented in the console. The flight results are only in the console (after success but are not accessible in the view or even controllers)

However, I do not know how to do this? I hope you can help me.

Best

Answer 1

It is not suggested to change the route from inside a service. Instead, your service should just make a $http call and hand over the data back to the caller. Depending on the response data from the service call, the controller must do any further action.

However, you can always save the data inside $http.success() to a local variable inside the service which is making the call. And as long as you inject this service into any controller, you'll be able to access this data because all the AngularJS services are singletons.

Edit: Saves the data to a variable inside Request service to be used in any consuming controller.

app.service('RequestService',function($http,$location){
   var baseUrl='/system/views/files.json';
    var method='GET';
    var flightDetails={};
    this.flightReq=function(){
    $http({
        method:method,
        url:baseUrl,
        headers:{'Content-Type': 'application/x-www-form-urlencoded'},
        params: {'dep':'a', 'arl':'b','number':'c', 'date1':'d'},
        cache:true
    })
    .success(function(data,status){
        console.log(data);
        console.log(status);
        flightDetails = data;
    })
    .error(function(data,status){
        console.log(data||"Request failed");
        console.log(status);
    });
    };

    this.getFlightDetails = function(){
        return flightDetails;
    }
};

app.controller('testController', ['RequestService', function(requestService){
 console.log(requestService.getFlightDetails());
}]);

Answer 2

Given your current service configuration, in the .success handler you can set Request.myVar = data and then on another page/state, you will be able to access Request.myVar as long as you inject that service inside of the controller(s) that you are using on that page/state