CODEWITHSUNDEEP
javascriptjqueryangularjs
Praveen D
Praveen D

Reputation: 2377

How to add promise for templateUrl in Angular Js

I want to show UI after all promises has complete. When I move to any step , before this I do some code execution. I am stuck here my templateURl gets executed synchronously. I want templateUrl should execute once all execution has been completed (from .run method).

below is my app.js

(function () {
    "use strict";
    var app = angular.module("autoQuote", ["ui.router", "ngResource"]);

    app.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {
            $urlRouterProvider.otherwise("/");

            $stateProvider
                    .state("Cars", {
                        url: "",
                        templateUrl: "/rc1/renderStep/cars"
                    })
                    .state("Drivers", {
                        url: "/drivers",
                        templateUrl: "/rc1/renderStep/drivers",
                        controller: "renderStepCtrl",
                    })
        }])
    app.run(["$log", "$rootScope", "$state", "dtoResource", "questionResource", "postDtoFactory", function ($log, $rootScope, $state, dtoResource, questionResource, postDtoFactory) {
            $log.info('Post DTO on page load.');
            $rootScope.$state = $state;
            dtoResource.rc1LoadDTO()
                    .then(function (data) {
                        $rootScope.AutoQuote = data;
                        postDtoFactory.postDto()
                                .then(function (data) {
                                    questionResource.getQuestions($rootScope.AutoQuote.postAutoQuoteObj.SessionInfo.StateCode)
                                            .then(function (questions) {
                                                console.log('questions', questions);
                                                $rootScope.questions = questions;
                                                //$rootScope.answers = {PC:12345,VehicleYear_1:2017}; // test code
                                                console.log('Obtained questions. Assigned to rootscope');
                                            })
                                })
                    })
                    .then(function () {
                        console.log('This should be printed after the above methods are done     executing');
                        console.log($rootScope);
                    })
                }])
}());

Upvotes: 0

Views: 126

Answers (1)

yukuan
yukuan

Reputation: 541

you can put the code to ui-router resolve.

$stateProvider.state('demo', {
      url: '/demo',
      template: require('./views/demo.html'),
      controller: 'DemoController as vm',
      resolve: {
        resolvedInfo: [demoService,
          function (demoService) {
            //put some code execution 
            return promise;
          }]
      }
    })

Upvotes: 2

Related Questions