title: Multiple config blocks in angular module
body: <p>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.  </p>
  
  <p>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. </p>
  
  <p>This is what I've come up with so far, but it is not resolving the dependencies in the first config block:</p>
  
  <pre><code>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);
            }
          }
        })
        ;
  
    });
  </code></pre>
  
  <p>Am I even on the right track?</p>