CODEWITHSUNDEEP
angularjsangular-ui-router
Francisc
Francisc

Reputation: 80395

Have parent state default to child state using ui-router

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.

Upvotes: 8

Views: 7535

Answers (5)

goldylucks
goldylucks

Reputation: 6144

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

Upvotes: 1

Rishul Matta
Rishul Matta

Reputation: 3493

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!

Upvotes: 1

Elise
Elise

Reputation: 5124

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

Upvotes: 7

Francisc
Francisc

Reputation: 80395

As stated in the Angular-UI Wiki page:

There are three main ways to activate a state:

  1. Call $state.go(). High-level convenience method.
  2. Click a link containing the ui-sref directive.
  3. Navigate to the url associated with the state.

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

Upvotes: 0

Aaron Torgerson
Aaron Torgerson

Reputation: 992

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.

Upvotes: 15

Related Questions