How to set a default state with Angular ui-router

Question

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.

What? It's not even close to duplicate... That question is about setting a fallback for unmapped URLs, my question is about changing a child state from a controller. — Francisc, Dec 18 '13 at 09:48

score 57 · Accepted Answer · edited May 23 '17 at 12:34

57

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!

edited May 23 '17 at 12:34

Community

1
1

answered Feb 02 '14 at 21:28

IvorG

864
7
10

Thanks, Ivor. [extra chars] – Francisc Feb 03 '14 at 22:29
1

+1 @IvorG I have also seen examples where the app.config begins ` $urlRouterProvider.otherwise("/");` (change as appropriate) – Mawg says reinstate Monica Mar 16 '14 at 02:14
1

also, fyi, if using this solution, the parent must not be abstract. https://github.com/angular-ui/ui-router/issues/497 – Noremac May 16 '14 at 17:20
@Noremac any parent, or just the immediate parent? – jaf0 Jan 27 '15 at 02:50

score 15 · Answer 2 · edited Aug 30 '16 at 05:04

15

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",
});

edited Aug 30 '16 at 05:04

Alexis Tyler

1,394
6
30
48

answered May 18 '16 at 18:56

Rusty Shackleford

213
2
11

How to set a default state with Angular ui-router

2 Answers2