Have parent state default to child state using ui-router

Question

I have this state structure:

.state('places',
{
    url:'/places',
    controller:'PlacesController',
    templateUrl:'views/places.html'
})
.state('places.city',
{
    url:'/:city',
    templateUrl:function(stateParams)
    {
        return 'views/places/'+stateParams.city+'.html';
    }
});

It works nicely except when the URL is simply /places without a city after it.
How can I have a default value for templateUrl in the child state?

I'm thinking the best way would be to set the ui-view from PlacesController, however that doesn't seem to be possible.

Sorry, didn't have syntax highlighter set. Should be clean to read now. — Francisc, Dec 15 '13 at 23:27
possible duplicate of [angularjs ui-router default child state](http://stackoverflow.com/questions/17001589/angularjs-ui-router-default-child-state) — Amir Ali Akbari, Jun 08 '14 at 06:13
Must see this answer : http://stackoverflow.com/a/29491412/2790983 — Uday Hiwarale, May 11 '16 at 11:31
Possible duplicate of [How to set default child view with Angular UI Router](http://stackoverflow.com/questions/21975094/how-to-set-default-child-view-with-angular-ui-router) — Stepan Suvorov, May 28 '16 at 15:16

Aaron Torgerson · Answer 1 · 2013-12-15T22:35:27.610

15

Try defining another child state with the URL set to an empty string:

.state('places.default', {
    url: '',
    templateUrl: '...'
}

Then add abstract: true to the parent state.

edited Dec 15 '13 at 22:35

answered Dec 15 '13 at 22:26

Aaron Torgerson

992
1
7
12

1

Hm, that's clever. I'd be happy if there was a method to change `ui-view` template URL directly though. – Francisc Dec 15 '13 at 23:28
I don't know of any such function in ui.router. – Aaron Torgerson Dec 18 '13 at 11:28
Thanks, Aaron. [extra chars] – Francisc Dec 18 '13 at 15:23
While this solution works great, it won't work in combination with the latest version of ui-sref-active (from master). places.city won't be a parent of places.default for instance. – wcandillon Aug 05 '14 at 16:40

score 7 · Answer 2 · answered May 11 '14 at 15:07

Without needing any change in your states configuration, you can put your default template directly between the ui-view tags in your HTML:

<!-- places.html -->
<div ui-view>
  <h1>Please choose a place</h1>
</div>

<!-- london.html -->
<h1>London is amazing!</h1>

Now when you navigate to /places, you will see the "Please choose a place" message, and when you navigate to /places/london, you will see "London is amazing!".

score 1 · Answer 3 · answered Sep 08 '14 at 11:11

as stated by Aaron you can use $state to navigate to a default child state but here there is a catch say suppose you have more than 1 child :

    .state('places',
    {
        url:'/places',
        controller:'PlacesController',
        templateUrl:'views/places.html'
    })
    .state('places.city',
    {
        url:'/:city',
        templateUrl:function(stateParams)
        {
            return 'views/places/'+stateParams.city+'.html';
        }
    })  
    .state('places.child2',
    {
        url:'/:city2',
        templateUrl:function(stateParams)
        {
            return 'views/places/'+stateParams.child2+'.html';
        }
    });

and in you parent controller PlacesController you have $state.go(places.city) then whenever the parent controller i.e. PlacesController is invoked you will be redirected to city state. So if someone is on child2 state and presses a refresh button then parent controller will be invoked and he will be redirected to city which is not what you want!

ANS: So you can check for the current state before doing a redirection i.e. if the person is in parent state then redirect to any default child state but if the person is in any of the child states then do not do the redirection in the parent controller :-

 if($state.current.name == "places"){
     $state.go('places.city');
 }

hope this helps!

as comment, the second code block bust be in the `PlacesController` — Alejandro Silva, Jan 22 '15 at 21:24

score 1 · Answer 4 · answered May 18 '15 at 11:22

Use resolve on the parent state

.state('places',
{
    url:'/places',
    resolve: { default: function($state) {
      if ($state.is('places')) $state.go('places.city', { url: 'london'})
    }}
    controller:'PlacesController',
    templateUrl:'views/places.html'
})
.state('places.city',
{
    url:'/:city',
    templateUrl:function(stateParams)
    {
        return 'views/places/'+stateParams.city+'.html';
    }
});

Check for syntax error, I'm used to coffeescript :)

score 0 · Accepted Answer · answered Jan 03 '14 at 15:03

0

As stated in the Angular-UI Wiki page:

There are three main ways to activate a state:

Call $state.go(). High-level convenience method.

Click a link containing the ui-sref directive.

Navigate to the url associated with the state.

https://github.com/angular-ui/ui-router/wiki#activating-a-state

answered Jan 03 '14 at 15:03

Francisc

77,430
63
180
276

7

This answer shouldn't be accepted. It doesn't answer the question, which is about defaulting to a child state when a parent state is invoked. – XML Oct 03 '14 at 06:31
1

+1 for the answer, I had the same question as the OP and it would seem invoking a child from a parent is not the right thinking, simply accessing the child route has the same effect with no thinking involved. – HappyCoder Feb 20 '15 at 21:26
this is not a solution for delegating a state by it's child! – Adnane.T Nov 16 '15 at 19:43

Have parent state default to child state using ui-router

5 Answers5

Linked