Communicating between modules

Communication between modules is facilitated by an EventHub. This EventHub is part of GoldenLayout and can be
accessed as myLayout.eventHub or container.layoutManager.eventHub. It's just a normal EventEmitter - but with a twist: It works across all open popout windows in both directions. This happens implicitly, so as far as usage is concerned just use the usual on, off and emit methods.

Injecting container and state

You’ve probably noticed the code that selects the initial user based on a configured state.

selectedUserIndex is part of the GoldenLayout configuration and will be passed to the component's constructor function.
From there it needs to get into Angular. Since the bootstrapping process for Angular modules is pretty much always the same, we'll write a generic component for it and tell it via configuration which template to load and which module to create. Our component configuration would therefor look like this

var AngularModuleComponent =function( container, state ){ // Templates are stored in template tags in the DOM.
var html = $('#'+ state.templateId ).html(),
element = container.getElement(); // Write the template's html into the container
element.html( html ); // Inject container and state into the module. If multiple instances of
// the same module are created this will override the previous module's container
// and state with the current (correct) one
angular
.module( state.module ).value('container', container ).value('state', state ); // Actually kick off Angular's magic
angular.bootstrap( element[0],[ state.module ]);};