Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Sharing Data between pages in AngularJS returning empty

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

like image 749
Oam Psy Avatar asked Apr 04 '15 16:04

Oam Psy


Video Answer


2 Answers

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.

like image 165
Yauheni Leichanok Avatar answered Nov 15 '22 02:11

Yauheni Leichanok


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.

like image 34
IvanMalenko Avatar answered Nov 15 '22 04:11

IvanMalenko