How to do an angularjs multi-step/wizard form on o

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 .