3

I have a module made up of components that require knowledge of multiple states of objects. For example, I need to know the currently selected item for a set of collections. Let's say those collections are events, pages and documents. Therefore, I need to know the current event, page and document, as well as provide getters and setters so that other compnents can get and set the active item and also respond then something is changed. So, where should I store this state information in Angular?

The following approaches would work. Currently I'm going with splitting out the state between multiple domain services. Is there a better way to do this to reduce complexity in the future?

  • Root Scope: Storing the state POJO at the root scope and let it trickle down to all child views and directives. The state object would have to be passed around internally when calling services or other internal compnents (for example, if I wanted to generate a restful url to the active item in a service, I would need to pass that item to the service call to get its id. There would only need to be one object to store the entire app state in. Directives and controllers can "watch" this object for changes and then act accordingly. For example, if the currently selected item changes, then react. This approach would be difficult to take advantage for any directives with isolated scopes.
  • Domain Service: Instead of placing the entire state in one POJO, place only the state appropriate for the particular domain service. For example, a collection service would know about the currently selected collection and it's id. Since all services are singletons, referencing the state would just require referencing its service, then all related business logic around that state would be encapsulated inside of its service. The state would be spread out and separated by services, so there would be more references to more services just to get the aggregated state. Changes to the state are handled inside of the service and changes to the currently selected item are "broadcasted" to all listeners on the $rootScope as an event.
  • Factory: create a specific factory "BusinessState" that stores state, such that this object can now be passed around as dynamically injected.
szahn
  • 183
  • 1
  • 3
  • 11
  • See: http://stackoverflow.com/questions/16331102/rootscope-vs-service-angular-js and http://stackoverflow.com/questions/21515106/how-can-i-communicate-a-settings-object-from-a-controller-to-services/21517827#21517827 – jmunsch Apr 16 '15 at 22:03

1 Answers1

0

One service (or factory) is the way to go.

I would only keep one as long as the number of your collections is small enough and they make sense to be put together (otherwise group them by categories).

Keep it simple or you'll fall into the typical factory that create factories to define the interface of any factory trap.

And whatever you choose, do not pollute the root scope with that. (Even if you do have access to it with isolated directives, either by injecting $rootScopein your directive definition or using scope.$root from the linked scope).

floribon
  • 19,175
  • 5
  • 54
  • 66