Transferring data between different pages using angular services?

I want to transfer data from one page to another using angular service. I am able to store data in the service from one page but when I try to fetch the data from another page using a different controller, the data is not available.

I went through the questions asked on similar lines but the solutions that have been mentioned shows that data can be transferred between the controllers on the same page using the service.

My Question is : Is it possible to transfer data between different pages using angular service ?

Below is the snippet that I tried:

Page1.html

<body ng-controller="SearchController as searchCtrl">

<form name="searchForm" id="center" novalidate>

    <input type="text" id="searchInput" placeholder="Search " ng-model = "searchCtrl.search.searchText" required/>
    <input type="button" id="searchButton" value="Search" ng-click = "searchForm.$valid && searchCtrl.performSearch()"/>

</form>

</body>

Page2.html

<body ng-controller="ResultStoreController as resultStoreCtrl">
<div>
    <p>Search Value: {{resultStoreCtrl.data()}}</p>
</div>
</body>

app.js

(function(){
    var dummyApp = angular.module('dummyApp',[]);
    /**
     * Create a new service, so that data can be shared between the controllers.
     */
    dummyApp.service('peerSearchResultSharingService',function(){

        var results;

        return{
            storeResults: function(value){
                results = value;
            },
            fetchResults: function(){
                return results;
            }
        }

    });


    dummyApp.config(function($locationProvider){
        $locationProvider.html5Mode(true);
    });

    dummyApp.controller('SearchController',['$scope','$location','$window', 'peerSearchResultSharingService',function( $scope, $location, $window, peerSearchResultSharingService){

        var search ={};
        this.performSearch = function(){

          peerSearchResultSharingService.storeResults(search.searchText);
          $window.location.href ="http://localhost:63342/TestAngular/app/views/Page2.html";

        };
    }]);



    dummyApp.controller('ResultStoreController',['peerSearchResultSharingService',function(peerSearchResultSharingService){
            var data;
            data = peerSearchResultSharingService.fetchResults();
     }]);


})();

Thanks

Solution

Short answer: Not with a plain Angular service, at least.

Long answer: Making a new request unloads the currently loaded javascript, meaning that the stored model is discarded as well. All the backing logic will be loaded again with the new page, so your data will be reset to default values.

Turning your app into a Single Page Application would solve your problem, since the service would work as it should.

If you really plan to continue with multiple pages, you'll need a temporary container outside of Angular's bonds to store the info and retrieve it in the next page (i.e. localstorage, server side or set a cookie).