Opinions: Organizing large $stateProviders

[dmackerman]

Would like to get some insight into how others are organizing their medium to large sized application states.

For our app we're using named states to seperate out the defined sections, as such:

<header ui-view="header"></header>
<nav ui-view="sidenav"></nav>
<div ui-view="content"></div>
<footer ui-view="footer"></footer>

This leads to something like this for our $stateProvider config:

var headerView = {
  templateUrl: 'views/header/header.html',
  controller: 'HeaderCtrl'
};

var footerView = {
  templateUrl: 'views/footer/footer.html'
};

// if the URL doesn't match any of our defined URLS
$urlRouterProvider.otherwise("/");
$stateProvider
  .state('home', {
    url: '/',
    views: {
      'header': headerView,
      'content': {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
      },
      'footer': footerView
    },
    resolve: {
      ....
    }
  })

This starts to get unwieldy when you have anymore than a few states with large resolves in each one. What are some strategies folks are using to keep things more organized? I've thought about creating separate modules for each state and child states - is that realistic?

[timkindberg]

This is more of a question for stack overflow I'd say. I'd urge you to look at the 'Multiple Named Views' section of my presentation talking about antipatterns though. I think you may be running into one. Additionally its quite common to split your states across modules. Look at the ng-boilerplate (https://github.com/ngbp/ngbp) project (which might actually answer your question wholly). It's quite complex but SO worth grokking.

[dmackerman]

Thanks @timkindberg, the ng-boilterplate definitely helped!

[lucassus]

My proposal is based on ES6 modules.
Long story short. Each state has a separate folder, for instance contacts/one/edit. In this folder I have the following files:

• controller.js, controller.spec.js
• state.js, state.spec.js
• state.html

state.js holds the state definition object:

import controller from './edit.controller';
import template from './edit.state.html';

// State name is exported so we can use it in the corresponding tests
export const name = 'contacts.one.edit';

export default {
  name,
  url: '/edit',
  template,
  controller,
  controllerAs: 'ctrl'
};

This configuration could be activated in the module's configuration block with $stateProvider.state(oneEditState)

Here you could find the complete example https://github.com/lucassus/angular-webpack-seed/tree/ce4e9b91ce9ed47ca74073d754b0cbacff8cb65f/src/app/contacts/one/edit