Alternatives to AngularJS ui-router

Question

I've just started a new project. I'm building a web application, "with native feel", that is going to be run on a remote controlled device in a fullscreen browser (no address bar, fixed resolution). The UI basically consists of multiple fullscreen views. AngularJS is currently the weapon of choice because multiple reasons. I've been trying 'ui-router' and its 'states' to construct the different views. For example:

/#/desktop
/#/menu
/#/videoStore/posterView
/#/videoStore/listView

I very much like having a template, a controller and a URL per view. The fact that the page does not reload when switching views is paramount. However, there are some things I lack.

Double Buffering

I want to be able to prepare the next state/view before transitioning to it. ui-router offers a series of events that will not do. onEnter, $stateChangeStart and $stateChangeSuccess are all called before the state/view controller is even constructed. I'd rather these events where called on the controller before transition. For example onStart when it is first started and onResume on resume.

History behaviour

The state seems to be reconstructed every time I enter it, meaning the template is again added to the DOM and a new controller is instantiated. That is unnecessary and should kill performance. There is no need to reconstruct the menu when leaving the videoStore. Infact, I want to to be able to have it exactly the same, with focus on the same item in subfolders and such without have to recreate it.

Keyhandling

I haven't figured out how to make sure keys go to the right state/view or subview either. I was considering adding a listener to body and then sending the keys to the current scope. Although I do not think that will do because of the uncertainty of which scope is "active" when having multiple views within a state. Some kind of a onFocus event on the state/view controller would be great. Also, there seems to be no way of getting the "active" scope from angular unless traversing $$ (private) fields.

Alright. Thanks for reading.

Here are my questions:

• Is their some way to "make do" with ui-router? I've only evaluated it for two days and might have missed plenty.
• Is there a worthy Angularjs alternative to ui-router out there?
• Are there any other Javascript frameworks out there that does these things similar to how I describe it?

Traceetracer

It might be worth mentioning. Target device is weak and browser is a requirement. – Traceetracer

How do you solve your problem? – Relinquish

@Hampus, I am also wondering how you solved your problem. The assumptions ui-router makes about how an app is constructed are also constricting my desire for 'native feel'. Would be interested to know what you decided to do. – Cranage

Answer 1

You should be fine with ui-router. Regarding most of the problems listed it seems like you need to just minimize the amount of code you're doing in your controllers and move things out to factories/services/providers. This way you can have tighter control over how the data is fetched.

Regarding the DOM, if you use nested states properly then you shouldn't actually have the navigation or other parts reloading when transitioning between states.

The last point Keyboard Handling is just a difficult problem no matter what the underlying framework. You can check out using directives that change the focus (search around if nothing available does what you need then learn to roll your own, assuming here tabindex isn't good enough).

As is so far as I've seen ngRoute or uiRouter are your options insofar as client side routing are concerned and uiRouter is more feature rich.

Regarding if there are "better" frameworks available, questions that are based mostly on opinion (subjective) or where no parameters are known against which we can judge a technology aren't a good fit for StackOverflow.

Accessary

Thanks shaunhusain. I do not want to put controller logic in services. Fine, I can use resolve to fetch data through services beforehand and then read from the cache through the service to the controller. But massaging that data to fit the view is controller logic that I want done before view switching. Also, I might be missunderstanding. ui-router WILL reconstruct the the controller and reinsert the DOM while traversing siblings. How can I do it otherwise? – Traceetracer

Typically if a sibling view is changed then the controller for it's siblings isn't recreated, the ui-view section itself that's changed out and any children will be created/recreated when a state change happens but otherwise the controllers in sibling or parent views don't get changed, see the console here: plnkr.co/edit/xrLsMR9czHyFRStQ0Crv?p=preview – Accessary

I do not see what you are saying. In your example. Add a controller to the contacts.list substate and to the contacts.details substate and you'll see that this controller will be created every time the state is entered. The parent contacts controller will not be recreated since you have never left the parent state. – Traceetracer

yeah that's exactly what I'm saying the same is true with sibling states the only part that a controller will be instantiated for are the parts that get replaced (a state and any of it's child states) – Accessary

I fear you misunderstand me. My views ARE siblings. They are fullscreen views. /menu and /videoStore share nothing (no UI nor data). I'm simply saying that I do not want their controllers (nor DOM) to reinstantiate when switching between them. – Traceetracer