Francisc Francisc - 3 months ago 37
AngularJS Question

How to set a default state with Angular ui-router

I am using states to change data in a table.
URLs are of the form

/zone/:zoneCode
.

However, when just
/zone
is accessed I want it to default to a certain
zoneCode
.

This is my code:

.state('zone',
{
url:'/zone',
controller:'ZoneController',
templateUrl:'views/zone.html'
})
.state('zone.code',
{
url:'/:zoneCode',
templateUrl:function(stateParams)
{
return 'views/zone-codes/'+stateParams.zoneCode+'.html';
}
}


The template loaded for each subview contains a table that displays data.

When no
zoneCode
is present in the URL, the table doesn't exist because the
ui-view
didn't know to load a
templateUrl
.

How can I set a default for the parent state?

Thanks.

Answer

Although the question is quite old, I would still like to provide an answer as I had the same problem. The answer can be found in this Stackoverflow question. To apply that answer to your case:

$urlRouterProvider.when('/zone','/zone/'+zoneCode);

The urlRouterProvider checks to see if the url is [yoururl]/zone. If this is the case, it will redirect to the [yoururl]/zone/zoneCode, with the zoneCode as the one you specified.

Hope it helps someone!