How should my AngularJS "wizard" be structured?

Question

For brevity's sake, consider the following scenario:

Part of my application is a wizard for bringing on new clients and it's a dynamic page. One step contains billing information, another step is setup information, etc. Because it's one page, in my mind I have one controller for the entire wizard, but that also means I have models and functions for each step in one controllername.js file in addition to using a bunch of ng-show directives to "show" steps. This doesn't feel quite right..have I overlooked something in the docs?

Edit:

To exapnd a bit, I feel like I'm violating the SRP and I feel dirty.

Answer 1

You can have a controller for each step, but then you would need a way to share state between your controllers. You could use different strategies for this, like

• an stateful angular service
• angular $cacheFactory
• angular session $cookies/$cookieStore.

Your first step do its work and put its data in this shared structure (session) and then you forward the user to the next step, which in turn, checks the existence of the data in the session or otherwise takes the user back to step 1. Then every step updates the data in the session object and at the end you simply destroy/remove the data from the session when no longer needed.