0

Currently in our project, we are using Angular's Router to define our routes. We have a wizard-esque single page app that has next and previous buttons on each page that define which route to go to next and previous respectively. These next and previous buttons are implemented with conditional logic on each page based on user input from previous pages (e.g. if user selected "Option1 and Selection1" from a previous page, go to Page X, else go to Page Y). This works most of the time; however, as we add more pages that require more conditional logic, this could potentially get out of hand.

Is there a way to simplify this process? I've researched Angular Router guards, and while they provide a way to redirect a user to a certain page if the application doesn't have the necessary data at the time a route is called, I don't think they are what we are looking for.

user8539602
  • 21
  • 2
  • How about RegularExpressions? https://stackoverflow.com/questions/18131834/angularjs-regex-route-for-similar-url-to-load-different-controller-and-view – salah-1 Feb 20 '18 at 18:43
  • Sounds like the problem isn’t pager, conditional or router but the design itself. – salah-1 Feb 20 '18 at 18:44
  • Sorry, I added a bit of a clarification above -- I want to go to a certain page based on answers from a previous page. – user8539602 Feb 20 '18 at 19:37

1 Answers1

0

If the user isn't meant to to access page 2+ of your wizard directly, there's no reason to use Router imo. I'd go for one main component/route, a custom tree data structure that defines the user flow in it like models, components, dynamic forms, editors, api endpoints, etc used in each step. If there's too many cases for simple ng-switches, toss in ComponentFactories: https://angular.io/guide/dynamic-component-loader

Ie. I try to avoid having like Step1Component etc., and have reusable components that allow different kind of UIs built from basically just json. Though in a smaller case step1, step2, etc. -components are fine too.

funkizer
  • 4,626
  • 1
  • 18
  • 20
  • Is this kind of what you're talking about? https://stackoverflow.com/questions/37746516/use-component-in-itself-recursively-to-create-a-tree Edit: Or this? https://angular2-tree.readme.io/docs – user8539602 Feb 20 '18 at 19:49
  • Not a dom tree, i mean just a json array of steps, their data models (which may include metadata on which kind of editors/form elements they need), possible sub-steps (hence a tree) etc.. – funkizer Feb 21 '18 at 19:12