#28 Create a Sample showing how to create a Wizard

[Anonymous]

Originally created by: dwmkerr

A really useful sample would be how to create a wizard with the angular modal service.

http://www.panopta.com/static/bootstrap-wizard-plugin/demo/demo.html

[Anonymous]

Originally posted by: dwmkerr

Suggested approach:

1. Create a modal which represents the 'frame' of the wizard, with forward/backward buttons.
2. Include an ng-include in the frame which will include the page the wizard is on.
3. Define a page as a small object which defines the controller and template.
4. When each page is constructed, inject a wizardState object into the controller, this represents the state of the overall process that is being run through. Each page is created/destroyed as needed, and reinitialises itself based on the state object.
5. Each page can enable/disable/set the text of the forward backward buttons, but pressing them invokes the frame controller, replacing the ng-include with the next page in the list (or dismissing the modal and returning the wizard state).