2

I have a web app that includes a mini-SPA that is a very complex worksheet. This worksheet can include dozens of pages, each with dozens of fields and links to other parts of the worksheet. Currently architected using AngularJS, every click within the worksheet navigation or on-screen links calls a function (example loadWorksheetPage(x)). These functions in the controller call a REST service and load the correct page information.

The disadvantage I have now is that everything is taking place on a single url. A user could potentially spend a lot of time on different pages in the same worksheet. Maybe they'll expect the back button to work, but currently, it would take them to the last page they visited before the worksheet.

What are some best practices around this type of application? This is a mini-SPA so I don't want angularjs to handle all routing. I could potentially have it handle routing within a worksheet I suppose (worksheet/5/page/7?). That may be a pretty big change though, and I would have to hit an MVC route first (worksheet/5) followed by an angular route (/page/7). Not sure if that's even possible. I'm thinking of any time the user clicks a button to load a different page within a worksheet, I could call an API that saves the page history. Then I could interrupt the back button click to go to the correct page.

Improve this question

1 Answer 1

Reset to default
2

I'm not sure if I should be posting this as a comment or an answer, but here goes. From the sound of it AngularJS ui-router is what you're after.

You're basically saying you have some complex forms and logic that you want to make modular into separate routes, even better controllers and views of their own. This is exactly what ui-router does.

I have developed some very complex forms with ui-router, it gives you infinitely nested routing, abstract states (when you want your child states to inherit some common functionality from a base state), multiple named views (multiple views with their own controllers in one state) and nested routing with optional url's, that is, you can have a state as a child of another state, but choose not to show the url path of the child state even if it is active.

Basically ui-router is probably the most powerful extension to AngularJS out there. It really unleashes the power of AngularJS and helps you write even more dynamic and modular apps.

Get started here:

Get started here

An intro article

In depth Guide

Hope that helped :)

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.