Provide default parent state for 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'; } }); 

This works well if the url is simply /places with no city after it.
How can I get the default value for templateUrl in a child state?

I think the best way is to set ui-view from PlacesController , however this is not possible.

Answer 1

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 the link containing the ui-sref directive.
• Browse to the status-related URL.

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

Answer 2

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.

Answer 3

Without requiring any changes to the state configuration, you can put the 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 go to /places , you will see the message “Please select a place”, and when you go to /places/london , you will see that “London is awesome!”.

Answer 4

as pointed out by Aaron, you can use $ state to go to the default child state, but there is a catch here, suppose you have more than one 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 the parent controller PlacesController you have $ state.go (places.city) , then whenever the parent controller is called, i.e. PlacesController, you will be redirected to the city state, therefore, if someone is in child2 state and presses the update button, then the parent controller will be called and it will be redirected to the city that you do not need!

ANS:. Thus, you can check the current state before performing the redirection, that is, if the person is in the parent state, then the redirect to any child state by default, but if the person is in any of the child states, then do not redirect to the parent controller: -

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

hope this helps!

Answer 5

Use permission in 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 syntax error, I am using coffeescript :)