We aim to improve the navigation and routing within our Wizard Module by transitioning from the current implementation, which uses window.location for query parameter manipulation, to a more streamlined Angular routing approach. The proposed changes include:
Replacing the use of window.location with Angular's built-in routing capabilities.
Passing parameters via route params instead of query params.
Adopting the following routing structure: wizard/creator/uc/:useCase/ucg/:useCaseGroup.
Ensuring that the same component is reused during the navigation to prevent UI refreshes.
Enabling user-friendly navigation, including the ability to move back and forth through the browser's history.
Motivation
Maintainability: Utilizing Angular's routing simplifies the codebase and adheres to best practices.
Usability: Route parameters make URLs cleaner and more readable, which is beneficial for users and SEO.
Navigation: Users can navigate using browser history (back/forward), improving the navigational flow within the application.
Use Cases
User Bookmarking: Users will be able to bookmark specific steps within the wizard for quick access.
Browser Navigation: Users can effortlessly move to previous or next steps using the browser's back and forward buttons.
Page Refresh: When users refresh the page, the application will maintain their position in the wizard due to the state being held in the route.
Sharing Links: Users can share their current position in the wizard with others by copying the URL.
Expected Behavior
Navigating to different steps in the wizard via Angular routing instead of direct manipulation of window.location.
Parameters for use cases and use case groups will be passed as route parameters (uc and ucg).
The application should maintain the state without refreshing the UI when navigating between routes.
The browser's history should update accordingly, allowing users to go back and forward through their steps in the wizard.
Suggestions/Ideas (Optional)
Consider implementing route guards to protect wizard steps and ensure users follow the intended flow.
Use Angular's RouterLink directive in templates for internal navigation links.
We aim to improve the navigation and routing within our Wizard Module by transitioning from the current implementation, which uses
window.locationfor query parameter manipulation, to a more streamlined Angular routing approach. The proposed changes include:window.locationwith Angular's built-in routing capabilities.wizard/creator/uc/:useCase/ucg/:useCaseGroup.Motivation
Use Cases
Expected Behavior
window.location.ucanducg).Suggestions/Ideas (Optional)
RouterLinkdirective in templates for internal navigation links.References (Optional)