A very simple wizard in AngularJS and Bootstrap

JavaScriptAngular JSBootstrap

Please contribute by voting. Thanks!
2
Here's how you can write a very simple wizard container in AngularJS and Bootstrap. This is not a complete solution - more of an easily understood template that can get you started in the right direction.

1) Create a new AngularJS controller.

2) Add the following variabels to the model:

* currentStep: Holds the user's current step in the wizard. Defaults to 1.

* steps: An array that holds all steps. Each item should contain step (number), name and the path to the step's content file.

* user: This is your model for the actual form. For this demo we're adding users.

3) Add the following functions to the controller:

* gotoStep: Navigates the wizard to another step:

vm.gotoStep = function(newStep) {
    vm.currentStep = newStep;
}

*  getStepTemplate: Returns the path for the current step's content file:

vm.getStepTemplate = function(){
    for (var i = 0; i < vm.steps.length; i++) {  if (vm.currentStep == vm.steps[i].step) { return vm.steps[i].template; } }
}

*  save: Saves the form's model:
vm.save = function() {
//todo: save data...
}

The complete controller looks like this:
angular.module('app').controller("WizardController", [wizardController]);
function wizardController() {
  var vm = this;
 
  //Model
  vm.currentStep = 1;
  vm.steps = [
  {
    step: 1,
    name: "First step",
    template: "step1.html"
  },
  {
    step: 2,
    name: "Second step",
    template: "step2.html"
  },
  {
    step: 3,
    name: "Third step",
    template: "step3.html"
  },          
  ];
  vm.user = {};
 
  //Functions
  vm.gotoStep = function(newStep) {
  vm.currentStep = newStep;
  }
 
  vm.getStepTemplate = function(){
  for (var i = 0; i < vm.steps.length; i++) {
      if (vm.currentStep == vm.steps[i].step) {
        return vm.steps[i].template;
      }
    }
  }
 
  vm.save = function() {
//todo: save data... } }  

The markup is just as simple...

4) Add the following markup to a suitable view in your AngularJS app:

<div id="wizard-container" ng-controller="WizardController as vm">

  <div id="wizard-step-container">
  <ul class="nav nav-pills nav-justified">
    <li ng-repeat="step in vm.steps" ng-class="{'active':step.step == vm.currentStep}"><a ng-click="vm.gotoStep(step.step)" href="">{{step.step}}. {{step.name}}</a></li>
  </ul>
  </div>

  <div id="wizard-content-container"> <ng-include src="vm.getStepTemplate()"></ng-include>
  </div>
 
  <div id="wizard-navigation-container">
  <div class="pull-right">
  <span class="btn-group">
    <button ng-disabled="vm.currentStep <= 1" class="btn btn-default" name="previous" type="button" ng-click="vm.gotoStep(vm.currentStep - 1)"><i class="fa fa-arrow-left"></i> Previous step</button>
    <button ng-disabled="vm.currentStep >= vm.steps.length" class="btn btn-primary" name="next" type="button" ng-click="vm.gotoStep(vm.currentStep + 1)">Next step <i class="fa fa-arrow-right"></i></button>
  </span>
  <button ng-disabled="vm.currentStep != vm.steps.length" class="btn btn-success" name="next" type="button" ng-click="vm.save()"> <i class="fa fa-floppy-o"></i> Save</button>
  </div>
  </div>

</div>

*  wizard-step-container: This div hold the navigation for the wizard. I've used Bootstrap's pills for this example.

*  wizard-content-container: This div will load and display each step's content file via ngInclude

*  wizard-navigation-container: This div holds the buttons that makes the user move backward, forward and save the wizard.

5) Create the content files for each step (step1.html, step2.html, etc).


Full source code and demo here:
http://plnkr.co/edit/bCnoXm?p=preview

Article created: Jan 21 '16. Edited Jan 22 '16.

2 Comments

2
HollowPlugh [2]  •  Jan 24  •   •  Reply

Great tip!

1
Robert Bengtsson [107]  •  Jan 23  • 

Thanks! :-)

Your comment

You need to sign up / log in to comment this article

Author

Created by Robert Bengtsson [107] Jan 21 '16

Share article

Do you know about

Cryptography?

Write an article