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


i'd know how join 3 states when running through wizard-like setup. app i'm developing has "parameters" screen asks user in 3 steps enter parameters. these 3 steps should joined on same page current step should visible when particular step needs filled in.

somewhat this:

user starts at: parameters/step-1

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

user fills in step 1 , navigates parameters/step-2

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

user fills in step 2 , navigates parameters/step-3

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

this current setup, correct way of doing or should work nested views , show/hide each view manually depending on current route? , if so, how 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" }) 

this article on ng-newsletter website describes exact example. commented on article , added wizard jsfiddle. i've adjusted code article fit example.

to answer question here, set test.parameters abstract state, means cannot refer directly, give abstract url of test.parameters. once 1 of abstract state's children navigated (either user or part in script), url updated url of abstract state in combination child url (in case [mainurl]/parameters/test1). each of test.parameters.step[x] states child of abstract state , switch between them using sref element in tags within templateurl's mentioned. i've left $urlrouterprovider show how access first step of 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" }) 

Comments

Popular posts from this blog

php - regexp cyrillic filename not matches -

c# - OpenXML hanging while writing elements -

sql - Select Query has unexpected multiple records (MS Access) -