ui-state module and scoping

[mattbroekhuis]

In my experimentation and reading the code, it seems as though ui-state is directly coupled with the $rootScope.

I would like to have seperate $uiState instances in two different controller scopes. This way, a component can manage it's subviews independently.

Am I right about this coupling? Or is there a way to accomplish this with the current codebase?

[nateabele]

I'm working on some relative state targeting features that should allow child and sibling states to be navigated without knowing where you are in the hierarchy. Beyond that, I can't really think of what else you need to accomplish what you're talking about.

Maybe you could start by putting together a small prototype, and if you can't get it to do what you want, throw it up on Plunkr and we'll take a look.

[mattbroekhuis]

Basically I'm trying to do something like this

https://github.com/mgonto/restangular#how-to-create-a-restangular-service-with-a-different-configuration-from-the-global-one

Here's a crude pseudo code plunkr that hopefully helps say what I want to do.
http://plnkr.co/edit/RqQId4SPfhfp1sZPf1ZC

I'm trying to use ui-state and ui-views with a scope other than global. You could then leverage all the view changing ability independently in a given component. I am new to Angular, so perhaps this a problem that has already been solved?

[mattbroekhuis]

Did that help at all? Is there any way to have two completely separate components in one Angular app with completely separate states at the same time? Or is this just simply not possible???

[mattbroekhuis]

Same as this request

http://stackoverflow.com/questions/18019359/how-to-manage-state-with-the-ui-router-with-multiple-modules

[nateabele]

The wiki page and associated Plunkr example spell it out pretty explicitly. I'm not sure what you're trying to accomplish that can't already be done in a very straightforward way with what's been presented.

[mattbroekhuis]

it says "How do I configure ui-router from multiple modules, it doesn't seem to get the same state provider?"

I want it to NOT have the same state provider. I want the left nav and the main view to be completely seperate, with their own state providers. Is that what that example is showing? Because it does not look like that to me at all.

[nateabele]

You don't need separate state providers for that. Again, I'm pretty sure the system is already capable of what you're asking for. I suggest you try it and see. Until then, I'll just leave this closed. If you try it and find that you are not able to do what you hope, please post a link to a live, working example, and reopen the issue, then we'll help you take a look at it. Thanks.

[mattbroekhuis]

I have been trying for the last 2 days. I get one $state object all over the application, it is scope to the root. When I change it, it changes state for everything. I don't want that.

Think of a situation where I have 300 little modules in an angular app. Each one has a set of completely different states and views that have absolutely nothing to do with the others. Is that possible? Do you know what I'm asking? I'm not asking you to write it for me, I just want to know if it is possible.

[nateabele]

Sorry for the confusion. $state is a service, and services are global to an Angular injector. This is the service provided by $stateProvider, and represents all states simultaneously, not just one individually. However, again, this does not prevent you from connecting multiple groups of independent states.

[mattbroekhuis]

no problem, i appreciate your responses. I have read through a lot of the issues list, and the documentation many times, and stack over flow, google, etc. I just can't see how it can be done with the current code if state is only ever one global string -- short of registering every different possible combination of state between two components that have no real hierarchical relationship at all. -- eg how would you say "component 1, you go to state "yellow", and component 2, you go to state "green" without registering some yellowgreen state that sets up both the components.

Even if I could just get a hold of one particular UI-View and control what template/controller combination goes in there, that would be something. I can't seem to get that figured out either because it's all tied up with rootscope.

[nateabele]

I'm sorry, I really don't quite follow, but I also really don't think that it's tied up with $rootScope the way you think it is. @timkindberg, any thoughts or insight here?

[timkindberg]

He wants to do orthogonal views. Not currently possible. MAYBE if you
don't use URLs but I have no idea.

[mattbroekhuis]

Yes. I have no desire to use URLS for anything but the one component. Everything else can get reset on refresh (or I could persist to local storage)

Do you think if the ui.state and ui.view module were able to be used with a scope other than root, that would maybe do the trick? I will look into it, but being as I'm somewhat new, was looking for some guidance before I invest a lot of time.

[laurelnaiad]

In case anyone's having deja vu, there's another thread about this, too: #160 . @Broeks, your idea is interesting.

[mattbroekhuis]

So yeah, I'm kinda new to this angular thing, but it seems to me there's some nice modular pieces here with ui-state, ui-view, ui-router. I want to know if there's any sort of (angular or otherwise) reason why they (seem) to be coupled with rootScope. Seems like it would be better to have the ability to pass in your own scope? Would it not be a potential shortcut to solving the independent state thing?

I'm doing a POC to see if we even want to migrate our existing backbone.js app to this. I really want to use it, but reaching a major roadblock with this! Wish I had more domain knowledge to contribute instead of asking these abstract questions.

[nateabele]

@Broeks Haha, at least now I understand what it is you're after! :-) Thanks, @timkindberg.

So, yeah, supporting multiple independent state trees for different scopes is definitely not something we support right now, unfortunately.

However, this actually has very little to do with $rootScope, and more to do with the singular nature of Angular's injector, and the fact that all Angular services are singletons.

Then there are the conceptual problems with trying to manage multiple parallel states in a single global environment like a browser, especially when the whole point of the ui-router project is, unsurprisingly, managing routes.

This leads us to all sorts of paradoxes, like 'which set of states gets serialized to the URL first?', and 'do we serialize the whole "first" tree from left to right before starting on the "second", whatever the second is?'...

That being said, I'm not opposed to it, but given the project's current goals and technical constraints, I just don't see a way to do it.

[mattbroekhuis]

Well, i would think just carving out ui.state and ui.view to work in an independent state tree would be very useful for making DRY, stateful components/widgets.

You could control those states from an application level using a "global" router, or by broadcasting events, or any number of other ways. Considering you've modularized them somewhat already, it didn't seem like too far of a stretch to provide an option to provide a local scope for those two pieces. Did you have a look at that RESTangular link i posted above? Is that a pattern that could possibly be used? (.withConfig)

[mattbroekhuis]

Or, at the very least, is there a way for me to grab a hold of a particular ui-view and manually set the template and controller? Independent of ui-state? That's what I've been looking into now...

[timkindberg]

@Broeks We are not going to be able to look into this at the moment. We are trying to clean up and release 0.0.2 at the moment. If you figure anything out please share as I would be very interested if you can get something like that working.

[cm325]

I'd like this feature as well, I think practically every large SAP will eventually run into a situation where they have multiple modules or controllers, that want to manage state of a particular widget, and do so independently-

[nateabele]

@Broeks

Or, at the very least, is there a way for me to grab a hold of a particular ui-view and manually set the template and controller?

Almost. I've been working on extracting out a separate $view service that will do pretty much exactly that. Should have it done within the next week or two. It will require an absolute dot-separated path to the ui-view you want to use, so hopefully that's not a deal-breaker for you.

[cm325]

I think that would at least give us a way forward for the moment-

[mattbroekhuis]

Sounds great. Thank ya kindly. Hopefully we decide to go with angular here and I can contribute somehow.

[irfaan]

@mattbroekhuis, did you ever find a (temporary) solution to this? I'm trying to accomplish orthogonal views myself. I was considering some kind of custom URL .rule() that would break down a url (e.g. #/state/viewA1/viewA2/#/viewB1) to set the state and then somehow pass the views into the $rootScope to set the other views. This would be a one-way solution though (URL -> views), and would require one to write a whole new url with every single view changed.

[mohamedmansour]

@mattbroekhuis @nateabele is there a temporarily solution for this? ui-router is great to manage url routes, but if my application has multiple components, having a $state for each component where I don't care about the URL would make development a lot easier. Right now I am sending messages through rootScope which is ugly.