Organizational Research By

Surprising Reserch Topic

angular app how to sync call of multiple views


angular app how to sync call of multiple views  using -'share'

I am building an angular single page app, which have a structure like this.

"app.parent - parent state"
"app.parent.childState - child state"
"app.parent.childSatate" has 4 multiple named view inside it.


I have to show something on parent once all 4 views fetched their respective data.
Any suggestions how to do it?
    

asked Oct 6, 2015 by badhwar.rohit
0 votes
9 views



Related Hot Questions

2 Answers

0 votes

Use $rootScope (recommended factory/service) in all four controllers (for all 4 views), and
have certain count/flag which keeps track of data fetching in all controllers and on the main page/controller keep checking for that $rootScope/factory value.

$rootScope/ facetory/services are accessible across controllers/views, so that you can modify in several controllers and access the latest value on some other controller/factory/service.

Related documentations: https://docs.angularjs.org/api/ng/service/$rootScope https://docs.angularjs.org/guide/services

answered Oct 6, 2015 by pradip.bhoge
0 votes

Suppose you have 4 services that you know will be the data source for 4 different child views. You can setup your services so that they return references, but still provide access to the underlying promises. The idea is that you want your views to use the reference when rendering the view; the parent will use $q.all to wait until the individual promises are resolved before it shows something.

Factories

app.factory('service1', function($http) {
    var data1 = [];
    return {
        promise: $http({...}).success(function(result) {
                     angular.copy(result, data1);
                 }),
        getData: function() {
            return data1;
        }
    }
}); 

app.factory('service2', function($http) {
    var data2 = [];
    return {
        promise: $http({...}).success(function(result) {
                     angular.copy(result, data2);
                 }),
        getData: function() {
            return data2;
        }
    }
}); 
app.factory('service3', function($http) {
    var data3 = [];
    return {
        promise: $http({...}).success(function(result) {
                     angular.copy(result, data3);
                 }),
        getData: function() {
            return data3;
        }
    }
}); 

app.factory('service4', function($http) {
    var data4 = [];
    return {
        promise: $http({...}).success(function(result) {
                     angular.copy(result, data1);
                 }),
        getData: function() {
            return data4;
        }
    }
}); 

Child Controllers

app.controller('ctrl1', function($scope, service1) {
      $scope.data1 = service1.getData();
});
app.controller('ctrl2', function($scope, service2) {
      $scope.data2 = service2.getData();
});
app.controller('ctrl3', function($scope, service3) {
      $scope.data3 = service3.getData();
});
app.controller('ctrl4', function($scope, service4) {
      $scope.data4 = service4.getData();
});

Parent Controller

app.controller('parent', function($scope, $q, service1, service2, service3, service4) {
     $q.all(
       [service1.promise,
        service2.promise,
        service3.promise,
        service4.promise])
      .then(function() {
           $scope.done = true;
      });
});

Parent View

 
All child data loaded
answered Oct 6, 2015 by vickeykumar66

...