Sharing data between controllers of 2 different pages using Angularjs

Question

The task is to select a device in a select box and display the properties related to name ie Name, type, device_family etc. on the other page.

The problem that I am getting is that the data gets set in the 1st controller. That's fine but it doesn't go to the next page which uses DeviceController2. The alert of DeviceController2 does not show any value in it. I just have to send the device to next page.

For this, my 1st controller is

App.controller('DeviceController', function($scope,$http,commonDeviceService) {
    var self = this;
    self.show = function(device){
        commonDeviceService.set(device);
        alert("Device selected is "+device);
        window.open('url to next page');
    };
});

commonDeviceService is my common service for the controllers.

2nd controller is

App.controller('DeviceController2', function($scope,$http,commonDeviceService) {
    $scope.device = commonDeviceService.get();
    alert($scope.device);
}); 

And the commonDeviceService is

App.factory('commonDeviceService', function() {
    var shareddata='';

   function set(data) {
       shareddata = data;
       alert("shared data in set call is "+shareddata);
   }

   function get() {
       alert("shared data in get call is "+ shareddata);
       return shareddata;
   }

   return {
       set: set,
       get: get
   };
});

Answer 1

How are you displaying the new page? Is the new page just a template that you are rendering in or is it a new HTML with its own ng-app?

if you can provide you HTML markup, it would be really helpful.

Answer 2

This happens because you're reloading the page by doing this:

window.open('url to next page');

Thus the entire angular application gets reloaded and all data is lost.

You should use the $location service for navigation. So, given the following routing config:

    angular.module('app')
    .config(function($routeProvider) {
        $routeProvider.when('/page1', {templateUrl: 'page1.html', controller: 'Page1Controller'});
        $routeProvider.when('/page2', {templateUrl: 'page2.html', controller: 'Page2Controller'});
    });

you can navigate to the page2 from code by doing this:

$location.path('/page2');

Answer 3

Try with given changes. Make one function in controller2 and call that on page load, in that function get data from service.

Here you are trying to get data which may be not set yet.

2nd controller is

App.controller('DeviceController2', function($scope,$http,commonDeviceService) {
    var self = this;
    $scope.device = null;

    self.show = function(){
        $scope.device = commonDeviceService.get();
        alert($scope.device);
    };

    self.show();
});

You can do it in given way as well

Controller2

App.controller('DeviceController2', function($scope,$http,commonDeviceService) {
var self = this;
$scope.device = null;
self.show = function(){
        commonDeviceService.get().then( function(data) {
            $scope.device = data;
            alert($scope.device);
        }, function(error) {
            //error
        });
};
 self.show();
});

Service

App.service('commonDeviceService', function() {
    var shareddata = null;

   function set(data) {
       shareddata = data;
       alert("shared data in set call is "+shareddata);
   }

   function get() {
       alert("shared data in get call is "+ shareddata);
       return shareddata;
   }

   var data = {
       set: set,
       get: get
   };

   return data;
});

Answer 4

Often we need to keep a client session state in our angularjs application so it would survive page refresh and navigations within the application. for such cases you may use $window.sessionStorage

Controller1:

App.controller('DeviceController', function($scope,$http,$window) {
var self = this;
self.show = function(device){
    $window.sessionStorage.device = device;
    alert("Device selected is "+device);
    window.open('url to next page');
};
});

Controller2:

App.controller('DeviceController2', function($scope,$http,$window) {
$scope.device = $window.sessionStorage.device;
alert($scope.device);
});

this will serve your purpose of data sharing between controllers but one should keep in mind that its storage capacity is limited to 5MB. Also if you open a new tab to the exact same URL it will be a new sessionStorage object. Reference: $window.sessionStorage vs $cookieStore

I have removed the code for angular factory assuming that it's only purpose was for this data sharing which has now been fulfilled by session storage.