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
– Francisc, Commented Dec 15, 2013 at 23:27
possible duplicate of angularjs ui-router default child state — Amir Ali Akbari
– Amir Ali Akbari, Commented Jun 8, 2014 at 6:13
Possible duplicate of How to set default child view with Angular UI Router — Stepan Suvorov
– Stepan Suvorov, Commented May 28, 2016 at 15:16

Aaron Torgerson · Accepted Answer · 2013-12-15 22:35:27Z

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, 2013 at 22:35

answered Dec 15, 2013 at 22:26

Aaron Torgerson

9921 gold badge7 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Francisc Over a year ago

Hm, that's clever. I'd be happy if there was a method to change ui-view template URL directly though.

Aaron Torgerson Over a year ago

I don't know of any such function in ui.router.

Francisc Over a year ago

Thanks, Aaron. [extra chars]

wcandillon Over a year ago

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.

Elise · Accepted Answer · 2014-05-11 15:07:55Z

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

Rishul Matta · Accepted Answer · 2014-09-08 11:11:39Z

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

goldylucks · Accepted Answer · 2015-05-18 11:22:43Z

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

Francisc · Accepted Answer · 2014-01-03 15:03:58Z

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 3, 2014 at 15:03

Francisc

80.9k65 gold badges186 silver badges278 bronze badges

3 Comments

XML Over a year ago

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.

HappyCoder Over a year ago

+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.

Adnane.T Over a year ago

this is not a solution for delegating a state by it's child!

Collectives™ on Stack Overflow

Have parent state default to child state using ui-router

5 Answers 5

4 Comments

Comments

1 Comment

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

1 Comment

Comments

3 Comments

Linked

Related