Show parent state templates while child dependencies resolve

Question

My application has nested states and views. Parental states are abstract and reference header templates. I would like to define dependency dependencies in child states and display header patterns when loading these dependencies. Currently, the parent state and child state are waiting for child dependencies to resolve.

Code example:

angular.module("Test", ["ui.router"]) .config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/sec1"); $stateProvider.state("sec1", { abstract: true, url: "/sec1", template: "<h1>Header 1</h1><div ui-view>Loading...</div>" }) .state("sec1.page", { url: "", template: "<h1>Section 1 Page</h1><a ui-sref='sec2.page'>Goto 2</a>", resolve: { delay: function($timeout) { return $timeout(function() {}, 1000); } } }) .state("sec2", { abstract: true, url: "/sec2", template: "<h1>Header 2</h1><div ui-view>Loading...</div>" }) .state("sec2.page", { url: "", template: "<h1>Section 2 Page</h1><a ui-sref='sec1.page'>Goto 1</a>", resolve: { delay: function($timeout) { return $timeout(function() {}, 1000); } } }); }); 

Fiddle

Is there a way to display a template defined in the parent state, while waiting for resolving dependencies defined in the child state?

Answer 1

You can just do it in the controller

 app.controller('testctrl', function($rootScope) { $scope.loading = true; $scope.loadstuff = function() { for (var i = 1; i < 100; i++) { //load slow stuff } $scope.loading = false; } }); 

and in view

 <div ng-show="loading">Loading...</div> <div ng-hide="loading" ng-init="loadstuff">content loaded</div>