FAQ

How To:

• Configure states in multiple modules

---

How to: Configure states in multiple modules

You can easily have multiple modules adding states, simply add each module with a configuration like so:

angular.module('demo', ['demo.home', 
                        'demo.about', 
                        'demo.contact', 
                        'dotjem.routing']);

angular.module('demo.home', ['dotjem.routing'])
  .config(['$stateProvider', function (sp) {
      sp.state('home', { /*...*/ });
  }]);

angular.module('demo.about', ['dotjem.routing'])
  .config(['$stateProvider', function (sp) {
      sp.state('about', { /*...*/ });
  }]);

angular.module('demo.contact', ['dotjem.routing'])
  .config(['$stateProvider', function (sp) {
      sp.state('contact', { /*...*/ });
  }]);

Example: http://plnkr.co/edit/nZt57p6dKhMPIoSi1AsJ?p=preview

But what if you wanted to add a base state in one module and a child in another?

In this case we have to think about our dependencies, what people often create is a circular dependency in these cases where demo depends on demo.about which then depends on demo and that is just not possible.

So what we have to do is to restructure our app, one fairly simple approach would be to have an bootstrapper module at the top.

This approach can be reused on smaller module groups as well, so you could have multiple bootstrappers. Obviously the main bootstrapper should have your application name, so you end up with something like:

// 'demo' is merely a boostrapper.
// We can also add stuff to 'app', but we need to be mindful about dependencies.
angular.module('demo', ['demo.base'
                        'demo.home', 
                        'demo.about', 
                        'demo.contact', 
                        'dotjem.routing']);

angular.module('demo.base', ['dotjem.routing'])
  .config(['$stateProvider', function(sp) {
    sp.state('base', {...});
  }]);

angular.module('demo.home', ['dotjem.routing'])
  .config(['$stateProvider', function (sp) {
      sp.state('base.home', { /*...*/ });
  }]);

angular.module('demo.about', ['dotjem.routing'])
  .config(['$stateProvider', function (sp) {
      sp.state('base.about', { /*...*/ });
  }]);

angular.module('demo.contact', ['dotjem.routing'])
  .config(['$stateProvider', function (sp) {
      sp.state('base.contact', { /*...*/ });
  }]);

Example: http://plnkr.co/edit/wqixnguAMWi9sVGr8I0T?p=preview