How to all data at once and apply to controllers in angularjs

Question

i want to get all data at once through AJAX($http) request and apply to all controllers

i picked this code from google it shows the i have to make requests for each controller were i can get data in once ajax call and apply objects according to the controlers i have tried factory in angular but it did't work please help me to find out a way where i can get data at once and update all data in controllers

<p>Today's welcome message is:</p>
<h1>{{myWelcome}}</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm")
    .then(function(response) {
        $scope.myWelcome = response.data;
    });
});
</script>

thank you.

Possible duplicate of [Share data between AngularJS controllers](https://stackoverflow.com/questions/21919962/share-data-between-angularjs-controllers) — 31piy, Apr 16 '18 at 11:43
Yes i tried factory and i am getting the data and sharing the data into all controllers also using factory but problem is controllers are set before i get $http response so i am asking a way where i can update all controllers whenever i get response in Factory function. — Vikas Kandari, Apr 16 '18 at 11:46
Emit the event using `$rootScope.$emit` but it'll be tedious as all controllers will have to subscribe to `$rootScope.$on` — Shashank Vivek, Apr 16 '18 at 11:46
Can you help me with the scenario so that I can help you with it ? May be you should create a variable on `$rootScope` or create a `value` in AngularJS as `$rootScope` is global and should not be touched unless necessary — Shashank Vivek, Apr 16 '18 at 11:48
this will update controller ? like suppose i have set the fields fname and lname to controler ABC and i have set fields Email and Pass to another controller DEF so i want them update according to the response i get from $http — Vikas Kandari, Apr 16 '18 at 11:50
@VikasKandari : did you get your solution. If so mark it as an answer — Shashank Vivek, Apr 16 '18 at 16:01

score 1 · Accepted Answer · answered Apr 16 '18 at 11:54

1

As per your comment, this will work:

mainApp.controller('ABC',function($rootScope){

    $scope.somethingHappened = function(){
        $rootScope.$emit('valueChanged',your_data_to_be_passed)
    }

})


mainApp.controller('DEF',function($rootScope){

    $rootScope.$on('valueChanged',function(event,data){
        console.log(data) // you'll see your_data_to_be_passed
    })  

})

Since, the controllers are not related, you should prefer $rootScope events rather than $scope.$broadcast or $scope.$emit. You can get more details about them on online tutorials

answered Apr 16 '18 at 11:54

Shashank Vivek

16,888
8
62
104

what if i want module specific data ? – Vikas Kandari Apr 16 '18 at 11:57
@VikasKandari You can't handle events on `$rootScope` level module wise. I think the approach which I have suggested will work just fine. You dont need to subscribe the event `valueChanged` outside your module. Please be more specific with your question so that I can provide the best solution as per my knowledge – Shashank Vivek Apr 16 '18 at 12:00
@VikasKandari : If you dont want `events` then for service approach to share data. – Shashank Vivek Apr 16 '18 at 12:01
in my simplest words suppose i have defined the controllers and a function that i will get All controllers data at once using ajax call. what i want whenever i get ajax data i want that data to be showed in corresponding controllers like response.data.ABC for ABC controller and response.data.DEF for DEF controller it would be nice if you can write a simplest code – Vikas Kandari Apr 16 '18 at 12:04
@VikasKandari : It can only be achieved using `events` as you want your controllers to automatically act once the `ajax` request is complete. Implement what I suggest and let me know if it isnt working. – Shashank Vivek Apr 16 '18 at 12:06

Shridhar Sharma · Answer 2 · 2018-04-16T11:55:46.907

0

You may use $rootScope instead

<p>Today's welcome message is:</p>
<h1>{{myWelcome}}</h1>

<script>
var app = angular.module('myApp', []);



   app.run(function($rootScope){
       $http.get("welcome.htm")
        .then(function(response) {
            $rootScope.myWelcome = response.data;
        });
   })

  app.controller('myCtrl', function($scope, $http) {
      // Here watch for scope

     $scope.$watch("myWelcome", function(value){
         console.log(value)
     })

  });
</script>

edited Apr 16 '18 at 11:55

answered Apr 16 '18 at 11:51

Shridhar Sharma

2,337
1
9
13

also in $http.get we are using $scope globally ? i don't think its globally available – Vikas Kandari Apr 16 '18 at 11:54
There was a little mistake, i forgot to use $rootScope in run block – Shridhar Sharma Apr 16 '18 at 11:56

score 0 · Answer 3 · answered Apr 16 '18 at 17:34

You could use localStorage and use JSON(stringify and parse) methods if the data is not a string, if its object access to properties, if its array access to index.

<script>
 var app = angular.module('myApp', []);
  app.run(function($rootScope){
   $http.get("welcome.htm")
    .then(function(response) {
         localStorage.setItem('data', JSON.stringify(response));
    });
   })

app.controller('anotherCtrl', function($scope, $http) {

    $scope.myWelcome = JSON.parse(getItem('data'));
     /*or you can do this
    var full_data = JSON.parse(getItem('data'));
    (object)$scope.myWelcome = full_data.[some_property];
    (array of objects)$scope.myWelcome = full_data[index].[some_property];
    (just array) $scope.myWelcome = full_data[index]  
    */

 });
</script>

How to all data at once and apply to controllers in angularjs

3 Answers3