State transitions in ui-router and resolve from a parent abstract state - angularjs

Question

I want to show a loading animation during state transitions in a Angular ui-router application.
Check out the following code
$stateProvider
.state("app",
{
abstract: true,
url: "",
template: "<ui-view/>",
controller: "appController",
controllerAs: "vm",
resolve: {
result_data_abstract: function ($q, $timeout))
{
var deferred = $q.defer();
$timeout(function () {
deferred.resolve("from abstract");
}, 500);
return deferred.promise;
}
}
})
.state("app.real",
{
url: "/real/{id}",
templateUrl: "somepath/template.html",
controller: "realController",
controllerAs: "vm",
resolve: {
result_data_real: function ($q, $timeout))
{
var deferred = $q.defer();
$timeout(function () {
deferred.resolve("from real");
}, 500);
return deferred.promise;
}
}
}
.state("app.real2",
{
url: "/real2/{id}",
templateUrl: "somepath2/template.html",
controller: "real2Controller",
controllerAs: "vm",
// Note no resolve
})
So both concrete states inherit from the abstract one - the abstract class has a resolve.
However, only one of the real (concrete) states has a resolve of its own.
My goal is to show a loading animation during transitions using the following code:
$scope.$on("$stateChangeStart", function (event, toState) {
console.log("stateChangeStart", toState);
if (toState.resolve) {
showSpinner();
}
});
$scope.$on("$stateChangeSuccess", function (event, toState) {
console.log("stateChangeSuccess", toState);
if (toState.resolve) {
hideSpinner();
}
});
Since the abstract state the concrete states inherit from has a resolve, I expected 'toState.resolve' to be true every time, getting the resolves from the abstract parent state it inherits from.
That however is not the case - when I load app.real2, 'toState.resolve' is null.
Is there any way to make this work?

Answer 1

Are you loading an entire "page"? If so I do this by calling it in run.
app.run(function($rootScope) {
$rootScope.$on("$stateChangeStart", function () {
console.log("stateChangeStart");
showSpinner();
});
$rootScope.$on("$viewContentLoaded", function () {
console.log("stateChangeSuccess");
hideSpinner();
});
});
I don't use $stateChangeSuccess and toState but it looks like it might work as well.