javascript - AngularJS Multi-Step Form Using UI-Router (With Navigation Links) -

javascript - AngularJS Multi-Step Form Using UI-Router (With Navigation Links) -

i followed tutorial implement own multi-step form: http://scotch.io/tutorials/javascript/angularjs-multi-step-form-using-ui-router

the problem here works if page form page , nil else. have spa has 4 pages, 1 of registration form.

home registration mechanics terms & conditions

my index.php

<div class="container"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" ui-sref="home"><img src="assets/img/logo.png" alt=""></a> </div> <nav class="navbar navbar-default" role="navigation"> <ul class="nav navbar-nav home"> <li><a ui-sref="home">home</a></li> <li><a ui-sref="registration">registration</a></li> <li><a ui-sref="mechanics">mechanics</a></li> <li><a ui-sref="terms-conditions">terms & conditions</a></li> </ul> </nav> </div><!-- .container-fluid --> <div ui-view=""></div><!-- load contents via angular views --> </div><!-- .container -->

i using ui-router navigate through these pages. works okay. tried utilize ui-router within registration page nested views, apparently not behave expected. want registration page load first nested view, not bind it. here nested views:

registration-profile.php (should default view) registration-artist.php (step 2) registration-share.php (final step)

here stateprovider code mixing 2 (navigation , registration nested views):

spinnrapp.config(function ($stateprovider, $urlrouterprovider) { // // set states $stateprovider .state('home', { url: "/", templateurl: "app/components/home/home.php" }) .state('registration', { url: "/registration", templateurl: "app/components/registration/registration.php", controller: "regcontroller" }) .state('registration.profile', { // nested state registration form url: "/profile", // url nested /registration/artist templateurl: "app/components/registration/partials/registration-profile.php" }) .state('registration.artist', { // nested state registration form url: "/artist", // url nested /registration/artist templateurl: "app/components/registration/partials/registration-artist.php" }) .state('registration.share', { // each nested state have own view url: "/share", // url nested /registration/share templateurl: "app/components/registration/partials/registration-share.php" }) .state('mechanics', { url: "/mechanics", templateurl: "app/components/mechanics/mechanics.php" }) .state('terms-conditions', { url: "/terms-conditions", templateurl: "app/components/terms/terms-conditions.php" }); // // unmatched url, redirect / $urlrouterprovider.otherwise("/"); });

this registration.php looks like:

<form id="signup-form" ng-submit="processform()"> <!-- our nested state views injected here --> <div id="form-views" ui-view></div> </form>

for reason, 'ui-view' not binding registration-profile.php, should default view 1 time page visited. seems issue here? doing wrong not aware of? learning angularjs, btw.

scotchdesign have supplied plunk of code code based o, http://plnkr.co/edit/m03tygtfqnh09u4x5phc?p=preview

$urlrouterprovider.otherwise('/form/registration');

also, default view 1 set '/', i.e. 'home' state, if want have 'registration' view first either: alter 'home' have url '/home', , have 'stateengine' service phone call $state.go based on criteria, or set 'registration's url '/'.

javascript angularjs