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
Post a Comment