Building a multi-step form (“wizard”). Was originally following this tutorial, which worked great, but am now trying to adapt it so step one is embedded on the homepage rather than being a separate state. No matter what I try, I can not create a ui-sref
path that will work. I always get:
Could not resolve '.where' from state 'home'
or
Could not resolve 'wizard.where' from state 'home'
or
Could not resolve 'wizard.where@' from state 'home'
…even though wizard.where@
works fine in <div ui-view=wizard.where@></div>
. What is the correct syntax?
Here are the relevant files:
home.js (left comments intact so you can see various methods I’m trying):
var wizard = {
url: '/home/wizard',
controller: 'VendorsCtrl',
templateUrl: 'vendors/wizard.tpl.html'
};
angular.module( 'myApp.home', [
'ui.router',
'ui.bootstrap',
'myApp.modal',
'angularMoment'
])
.config(function config( $stateProvider, $urlRouterProvider ) {
$stateProvider
.state( 'home', {
url: '/home',
views: {
main: {
controller: 'HomeCtrl',
templateUrl: 'home/home.tpl.html'
},
jumbotron: {
controller: 'HomeCtrl',
templateUrl: 'home/welcome.tpl.html'
},
wizard: wizard,
wizard.where: {
url: '/home/wizard/where',
controller: 'VendorsCtrl',
templateUrl: 'vendors/wizard-where.tpl.html',
parent: wizard
},
wizard.what: {
url: '/home/wizard/what',
controller: 'VendorsCtrl',
templateUrl: 'vendors/wizard-what.tpl.html',
parent: wizard
},
wizard.when: {
url: '/home/wizard/when',
controller: 'VendorsCtrl',
templateUrl: 'vendors/wizard-when.tpl.html',
parent: wizard
},
},
data: { pageTitle: 'Home' }
})
// route to show our basic form (/wizard)
// .state('wizard', {
// url: '/wizard',
// views: {
// main: {
// controller: 'VendorsCtrl',
// templateUrl: 'vendors/wizard.tpl.html'
// }
// },
// abstract: true,
// //data: { pageTitle: 'Vendor Search' }
// })
// nested states
// each of these sections will have their own view
// url will be nested (/wizard/where)
// .state('wizard.where', {
// url: '/where',
// templateUrl: 'vendors/wizard-where.tpl.html'
// })
// url will be /wizard/when
// .state('wizard.when', {
// url: '/when',
// templateUrl: 'vendors/wizard-when.tpl.html'
// })
// url will be /wizard/vendor-types
// .state('wizard.what', {
// url: '/what',
// templateUrl: 'vendors/wizard-what.tpl.html'
// })
;
// catch all route
// send users to the form page
$urlRouterProvider.otherwise('/home/wizard/where');
})
wizard.tpl.html:
<div class=jumbotron vendate-wizard ng-controller=VendorsCtrl as vendorsCtrl>
<header class=page-title>
<h1>{{ pageTitle }}</h1>
<p>Answer the following three questions to search available vendors. All answers can be changed later.</p>
<!-- the links to our nested states using relative paths -->
<!-- add the active class if the state matches our ui-sref -->
<div id=status-buttons class=text-center>
<a ui-sref-active=active ui-sref=wizard.where@><span>1</span> Where</a>
<a ui-sref-active=active ui-sref=wizard.what@><span>2</span> What</a>
<a ui-sref-active=active ui-sref=wizard.when@><span>3</span> When</a>
</div>
</header>
<!-- use ng-submit to catch the form submission and use our Angular function -->
<form id=signup-form ng-submit=processForm()>
<!-- our nested state views will be injected here -->
<div id=form-views ui-view=wizard.where@></div>
</form>
</div>
wizard.where.tpl.html:
<div class=form-group>
<label class=h2 for=where>Where Is Your Wedding?</label>
<p id=vendor-where-description>If left blank, vendors in all available locations will be shown.</p>
<div class=input-group-lg>
<input id=where ng-model=formData.where class=form-control type=text placeholder=Boston, MA aria-describedby=vendor-where-description />
</div>
</div>
<ul class=list-inline>
<li>
<a ui-sref=wizard.what@ class=btn btn-block btn-primary>
Next <span class=fa fa-arrow-right></span>
</a>
</li>
</ul>