AngularJS Load controllers only when parent controller finishes async call

Question

I am building a website with AngularJS and Google Cloudendpoint

The architecture is as follow. I have :

1 - a MainCtrl that manages the overall site display (top menus, modals, etc...)

<body ng-controller="MainCtrl" ng-cloak main-directive>
    ...
    <div ng-view></div>
    ...
</body>

2 - ng-view with a controller for each page that all have a their own controllers managed by the $routeprovider

main.js

.config([
    '$routeProvider',
    '$locationProvider', 
    '$httpProvider',
    function($routeProvider, $locationProvider, $httpProvider) {

                    ...
        $routeProvider.when('/example', {
            templateUrl : 'partials/example.html', 
            controller  : 'ExampleCtrl',
            access      : accessLevels.PUBLIC
                    }
                    ...
        $routeProvider.otherwise({redirectTo: '/'});
    }

The MainCtrl needs to do an async call to a Google Cloud Endpoint in order to get the session looking like this.

gapi.client.myapi.app.init().execute(function(resp){});

So far what I have done is wrap that code in a Service function called by the MainCtrl then do a watch in every children controller on an initDone value that gets updated in the MainCtrl when the async call is done.

MainCtrl

SessionService.init().then(function(data){
    $scope.initDone = SessionService.getInitDone();
});

Service

angular.module('myapp.services').service('SessionService', function ($http, $q, $rootScope) {

this.initDone = false
this.session = {}

this.init = function(){
    var s = this; 
    var deferred = $q.defer();
    gapi.client.myapi.app.init().execute(function(resp){
        deferred.resolve(resp);
        s.initDone = true;
    });
    return deferred.promise;
}

this.getInitDone = function(){
    return this.initDone;
}

});

ExampleCtrl

angular.module('myapp.controllers').controller('ExampleCtrl', function MainCtrl($scope, $timeout, $log, $location, SessionService) {

$scope.$watch('initDone', function(newVal, oldVal){
    $scope.testValue = SessionService.getInitDone()
})

});

While this work I am not sure it is the right solution. What I would like would be to be able to keep the ng-view waiting until the MainCtrl has done his job.

Because doing the way I do it means that ng-view gets displayed then once the call to the endpoint gets updated which does not look too good from a user prospective.

I tried to play with the resolve in the $routeProvider and do the API call from there but then my MainCtrl does not get the session values properly.

What would be my solution would be to do a :

   $routeProvider.when('/example', {
templateUrl : 'partials/example.html', 
controller  : 'ExampleCtrl',
access      : accessLevels.PUBLIC,
    resolve     : MainCtrl.init
}

But MainCtrl is not available in the $routeProvider

Another idea would be to intercept the ng-view call but I am not sure where to do this and have access to Service at the same time.

Thanks for any idea/help

EDIT

I tried to do something like this in my main.js

        $routeProvider.when('/example', {
            templateUrl : 'partials/example.html', 
            controller  : 'ExampleCtrl',
            access      : accessLevels.PUBLIC,

            resolve: {
                sessionData: ["$q", "SessionService", function($q, SessionService) {
                    //console.log(SessionService.getTest())

                    var deferred = $q.defer();
                    gapi.client.myapi.app.init().execute(function(resp){
                        deferred.resolve(resp);
                    });
                    return deferred.promise;
                }]

        });

Which works if I want each children controller to call to the api. What I would like though is have the children controllers to use whatever the MainCtrl has initialized once it is ready. Basically only load the views and associated controller when MainCtrl is ready (async call included

score 6 · Accepted Answer · edited May 23 '17 at 12:01

6

Edited based on comments below

The idea is to block off the view with an ng-if until the api call has returned:

// Session service
 this.init = function(){
      if (!this.initDone){
          var s = this;
          var deferred = $q.defer();
          gapi.client.myapi.app.init().execute(function(resp){
              deferred.resolve(resp);
              s.initDone = true;
          });
          return deferred.promise;
      }
 }




// MainController.js :
 $scope.initDone = false;
 SessionService.init().then(function(
     $scope.initDone = SessionService.getInitDone();
  });


// index.html: 
<div ng-if="initDone"> 
    <div id="view" ng-view> </div>
</div>

Old answer: Could you move the async call to Google to a service and have that service return a promise

     myApp.service('DataService', ['$rootScope', '$http', function ($rootScope, $http) {

     var promise = $http.get("http://google.com/theservice").success(function (data) {
             ......
      });
      this.promise = promise

In your routing setup then have a resolve which will wait for the only load the controller after the call to the Google service has returned

    when('/example', {templateUrl: 'partials/example.html', 
                   controller: 'ExampleCtrl', 
         resolve: {
            'MyServiceData': function (DataService) {
                return DataService.promise;
            }
        }}).

Edit: Have a look here how to return a promise for an api call https://stackoverflow.com/a/16117041/514463

edited May 23 '17 at 12:01

Community

1
1

answered Dec 07 '13 at 11:49

DavidC

1,842
1
18
32

I actually tried something similar with defer and resolve (see my edit above) but my problem is that I still need the MainCtrl to have the result of the call as well. I don't want the children controllers to call the service, I want them to be able to use what the MainCtrl called once it is ready. So the idea would be to modify the ng-view so it loads views and controller only when the MainCtrl is ready – Matthieu Dec 07 '13 at 12:28
My code is a bit different because Cloud Endpoint do not support promises as far as I know – Matthieu Dec 07 '13 at 12:42
The facebook example shows how to use promises with an api call that does not support them directly - see the plunker example he has in his post – DavidC Dec 07 '13 at 16:37
Hi Dave, thanks. I have no problems (well I did a bit) to do things in my MainCtrl based on the service API call. What I am struggling to do is blocking the routeProvider load of the children view/controller pair without doing another API call (I want to base it on the MainCtrl one). Sorry if I am a bit slow – Matthieu Dec 08 '13 at 11:56
1

Could you simply have a $scope.initialised = true in your google api success function in your main controller and in your example.html have a big block around all or most of it:
...
– DavidC Dec 09 '13 at 15:56
How simple was it eventually! Thanks David. Do you want to post this as an answer and I'll tick it for the right one? Session service this.init = function(){ if (!this.initDone){ var s = this; var deferred = $q.defer(); gapi.client.myapi.app.init().execute(function(resp){ deferred.resolve(resp); s.initDone = true; }); return deferred.promise; } } MainController.js : $scope.initDone = false SessionService.init().then(function( $scope.initDone = SessionService.getInitDone(); }); index.html :

– Matthieu Dec 10 '13 at 09:10
1

I have modified the original answer above. Good luck. – DavidC Dec 10 '13 at 10:03

AngularJS Load controllers only when parent controller finishes async call

1 Answers1

Linked