Can I have a child state that is the index using ui-router?

Question

My routes look like:

$stateProvider.state('repository', {
  url: '/:host/:owner/:repository',
  views: {
    appView: {
      templateUrl: '/templates/app/repository.html'
    }
  }
}).state('repository.analytics', {
  views: {
    repositoryView: {
      templateUrl: '/templates/app/_repositoryAnalytics.html'
    }
  }
}).state('repository.commit', {
  url: '/:host/:owner/:repository/commit/:commitHash',
  views: {
    repositoryView: {
      templateUrl: '/templates/app/_repositoryCommit.html'
    }
  }
}).state('repository.file', {
  url: '/file?path',
  views: {
    repositoryView: {
      templateUrl: '/templates/app/_repositoryFile.html'
    }
  }
});

I want the base URL for all repository-like states, that's why I'm specifying the url there. As an example, if I didn't do it this way, I would have to specify everything as it's shown in the commit state. This is verbose and not something I want to do.

So is it possible to have a default child state for repository so that if someone is directed there, then that child view loads?

** UPDATE ** This seems to work just fine if I click through the app, but if I go to the /:host/:owner/:repository URL directly, the child view (analytics) never loads.

Mavlarn · Accepted Answer · 2015-02-13T06:17:40.080

I don't know whether you can have a default child state, but you can set subview in that parent state. Like this:

$stateProvider.state('repository', {
  url: '/:host/:owner/:repository',
    views: {
      appView: {
        templateUrl: '/templates/app/repository.html'
      },
      'repositoryView@repository': { // it means the repositoryView of repository state.
        templateUrl: '/templates/app/_repositoryAnalytics.html'    
      }
    }
  })

Then, when you open with repository state or URL, the analytics page will be loaded in repositoryView view of repo page.

[updated] This format 'repositoryView@repository' means that, the view 'repositoryView' in the state 'repository'. Because you try to open the state 'repository', with a default sub-view. And the sub view 'repositoryView' is defined in 'repository.html'. If you didn't set the state scope, ui-router will think that the sub-view 'repositoryView' belongs to 'repository' 's parent view.

I don't know whether I explain it clearly, you can check the ui-router wiki

Works! But why do I need to do `repositoryView@repository`? Doing just `repositoryView` doesn't work — Shamoon, Feb 11 '15 at 14:18

score 1 · Answer 2 · edited May 23 '17 at 12:12

I created working plunker here. One way could be to use eventing to force go to child state, when parent is selected (resolved from url)

.run(['$rootScope', '$state', '$stateParams',
  function($rootScope, $state, $stateParams) {

    $rootScope.$on('$stateChangeStart', function(event, toState, toPrams) {
      if (toState.name === "repository") {
        event.preventDefault();
        $state.go('repository.analytics', toPrams);
      }
    });
  }
])

Check it here

Some other topics about redirections parent-child:

Can I have a child state that is the index using ui-router?

2 Answers2