This question pertains to both angular and javascript.
In our angular app, we have numerous objects from the backend that need to remain synchronized. I am facing challenges in establishing efficient data bindings to ensure this synchronization throughout the application.
To address this issue, I developed a DataService service that connects to the backend through websockets. It fetches data as needed and stores it locally in an object called store. For instance:
When a controller requires a list of users, it calls the DataService like this:
DataService.get(users, {}).then(
/* function to set something on the scope */
)
// (or as a resolve)
The DataService retrieves the users from the backend, caches them locally, and returns an array with the results.
If another controller requests the same data, we simply return the cached information.
While this approach works well, there are challenges when the data changes and the backend notifies the DataService about it. Some potential scenarios include:
- If a controller asks for the full list of users, then a new user is added later (from outside the angular environment, via the backend), how can the DataService update the previously returned array?
- Controllers might request specific subsets of users (e.g., all users from city A). When a new user from city A joins the system, how does the DataService know it needs to notify the relevant controller? Storing all queries becomes necessary to match new users to these queries in such cases.