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

Question

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)?

I am trying to do the exact same thing, and I think I know the issue. I believe it's just a limitation with $stateProvider. The scenario you (and I) have is the module that defines the root state (in this scenario state app in module 'ngBoilerplate) requires another module (in this case ngBoilerplate.foo) that defines a state that is a child of the said root state (i.e. app.foo). All of the first module's (ngBoilerplate) dependencies need to be resolved first (which includes running all their .configs to be run) before it runs its own .config`. — Andrew Ho
– Andrew Ho, Commented Aug 16, 2013 at 0:40
So if $stateProvider could only allow for the defining of child states, even if the parent state hasn't yet been defined, and instead throw a fit after the config stage if there is a child state with no parent state defined. — Andrew Ho
– Andrew Ho, Commented Aug 16, 2013 at 0:44
plunkr to clearly demonstrate the issue I just described. In the console it will output "test config" then throw a Uncaught Error: No such state 'app' from test because the $stateProvider.state('app', {...}); in the app module's config hasn't been run yet. Sydney's answer doesn't help with the issue at hand. — Andrew Ho
– Andrew Ho, Commented Aug 16, 2013 at 1:18
In your Plunkr I would reverse the dependency. 'test' module depends on app module since app.test state depends on app state. So var module = angular.module('app', ['ui.state']); and var test = angular.module('test', ['app']);, your Plunkr now complains about the missing controller which is correct. — Sydney
– Sydney, Commented Aug 16, 2013 at 6:07

Kilian Schefer · Accepted Answer · 2013-09-17 07:07:22Z

7

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">

answered Sep 17, 2013 at 7:07

Kilian Schefer

5795 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mangesh Over a year ago

This is what I was looking for simple and elegant.

Sydney · Accepted Answer · 2013-08-15 16:51:33Z

1

In the documentation the feature1 module depends on the application module. Try

angular.module( 'ngBoilerplate.foo', ['ngBoilerplate'])

answered Aug 15, 2013 at 16:51

Sydney

12.3k21 gold badges94 silver badges146 bronze badges

Comments

j_walker_dev · Accepted Answer · 2013-09-16 21:11:46Z

I would of just commented but i do not have the rep. I know this is old but i had the same problem and came across this. One thing i am confused about is in app.js you do not import "ngBoilerplate.foo" but ngBoilerplate.library instead. I had the same problem and my solution was to inject sub modules into the top module instead of their parent.

My structure was module('ngBoilerplate'), module('ngBoilerplate.foo') and module('ngBoilerplate.foo.bar')'. I was injecting ngBoilerplate.foo.bar into ngBoilerplate.foo and the $stateProvider was failing. I needed to inject ngBoilerplate.foo.bar into top level ngBoilerplate.

I thought i would put this here in case anyone else sees this. The error i had was Uncaught TypeError: Cannot read property 'navigable' of undefined from ngBoilerplate.foo

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related