The application flow is controlled by two different mechanisms. The first is the standard AngularJS routeProvider service and the second is the viewController service that uses the stateMachine service.

The core of the application's navigation is managed by the routeProvider service. As the user clicks on links, the various controllers use the $location service to navigate to the various pages. This is the normal application flow as used by most AngularJS applications. You can see the routes that have been configured in the file app.js in the sample application's source folder.

When the user wants to brew one of his or her recipes, the application uses the viewController and stateMachine services to manage the application's flow. The startBatch controller loads the stateMachine service with the brewingProcessStateMachine state data and instantiates an instance of the BrewProcessController and adds it to the viewController. It then invokes the navigateToBeginStateForActivity function on the viewController service, which in turn asks the stateMachine controller to return the beginning state for the brewing process and then uses the $location service to load the appropriate view for the state.

As the user moves through the brewing process, the various controllers for each view that is displayed to the user will invoke the getTargetStateForCommand method on the viewController service to move to the state associated with the command. The viewController service also invokes the pre, post, and command functions associated with each state that exists on the BrewProcessController. This allows us to associate code with the transitions between each state of the state machine.

This continues until the end state of brewProcess and the viewController service navigates back to the home page of the application.

One of the things that is important is that the routeProvider service must have an entry for each URL of each state in the state data that points to the appropriate partial. This is because the viewController service leverages the $location service to navigate from view to view. By leveraging the $location service, we are able to reduce the amount of code needed by our application.