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 i.e. 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
   };
});

yes you will lose the data once the page is reloaded. you can make use of $window.sessionStorage to save your data. It wont be lost then. — Avantika Saini, May 06 '16 at 07:16

score 0 · Answer 1 · answered May 06 '16 at 05:27

0

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.

answered May 06 '16 at 05:27

Yatin Gera

191
1
7

at first I was opening the next page by clicking on the button (using href) which would still made the page to be refreshed. Then I saw this (window.open() ) and applied it, still no use .I know the problem is that I am opening a new page. In that page, the ng-app is the same. The ng-controller is DeviceController2. – Akshay May 06 '16 at 05:31
@Yatin In future, please use comments for questions, do not post a question as an answer. – GregL May 06 '16 at 05:52
1

@GregL Apologies. I am new to SO and had the comments option disabled. Will take care. – Yatin Gera May 06 '16 at 05:53

Alexander Kravets · Answer 2 · 2016-05-06T05:47:19.157

0

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');

edited May 06 '16 at 05:47

answered May 06 '16 at 05:27

Alexander Kravets

4,245
1
16
15

at first I was opening the next page by clicking on the button (using href) which would still made the page to be refreshed. Then I saw this (window.open() ).I know the problem is that I am opening a new page. Then how would this problem be solved ? – Akshay May 06 '16 at 05:32
1

If you have multiple page (Single page app), you should use a router, the best out there is angular-router or angular-ui-router. – severin.julien May 06 '16 at 05:33
can't this be done without using angular-router ? Let me make the situation more clear. I select the device on the 1st page and click on 'Show Details' button. Now the button redirects to new page and I want that the new page to hold the device value and accordingly show the properties of that device. The display of properties is not what I am concerned to right now. – Akshay May 06 '16 at 05:38
Use `$location.path('/page2')` to navigate to the second page from code. – Alexander Kravets May 06 '16 at 05:40
the url of both pages are different. I don't want to append values in the first url. I want to make a call to a new url. – Akshay May 06 '16 at 05:47
my 1st url is localhost:8080/Project/1stPage.jsp and I want to redirect to localhost:8080/Project/2ndPage.jsp – Akshay May 06 '16 at 05:52
That's not going to work until the both pages are the parts of the same angular application. – Alexander Kravets May 06 '16 at 05:54
you should use angular ui router and on click of button route to the ui-sref="Project/2ndPage" and resolve the function first – DK3 May 06 '16 at 05:55
@AlecKravets both the pages use the same ng-app value. Their controllers are different. Won't it resolve the issue ? – Akshay May 06 '16 at 06:02
@Akshay No - as soon as the browser changes pages, the entire Angular application is wiped and loaded again when the next page loads. The only way to do what you want is to do as suggested and use an Angular router to handle the different pages inside the one Angular app. – GregL May 06 '16 at 06:54
@GregL ok.. I will learn about angular router and implement it. Thank you for the info. – Akshay May 06 '16 at 07:07

score 0 · Answer 3 · answered May 06 '16 at 06:08

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;
});

I think I am making the mistake in redirecting to the new page. I am right now using window.open('url to new page'). The data gets set from the 1st controller and the alert shows that data has been set. Now when the new page opens. In that page, the alert shows no value of data — Akshay, May 06 '16 at 06:18

score 0 · Accepted Answer · edited May 23 '17 at 12:07

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.

thank you so much.. It's working for my application. I just want to ask if it has any limitation ? — Akshay, May 09 '16 at 04:45

Sharing data between controllers of 2 different pages using Angularjs

4 Answers4