Angular.js configuring ui-router child-states from multiple modules

angular-ui, angularjs, module, ngboilerplate, state

Solution

I finally chose this approach which does the job for me:

// add all your dependencies here and configure a root state e.g. "app"
angular.module( 'ngBoilerplate', ['ui.router','templates-app',
'templates-common','etc','etc']);

// configure your child states in here, such as app.foo, app.bar etc.
angular.module( 'ngBoilerplate.foo', ['ngBoilerplate']);
angular.module( 'ngBoilerplate.bar', ['ngBoilerplate']);

// tie everything together so you have a static module name
// that can be used with ng-app. this module doesn't do anything more than that.
angular.module( 'app', ['ngBoilerplate.foo','ngBoilerplate.bar']);

and then in your app index.html

<html ng-app="app">

Problem

I'd like to implement a setup where i can define a "root state" in the main module, and then add child states in other modules. This, because i need the root state to resolve before i can go to the child state. Apparently, this should be possible according to this FAQ: How to: Configure ui-router from multiple modules For me it doesn't work: Error Uncaught Error: No such state 'app' from ngBoilerplate.foo Here is what i have: app.js ``` angular.module( 'ngBoilerplate', [ 'templates-app', 'templates-common', 'ui.state', 'ui.route', 'ui.bootstrap', 'ngBoilerplate.library' ]) .config( function myAppConfig ( $stateProvider, $urlRouterProvider ) { $stateProvider .state('app', { views:{ "main":{ controller:"AppCtrl" } }, resolve:{ Auth:function(Auth){ return new Auth(); } } }); $urlRouterProvider.when('/foo','/foo/tile'); $urlRouterProvider.otherwise( '/foo' ); }) .factory('Auth', ['$timeout','$q', function ($timeout,$q) { return function () { var deferred = $q.defer(); console.log('before resolve'); $timeout(function () { console.log('at resolve'); deferred.resolve(); }, 2000); return deferred.promise; }; }]) .run(function run( $rootScope, $state, $stateParams ) { console.log('greetings from run'); $state.transitionTo('app'); }) .controller( 'AppCtrl', function AppCtrl ( $scope, Auth ) { console.log('greetings from AppCtrl'); }); ``` foo.js ``` angular.module( 'ngBoilerplate.foo', ['ui.state']) .config(function config( $stateProvider ) { $stateProvider .state( 'app.foo', { url: '/foo/:type', views: { "main": { controller:'FooCtrl', templateUrl: function(stateParams) { /* stuff is going on in here*/ } } } }); }) .controller( 'FooCtrl', function FooCtrl( $scope ) { console.log('deferred foo'); }); ``` How do i make this work or what other approaches could i take to have something global resolved before every state (without defining a resolve on each state)?

Original source