Comment by Sandeep Panda on "Angular UI-Router optional url parts"

CommentAngular UI-Router optional url parts

Sandeep Panda

co-founder, Hashnode

Feb 27, 2016

How about having a single state dashboard with an optional param :verificationCode? When the verificationCode state param is empty, the url will fallback to something like /dashboard. Else it will be /dashboard/<some code here>. For this you also need to define default param values in your state config :

.state('app.dashboard', {
    url: '/dashboard/:verificationCode',
    controller: 'DashboardController',
    templateUrl: 'src/components/app/dashboard/dashboard.html',
    params : {
      verificationCode : ''
    }    
});

For transition you can do either $state.go('dashboard') or $state.go('dashboard',{verificationCode : 'abcxyz'}).

I am not sure if this is the best way to achieve something like this in UI Router. I have not done Angular for a year now. Looking forward to seeing what others suggest.

Matan Yedayev

Full stack developer

Feb 27, 2016

I tought about it, but I don't want to use that way. I want that the user will be able to read URL and know exactly what's inside.

Jan Vladimir Mostert

Idea Incubator

Feb 27, 2016

I'd go with something similar, it seems like the most practical solution if you don't want two states; don't see any problem with two states either.

I would also go with this approach using ui-router templateProvider and $templateFactory i.e .state('app.dashboard', { url: '/dashboard/:verificationCode', templateProvider: ['$state', '$stateParams', '$templateFactory', function($state, $stateParams, $templateFactory) { if($stateParams.verificationCode) { return $templateFactory.fromUrl('src/components/app/dashboard/dashboard.html'); } else { return $templateFactory.fromUrl('src/components/app/dashboard/dashboard.html'); } }] })

Search Hashnode