CODEWITHSUNDEEP
angularjsangular-ui
Francisc
Francisc

Reputation: 80405

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.

Upvotes: 25

Views: 55123

Answers (2)

Rusty Shackleford
Rusty Shackleford

Reputation: 213

You can also this, it'll handle routes that don't exist by redirecting to a default route set by you.

$urlRouterProvider.otherwise('/');

$stateProvider.state("zone", {
    url: "/",
    templateUrl: "views/zone.html",
});

Upvotes: 15

IvorG
IvorG

Reputation: 864

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!

Upvotes: 57

Related Questions