How to do an angularjs multi-step/wizard form on one page/url

Question

I'm trying to figure out reasonable approaches in AngularJS for creating a function that is composed of multiple steps (i.e., a wizard) but is linked to one page/URL. The data from one step would have to send data to (or share data with) the next step.

The main points are:

• the url should remain the same (i.e., http://mydomain/myapp/nameupdater) for all of the steps and,
• the data can be sent amongst steps (i.e., I have to give the data found from step 1 to populate the data in step 2).

For example, suppose that I have a function that does a bulk update of names:

• In step 1 the function makes you search for a name.
• In step 2 the function presents a list of names that were found from step 1 and allows the user to edit them.

I started an approach where each step had its own view and controller. And, the angular-ui-router maintained the states of the function. But, I have no idea how I would share the data between the steps.

Does anyone know of a good approach to establishing multi-step/wizard forms in angularjs?

My Plunker code is here of my very weak attempt at this.

Answer 1

I think the best way of doing this would be to use ng-switch, just one controller, one route, no reload, using variables shared in all steps, like this:

<div ng-controller="stepCtrl">    <div ng-switch="step">       <div ng-switch-when="1">          <!-- here you can include your step 1 template,               or simply just hardcode it here: -->          <div ng-include src="'.../step1.html'">          <button ng-click="setStep(1)"></button>       </div>       <div ng-switch-when="2">           <div ng-include src="'.../step2.html'">          <button ng-click="setStep(2)"></button>       </div>       <div ng-switch-when="3">          <div ng-include src="'.../step3.html'">          <button ng-click="setStep(3)"></button>       </div>    </div> </div> 

     yourApp.controller('stepCtrl',function($scope){         $scope.step = 1;         $scope.setStep = function(step){            $scope.step = step;         }       }); 

This way you can also manipulate the URL to add a step at the end of your current location.

UPDATE :

Actually this answer is for long time ago , this days I personally prefer to use ui-router which is a great module which you can inject to your AngularJs application and make it even more cool with nested views . Speaking of nested views , bellow is my new approach for a multystep form with some animation :

First :

Using $stateProvider declare any steps you want in separate views :    app.config(function($stateProvider, $urlRouterProvider) {  $stateProvider      .state('wizard', {// this will be the wrapper for our wizard         url: '/wizard',         templateUrl: 'wizard.html',         controller: 'wizardController'     })     .state('wizard.stepOne', {// this will be the wrapper for our wizard         url: '/stepOne',         templateUrl: 'stepOne.html',         controller: 'wizardController'     })     .state('wizard.stepTwo', {// this will be the wrapper for our wizard         url: '/stepTwo',         templateUrl: 'stepTwo.html',         controller: 'wizardController'     }) 

Then later in our "wizard.html" we can have something like this :

    <div id="container">      <div>         <h2>Our multistep form wizard</h2>           <div id="status-buttons" class="text-center">             <a ui-sref-active="active" ui-sref=".stepOne"><span>1</span> Step One</a>             <a ui-sref-active="active" ui-sref=".stepTwo"><span>2</span> Step Two </a>          </div>     </div>    <!-- Here we specify our view that is a container for our subviews(steps) , which in our case can be a form !-->      <form id="signup-form" ng-submit="submit()">         <!-- nested state views will be inserted here -->         <div  ui-view></div>     </form>  </div> 

And obviously for our steps , we must have seperated html files. This way , we still have one controller , url will be updated , and we can also add angular animation .