Multiple config blocks in angular module

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?