Databases
StackOverflow2013
Postsdbo
POAngular.js configuring ui-router child-states from multiple modules
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAngular.js configuring ui-router child-states from multiple modules
    primarykey
    data
    text
    <p>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.</p> <p>Apparently, this should be possible according to this FAQ: <a href="https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-ui-router-from-multiple-modules" rel="noreferrer">How to: Configure ui-router from multiple modules</a></p> <p>For me it doesn't work: <strong>Error</strong> Uncaught Error: No such state 'app' from ngBoilerplate.foo</p> <p>Here is what i have:</p> <p><strong>app.js</strong></p> <pre><code>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'); }); </code></pre> <p><strong>foo.js</strong></p> <pre><code>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'); }); </code></pre> <p>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)?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJosh David Miller
    1. USKilian Schefer
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POAngular.js configuring ui-router child-states from multiple modules
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POAngular.js configuring ui-router child-states from multiple modules
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POAngular.js configuring ui-router child-states from multiple modules
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI 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 `.config`s to be run) before it runs its own `.config`.
      singulars
      1. POAngular.js configuring ui-router child-states from multiple modules
      1. USAndrew Ho
    2. COSo 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.
      singulars
      1. POAngular.js configuring ui-router child-states from multiple modules
      1. USAndrew Ho
    3. COHave you tried @Sydney answer below?
      singulars
      1. POAngular.js configuring ui-router child-states from multiple modules
      1. USTim Kindberg
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload