How to dynamically change the default state that ui-router uses?

Question

I have an application that should serve different states based on some API data. If the application state configuration looks like this:

$stateProvider.state('order', { url: '/order/{serviceId}', controller: 'OrderController', abstract: true, resolve: { OrderResolve: function(Order, $stateParams){ return Order.fetch($stateParams.serviceId); } } }).state('order.sharepoint', { url: '/sharepoint', abstract: true, controller: 'SharePointController' }).state('order.sharepoint.index', { url:'', controller: 'SharePointServiceController' }).state('order.sharepoint.setup', { url:'', controller: 'SharePointSetupController' }).state('order.sharepoint.confirm', { url:'', controller: 'SharePointConfirmController' }); 

Then I want 1 out of 2 states that were default to be based on the values ​​in the OrderResolve object. Basically, I use resolve to get API data that tells me if this user is activated by SharePoint. If OrderResolve.hasSharepoint == true , then I want to indicate the status of order.sharepoint.index by default, but if OrderResolve.hasSharepoint == false , then I want to indicate the status of order.sharepoint.setup by default. In the first state, SharePoint data is displayed, and the second state is just a form for configuring Sharepoint services.

Is there an easy way to achieve this type of function?

Answer 1

You need an average state, and it is already there. If you remove abstract: true, from order.sharepoint and always go to that state regardless of your OrderResolve value.

Then in SharePointController you have access to OrderResolve and you can decide your destination state:

 // inside SharePointController if (OrderResolve.hasSharepoint == true){ $state.go('order.sharepoint.index'); else { $state.go('order.sharepoint.setup'); }