I need to resolve some dependencies (fetching data for my services, etc.) in my app before it loads. I would like to separate these out, so that I have one config block for the main app, and then one or more config blocks for other parts of the app.
Ultimately, I'm hoping to have it resolve the dependencies for the main app, load the components associated with that, and then resolve the rest and load those parts, so it's a little more responsive when loading.
This is what I've come up with so far, but it is not resolving the dependencies in the first config block:
angular.module('myApp', ['ui.router', 'kendo.directives'])
.config(function($stateProvider) {
$stateProvider
.state('settings', {
url: '/',
views: {
'mainNav': {
templateUrl: 'scripts/directives/mainNav/mainNav.html',
controller: 'mainNavCtrl'
//etc
}
},
resolve: {
fetchSettings: function(Settings) {
return Settings.fetch;
}
}
});
})
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('otherPart', {
url: '',
views: {
'otherPart': {
templateUrl: 'views/otherPart.html'
//etc
}
},
resolve: {
fetcherPromise: function(User, MyData) {
var fns = [
MyData.fetch,
User.fetchEntitlements
];
return fetcher.inSerial(fns);
}
}
})
;
});
Am I even on the right track?
Having multiple config blocks in application is not a problem. it should work fine. It is totlly fine to chain configs to keep things isolated like. there should be something else that you are missing here. May be the service providers are not resolved at the time App configuration starts.
Or The module which has the service in it is not resolved at the time of App start up. Make sure the module or services which are used in config block are resolved and available in AppModule at start up.