Sharing Data between pages in AngularJS returning empty

Question

Typically i write SPA's and sharing data between controllers is simple with a service.

I am not using an SPA format (not using ng-view), and trying to share data between pages but on load of the second page (to get data) its empty.

PAGE1 (index.html):

<div ng-controller="CreateList">
    <input type="text" ng-model="myValue">
    <div ng-click="share(myValue)">Share</div>
</div>

PAGE2:

<div ng-controller="GeList">
    <p>{{ sharedData  }}</p>
</div>

JS:

app.controller('CreateList', function($scope, $location, $http, serviceShareData) {

    $scope.share= function (selectedValue) {

        if (selectedValue === undefined ) {
            console.log ("its undefined");
        }       
        else {
            console.log (selectedValue);

            serviceShareData.addData(selectedValue);
            window.location.href = "PAGE2.html";
        }
    }

});


app.controller('GeList', function($scope, $location, $http, serviceShareData) { 

    $scope.sharedData = serviceShareData.getData();

    console.log($scope.sharedData);

});

app.service('serviceShareData', function() {
    var myData = [];

    var addData = function(newObj) {
        myData.push(newObj);
    }

    var getData = function(){
        return myData;
    }

    return {
        addData: addData,
        getData: getData
    };
});

Here's a plunkr: http://plnkr.co/edit/6VHJhirnHZxBpKOvqzI6?p=preview

Solution 1

There is a number of ways to share data between pages - local storage, session storage, indexedDB, cookies or you can even pass you data as a paramter like this:

window.location.href = 'page2.html?val=' + selectedValue;

Here is a quick example of how your service may be looking using sessionStorage:

app.service('serviceShareData', function($window) {
    var KEY = 'App.SelectedValue';

    var addData = function(newObj) {
        var mydata = $window.sessionStorage.getItem(KEY);
        if (mydata) {
            mydata = JSON.parse(mydata);
        } else {
            mydata = [];
        }
        mydata.push(newObj);
        $window.sessionStorage.setItem(KEY, JSON.stringify(mydata));
    };

    var getData = function(){
        var mydata = $window.sessionStorage.getItem(KEY);
        if (mydata) {
            mydata = JSON.parse(mydata);
        }
        return myData || [];
    };

    return {
        addData: addData,
        getData: getData
    };
});

Plunkr is here.

Solution 2

When you reload the page like this

window.location.href = "PAGE2.html";

the application is initialized again with all controllers, services, etc. Use web storage in your service to store data.

Don't use default js window object in your app. If you need to work with location, use $location service. If you need to get window properties, use $window object.

Use ng-view or try ui-router.

Comments

[Oam Psy]

great example and plunker. Quick question, what is App.SelectedValue

[Yauheni Leichanok]

@OamPsy session storage is a key-value storage engine. App.SelectedValue is actually the key that is used to read/write your data. Can be anything.