How can I use the same data in multiple controllers?

Question

Here's the point: I'm building charts for a web application. I get the information for the charts from a single object from a webservice in java. Here's basically the format of the JSON object I'm retrieving

{ "chart1Info": [9, 42, 43, 7, 20], "chart2Info": [45, 3, 21, 34] (...and so on)}

And on my app.js (where my AngularJS code is) I have 7 controllers for the 7 charts. In each controller I'm calling the service to get the same object with all the information.

app.controller('chart1', function($scope, $http){
    $http.get('//WEBSERVICE_PATH').then(function(response) {
        $scope.chartData = response.data; //The JSON object
        //Then I build the charts...    
    });
});

What I want to do is call the service 1 time only and save the object so my controllers can use it since it's the same object for every one. I tried using a main controller envolving all other controllers and setting a propertie of $rootScope to the JSON object like

$rootScope.chartData = response.data;
//Inside the $http.get() function

But it is undefined in the other controllers. Thanks for the answers

When global controller is load call chart service and store those data in $rootScope varible then you can use it for further — Paresh Gami, May 08 '17 at 11:47

score 1 · Answer 1 · answered May 08 '17 at 11:48

You need to add $rootScope dependency in your controllers, otherwise $rootScope won't work properly.

app.controller('chart1', function($scope, $http,$rootScope){
    $http.get('//WEBSERVICE_PATH').then(function(response) {
        $scope.chartData = response.data; //The JSON object
        //Then I build the charts...    
    });
});

score 0 · Answer 2 · answered May 08 '17 at 11:53

0

You should implement a Factory service in which the data only will be loaded if there is no data retrieved yet.

Check it here https://docs.angularjs.org/guide/services

Then the factory can be shared across the needed controllers as a dependency.

answered May 08 '17 at 11:53

jmtalarn

1,513
1
13
16

score 0 · Answer 3 · answered May 08 '17 at 11:53

// Use localstorage

try this.

app.controller('chart1', function($scope, $http){
    $http.get('//WEBSERVICE_PATH').then(function(response) {
        localStorage.chartData = response.data; //The JSON object
        $scope.chartData = localStorage.chartData;
        //Then I build the charts...    
    });
});

Then you can call in any controller. Like this

 app.controller('chart2', function($scope){
      $scope.chartData = localStorage.chartData;

  });

score 0 · Answer 4 · answered May 08 '17 at 11:55

Try to implement a factory service and check put that value to a variable and fetch value only if that variable dont have value.

otherwise implement a parent controller and call the api there and store it to a variable and call that data in all the child controllers

score 0 · Answer 5 · answered May 08 '17 at 11:56

What you probably want to do is to create an angular service to load the data and then use the angular event system to communicate to the chart controllers the event of data reading complete, so that controllers may query the service for the new data to display.

Communicating data via the rootScope is not a good practice.

How can I use the same data in multiple controllers?

5 Answers5