FAQ

Table of Contents:

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('phonecat', ['dotjem.routing']).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider
      .when('/phones', { /*.. Parameters for the route ..*/ })
      .when('/phones/:phoneId', { /*.. Parameters for the route ..*/ })
      .otherwise( { redirectTo: '/phones' } );
}]);

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

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

But what if you wanted to add a root route 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 app depends on app.about which then depends on app 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:

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

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

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

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