Open child window within same application (same services, dependency injection, the lot!)

[Mattias Wallenberg]

This has already been posted on Stack Overflow, but didn't get any traction there, so here goes:

I am writing an AngularJS application that needs to be distributed in two browser windows. Is it possible to have an application span both windows, i.e. have the same services, dependency injection etc. available in both windows? If not, is it possible to share a service between two different Angular apps?

The reason it should be placed in two separate windows is that we are replacing a desktop application that worked this way, and most user have dual-screen setups for working with this app. So it is not one window and a popup, rather two different views of the same data. Data that is updated in one window should immediately update in the other; my idea is to place common data in services, and have the controllers in the different windows use $watch on data in the service.

[Sander Elias]

Hi Mattias,

No, it is not possible to share a service, or anything between 2 windows. It is however possible to communicate between multiple windows. 

But first let me ask you, is this application just run on those 2 screens for 1 user? Or is the same application running for multiple users?

If it is running for multiple users, shouldn't the screens of those be updated too?

Regards

Sander

[Mattias Wallenberg]

Hi Sander,

Ok, thanks, then I can discard that idea.

The application is running on multiple computers, all working with the same database. So actually, they would all need to have some kind of auto-refresh in place. So I guess it makes sense that the two windows both update from the same database, possibly triggered by some mutual events... perhaps they should be able to broadcast event's on each other's rootScope to force reloads when necessary?

[Sander Elias]

Hi Mattias,

Ok, that's the issue. if it's on 1 computer for 1 user, you can use html5's local-storage to communicate between multiple instances. 

However, as you have more then 1 system, you might as well solve it system wide while you are busy with this.

What server software are you using? there are quite a number of way's to let the server push messages to the client. Also the server know's which 'screens' carry the same data, so it can push to those 'screens' only!

Regards

Sander

[Mattias Wallenberg]

Hm, I hadn't considered localStorage for some reason. Some of the data is sensitive, so it might be a security concern, but it's worth checking out. Otherwise you should be able to create a service that accesses the child window and loads some data from it, right? The child window would have to store said data globally, which is bad but at least functional.

The backend is a legacy system, based around API calls (RPC-style, not REST). The ideal would be a WebSocket to the client, but I think I will have to keep it simpler to fit in the project's scope; reloading data stored on the clients on a set interval or when manually triggered by the user. Far from elegant, though.

[Sander Elias]

Mattias,

Localstorage has events (somehow everybody keeps forgetting this) it fires an event when updated. so it's pretty easy to write a service that makes use of this. This is making cross-windows communication a snap!

However, I don't think you should go this way! As this is a solution for a single user, using the same browser multiple times. If the users opens your app in 2 different browsers, it won't fly.

Can't you add an backend communication server. The only responsibility of this one, is telling who to update what. I guess it is as much work as the localstorage solution.

Regards

Sander

[Mattias Wallenberg]

Events on localStorage, I wasn't aware of that. Cool!

This is an update to parts of a legacy application, which brings a lot of baggage to the project. For example, it can't be opened in two different browsers, because it only works in one specific version of a specific browser to begin with. Can you guess which one? :)

Also, the two windows are a child and a parent window, and they are the only ones that need direct communication. It's something like "if the user presses X in child window, element Y on parent window should change color". That change doesn't have to be propagated to the other clients. Other changes to the backend data can be reloaded periodically; it doesn't have to be updated in real-time for the app to work.

2014/1/16 Sander Elias <sande...@gmail.com>

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/39rMPgshqEA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

[Sander Elias]

Hi Mattias,

I'm so sorry for you! But hey, localStorage works even there! :-)

Regards

Sander

[Mattias Wallenberg]

Ha! :) Yes, thanks for all the help.

2014/1/17 Sander Elias <sande...@gmail.com>

--