angular ui-router, how to nest states with a url that updates

Question

I'd like to know how to join three states together when running through a wizard-like setup. The app I'm currently developing has a "Parameters" screen that asks the user in 3 steps to enter some parameters. These 3 steps should be joined on the same page but the current step should only get visible when that particular step needs to get filled in.

Somewhat like this:

User starts at: parameters/step-1

• first div is visible
• second div is hidden (or in a sort of blocked/locked state)
• third div is hidden (or in a sort of blocked/locked state)

User fills in step 1 and navigates to parameters/step-2

• first div is visible
• second div is visible
• third div is hidden (or in a sort of blocked/locked state)

User fills in step 2 and navigates to parameters/step-3

• first div is visible
• second div is visible
• third div is visible

This is my current setup, is this the correct way of doing this or should I work with nested views and then show/hide each view manually depending on the current route? And if so, how do I do this?

.state('test.parameters', {
  url: "/parameters",
  templateUrl: "views/partials/enter-parameters.html"
})
.state('test.parameters.step1', {
  url: "/step-1",
  templateUrl: "views/partials/step1.html"
})
.state('test.parameters.step2', {
  url: "/step-2",
  templateUrl: "views/partials/step2.html"
})
.state('test.parameters.step3', {
  url: "/step-3",
  templateUrl: "views/partials/step3.html"
})

Answer 1

This article on the ng-newsletter website describes your exact example. Somebody also commented on the article and added a Wizard jsFiddle . I've adjusted the code from the article to fit your example.

To answer the question here, what you would do is set your test.parameters to an abstract state, which means you cannot refer to it directly, but it does give you the abstract url of test.parameters. Once one of the abstract state's children is navigated to (either by a user or by a part in your script), the url will be updated to the url of the abstract state in combination with the child url (in your case that would be [mainUrl]/parameters/test1). Each of the test.parameters.step[x] states is a child of the abstract state and you switch between them using the sref element in tags within the templateUrl's that you mentioned. I've left the $urlRouterProvider to show you how to access the first step of you abstract state.

$urlRouterProvider.otherwise('/test.parameters/step1');

$stateProvider
.state('test.parameters', {
    abstract: true,
    url: '/parameters',
    templateUrl: "views/partials/enter-parameters.html"
})
.state('test.parameters.step1', {
    url: '/step1',
    templateUrl: "views/partials/step1.html"
})
.state('test.parameters.step2', {
    url: '/step2',
    templateUrl: "views/partials/step2.html"
})
.state('test.parameters.step3', {
    url: '/step3',
    templateUrl: "views/partials/step3.html"
})