Restangular ui.router resolve asynchronous or synchronous

Issue

I am using Restangular and ui.router.

Below is my code.

app.config(["$urlRouterProvider", "$stateProvider", "$locationProvider","RestangularProvider",
            function ($urlRouterProvider, $stateProvider, $locationProvider, RestangularProvider ) {
                $urlRouterProvider.otherwise("/");
                $stateProvider
                    //
                    .state("home", {
                        url: "/",
                        templateUrl: 'app/class/html/classList.html',
                        controller: 'ClassSectionListCtrl as vm',
                    resolve: {
                        acYear: function (Restangular, $stateParams) {
                            return Restangular.all('currentYear').getList();
                        },
                        classSectionSubjectMatrix: function (Restangular, $stateParams) {
                            return Restangular.all('classSectionSubjectMatrix').getList();
                    }

                }

I have two resolve return acYear & classSectionSubjectMatrix. My question is, both acYear & classSectionSubjectMatrix trigger at same time (parallel) or it will in sequential manner (first acYear then classSectionSubjectMatrix) ?

Second,is there any way to capture how much time both acYear & classSectionSubjectMatrix taking from start to end independently in my controller?

something like this .

acYear                          ---> 0%....10%.....30%........60%.......100%
classSectionSubjectMatrix       ---> 0%...........50......100%

RestangularProvider.addResponseInterceptor(
                    function (data, operation, what, url, response, deferred) {
                        pendingRequests--;
                        if (pendingRequests == 0) {
                            console.log('loaded data2 (hide indicator)' + JSON.stringify(what));
                        }
                        return data;
                    });

Solution

First of all you do not resolve anything on state resolve…

If you want to pass promise I believe using service will be much better. So I assume you want to resolve promise on state resolve and return resolved object to controller.

There is no order between resolve variables unless one of them depends on others.
Which means in this case you can think that both will be start at the same time

resolve: {
            acYear: function (Restangular, $stateParams) {
               return Restangular.all('currentYear').getList().then(function(response){
                  return response;
               });
            },
            classSectionSubjectMatrix: function (Restangular, $stateParams) {
               return Restangular.all('classSectionSubjectMatrix').getList().then(function(response){
                  return response;
               });
            }
}

but if one of them depend other it should wait dependent value resolved first

resolve: {
            acYear: function (Restangular, $stateParams) {
               return Restangular.all('currentYear').getList().then(function(response){
                  return response;
               });
            },
            classSectionSubjectMatrix: function (acYear, Restangular, $stateParams) {
               return Restangular.all('classSectionSubjectMatrix').getList().then(function(response){
                  return response;
               });
            }
}

in this one acYear should be resolved first then second request will be made for classSectionSubjectMatrix

For second question you cannot calculate time on controller as you resolving them in state…

Answered By – Poyraz Yilmaz

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.