Currently, I am in the process of developing an Angular application with ui-router.
The first step I took was to create a root state that serves as an abstract one intended for resolving asynchronous dependencies. This means that any subsequent sub-states should be able to utilize these dependencies in their own resolve state properties. Therefore, if the abstract root state is resolving async dependencies and a sub-state also needs to resolve async dependencies, the latter should wait for the root dependencies to be resolved before initiating its own resolve method. Isn't this correct?
Below is a code example that illustrates my point:
Here are the asynchronous, promise-based methods utilized within the corresponding resolve:
public iAmInTheRootState(): IPromise<any> {
let deferred = this._$q.defer();
this._$timeout(() => {
deferred.resolve();
}, 3000);
return <IPromise<any>> deferred.promise;
}
public iAmInTheSubState(): IPromise<any> {
let deferred = this._$q.defer();
this._$timeout(() => {
deferred.resolve();
}, 100);
return <IPromise<any>> deferred.promise;
}
Abstract Root State:
$stateProvider
.state('app', {
url: '/',
abstract: true,
templateUrl: 'layout/app-view.html',
resolve: {
auth: function (Auth: IAuthService) {
'ngInject';
return Auth.iAmInTheRootState().then(() => {
console.log('I am the root state, so I should be resolved first');
});
}
}
});
Sub-State (Daughter State):
$stateProvider.state('app.my-calls', {
url: '',
controller: 'MyCallsController',
controllerAs: '$ctrl',
templateUrl: 'states/my-calls/my-calls.html',
resolve: {
secondAuth: (Auth: IAuthService) => {
'ngInject';
return Auth.iAmInTheSubState().then( () => {
console.log('Even though I am quicker, I should be resolved second because I am in the sub-state');
});
}
}
})
However, the actual output differs from what I had anticipated: