This is a primitive wizard service for AngularJS
Wizards are a part of many management UIs, so I thought it would be useful to create a reusable service to handle the paging-type logic contained inherent in wizard design.
NOTE: Bootstrap is not necessary to use this wizard, I have simply used it below in the example to display the wizard.
Bower integration possibly in the future.
Until then, running the following command should retrieve a copy of the source code:
git clone https://github.com/bodom0015/angular-wizard.git
The source code includes a demo.html page which illustrates the usage of this module.
To use the module, add a reference to the javascript to your index.html:
<script src="angular-wizard/angular-wizard.js"></script>Add the ngWizard module to your module's instantiation and pass the Wizard and WizardPage services into your Controller:
angular
.module('wizardTest', [ 'ngWizard' ])
.controller('WizardController', [ '$scope', 'Wizard', 'WizardPage', function($scope, Wizard, WizardPage) {
var wizardPages = [
new WizardPage("first", "First Page", {
prev: null,
canPrev: false,
canNext: true,
next: 'second'
}, false),
new WizardPage("second", "Second Page", {
prev: 'first',
canPrev: true,
canNext: true,
next: 'third'
}, true),
new WizardPage("third", "Third Page", {
prev: 'second',
canPrev: true,
canNext: false,
next: null
}, true),
];
// The delay (in seconds) before allowing the user to click "Next"
var initDelay = 0;
// Create a new Wizard to display
$scope.wizard = new Wizard(wizardPages, initDelay);
// You can wrap this in a function to clear the wizard state between uses
$scope.resetWizard = function() {
$scope.wizard = new Wizard(wizardPages, initDelay);
}
}]);You should then be able to bind to this wizard in the view template:
<div ng-view ng-controller="WizardController" class="container">
<div class="row">
<div class="col-md-12">
<h1>ngWizard Demo Page</h1>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#wizardModal" ng-click="resetWizard()">
Launch demo wizard
</button>
<pre>{{ wizard | json }}</pre>
<!-- Wizard Popup (Modal) -->
<div class="modal fade" id="wizardModal" tabindex="-1" role="dialog" aria-labelledby="wizardModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="wizardModalLabel">Wizard Demonstration</h4>
</div>
<div class="modal-body">
<div class="row">
<!-- Wizard Page selector -->
<div class="col-md-12">
<!-- Wizard progress bar here -->
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="{{ wizard.percentage }}" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: {{ wizard.percentage }}%;">
{{ wizard.percentage }}%
</div>
</div>
<!-- Wizard Pages shown here -->
<div ng-if="wizard.currentPage.key === 'first'">
<h4>First Page</h4>
<p>This is the first page of the wizard!</p>
<p>You can use this page to introduce the user to the operation that you are about to perform.</p>
</div>
<div ng-if="wizard.currentPage.key === 'second'">
<h4>Second Page</h4>
<p>This is the second page of the wizard!</p>
<p>You can use this page to collect data necessary to perform the operation described on the previous page.</p>
<p><strong>NOTE:</strong> Make sure to get the user's permission / confirmation before changing any of their data.</p>
</div>
<div ng-show="wizard.currentPage.key === 'third'">
<h4>Final Page</h4>
<p>This is the final page of the wizard!</p>
<p>This is where you can notify the user about the success (or failure) of the requested operation.</p>
<p><strong>NOTE:</strong> In the case of failure, you may wish to provide the user with a method of going back to adjust their input.</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div ng-if="wizard.canNextPage()">
<!-- "Cancel" button (close modal with success === false) -->
<button class="btn btn-danger pull-left" ng-if="wizard.canNextPage()" data-dismiss="modal" aria-label="Close"><i class="fa fa-times"></i> Cancel</button>
<!-- Previous Page -->
<button class="btn btn-primary" ng-disabled="!wizard.canPrevPage()" ng-click="wizard.prevPage()"><i class="fa fa-arrow-circle-left"></i> Back</button>
<!-- Next Page -->
<button class="btn btn-primary" ng-disabled="wizard.currentTimer > 0 || !wizard.canNextPage()" ng-click="wizard.nextPage()">
Next <span ng-show="wizard.currentTimer > 0">({{ wizard.currentTimer }})</span>
<i ng-show="wizard.currentTimer === 0" class="fa fa-arrow-circle-right"></i>
<i ng-show="wizard.currentTimer > 0" class='fa fa-spinner fa-spin'></i>
</button>
</div>
<div ng-if="wizard.currentPage.nextPage === null">
<!-- "Finish" button (close modal with success === true) -->
<button class="btn btn-success" ng-disabled="!wizard.canPrevPage()" data-dismiss="modal" aria-label="Close" ng-click="wizard.success = true">Finish <i class="fa fa-check-circle"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>MIT