Angular ui router dynamic url from server and API

Question

I'm working on a web app which implements a wizard-like behavior. it uses an API to get the "wizard" steps. the API works in a way where you send a request with the current step and all previous answers so far > and get the next step (which also includes the step "name").

My problem is with the URL's of my app, since I need/want them to match the current step. BUT I don't know what is the "current" step until the user already routed to the page.

Example:

1. user clicks on <a ui-sref="wizard({step: 'second'})"> ('second' is the current step)
2. $stateProvider than invoke templateUrl e.g: http://whatever.com/getStep/second
3. server gets the "second" param and passes to the API: current step: second & answer to first step 1 (for example) than receiving the next step HTML and name - lets say: "step_three" and some HTML
4. Angular renders that HTML

problem with the example above: the user is now in http://myapp.com/#/wizard/second and the HTML that is shown is for the "step_three"

What I would like to do is a request to the server with does params & without routing > than according to the response set the state config: url and template and than "route" to that state. so that the user will be in http://myapp.com/#/wizard/XXX and see the HTML for XXX...

Is this possible? any ideas?

Answer 1

Simplistic approach (you could choose template on the fly in route if you would like)

.state('wizard', function() {
  url: 'wizard/:step',
  templateUrl: 'views/template/wizard.html',
  controller: function($scope, $stateParams, stepData) {
    $scope.step = $stateParams.step;
    $scope.stepData = stepData;
  },
  resolve: {
    stepData: function(api, $stateParams) {
      return api.getdata($stateParams.step);
    }
  }
})

in wizard html:

<div ng-show='step == "first"'>first data content</div>
<div ng-show='step == "two"'>second data content</div>
<div ng-show='step == "three"'>third data content</div>

if you want to avoid using ng-shows and prefer a different template depending on the route, then use the templateProvider instead of templateUrl:

templateProvider: function($stateParams) {
  return a valid string path to the template based on the $stateParams.step value
},

Answer 2

Just a note which might not directly answer your question but give you another option of what is possible to do with ui-router and ng bindings.

In your case you can specify ui-sref as such:

ui-sref="wizard({step: 'second'})"

However you can also use variable bindings inside the ui-sref.

ui-sref="wizard({step: step})"
                         ^         
                this is a variable in your scope ($scope.step = 'second')

You can also use variable to modify the url-name like:

ui-sref="wizard{{step}}({step: 'second'})"

$scope.step = 'Second'; //results in: ui-sref="wizardSecond({step: 'second'})"
$scope.step = 'Foo'; //results in: ui-sref="wizardFoo({step: 'second'})"