Q: How to wait for resolve dependencies before rendering a template in angular ui router state I need to use the resolved data (using resolve block) in templateUrl function. How can I achieve that? Or can we wait for resolution to be comnplete before calling templateUrl function?

A: Here is auth service that need to check the user is authenticated or not before load the each view.

app.factory('appAuth', function ($http, $q, $location, $cookies, redirectToUrlAfterLogin, myHomePage) {
            var self = {};
            self.loginStatus= false;
            self.userDetails = {};
            self.Terminal = {};
            self.monument = {};
            self.loggedIn = function (callback) {
                    var deferred = $q.defer();
                    $http({
                        method: "GET",
                        url: 'rest/operator/loginStatus'
                    }).success(function (response, status, headers, config) {
                        if (callback) 
                            callback(response.IsSuccess, response.data);  
                        deferred.resolve();
                    });
                    return deferred.promise;
                };
            self.loggedOut = function(callback){
                    var deferred = $q.defer();
                    $http({
                        method: "POST",
                        url: 'rest/operator/logout'
                    }).success(function (response, status, headers, config) {
                        if (callback) 
                            callback(response.IsSuccess, response.data);  
                        deferred.resolve();
                    });
                    return deferred.promise;
                };        
            self.saveAttemptUrl = function () {
                if ($location.path().toLowerCase() != '/login') {
                    redirectToUrlAfterLogin.url = $location.path();
                } else {
                    redirectToUrlAfterLogin.url = myHomePage.url;
                }
            };
            self.redirectToAttemptedUrl = function () {
                    $location.path(redirectToUrlAfterLogin.url);
                };
            return self;
        });



-- config Section of Angular use this.

 $routeProvider
            .when("/", angularAMD.route({
               templateUrl: function (rp) { return rootUrl + 'index.html'; },
               controllerUrl: rootUrl + "indexController.js",
               resolve: {
                   login: function($q,appAuth,$rootScope) {
                    var deferred = $q.defer();
                    appAuth.loggedIn(function(err, data){
                        appAuth.loginStatus = true;
                        $rootScope.ConfigVersion = data.monument.ConfigVersion;
                        $rootScope.monument = data.monument;
                        if (!err) {
                            appAuth.loginStatus = false;
                            appAuth.userDetails = {};
                            appAuth.Terminal = {};
                            appAuth.mounument = {};
                            deferred.resolve();
                            return;
                        }   
                        if (data.User == 0) {
                            appAuth.loginStatus = false;
                            deferred.resolve();
                            return;
                        }
                        appAuth.userDetails = data.userDetails;
                        appAuth.Terminal = data.model;
                        appAuth.monument = data.monument;
                        deferred.resolve();
                    });
                    return deferred.promise;
                   }
               }
            }))


A: you can achieve it while setting up the angular routing -
Sample : 
$routeProvider.when("/home", {
    controller: "HomeController", templateUrl: "/app/home/home.html",
    resolve: {
        user: function (SessionService) {
            return SessionService.getCurrentUser();
        }
    }
});

With  resolve, you  are setting up the dependcies to your controller . If these dependencies are promises, they will be resolved and set as a value before the controller is loaded and before the $routeChangeSuccess event is fired.
resolve is a key, value pair - 


*

*key :  string name of a dependency that will be injected into the controller

*value : factory, where the factory can either be a string of the name of a service, a function whose result is injected into the controller, or a promise that is to be resolved

