Nested Aurelia applications

Question

According to Rob Eisenberg, the creator of Aurelia, it should be possible to have nested aurelia applications inside each other.

Since the example he mentions in the above link is not public anymore, it'd be very helpful if anyone here could elaborate further, or even link or write a small example of how this sort of nesting would be implemented.

The main application and interface I'm hoping to create with Aurelia would consist of a Windows XP Desktop style-ish shell, in which one would be able to open nested Aurelia applications from the start menu, opening in an embedded window inside the main applications "windows desktop area" - like a windows or file explorer would open in a normal Windows XP OS, but inside the SPA.

To make this truly extendable I would prefer keeping the possibility of placing the nested aurelia applications in folders outside the main applications root folder, and instead linking to them from the main application using a file/folder path on the disk.

So to keep it "simple", imagine this would be the main application (the windows shell) - clicking the button opens a window, which can be minimized, resized or moved around. In that window another aurelia application would open. And in the end you would hopefully be able to transfer certain state from the main application to the nested apps, like eg. the language or database.

And if possible it would be optimal if the nested application could be located and referenced from outside the main applications root folder.

Answer 1

Here's an example: https://gist.run?id=7cda93aa0a225805ddf6

app.html

<template>
  <require from="./child-app"></require>

  <child-app main.bind="main1"></child-app>
  <child-app main.bind="main2"></child-app>
</template>

app.js

export class App {
  main1 = './one/app';
  main2 = './two/app';
}

child-app.js

import {
  Aurelia,
  noView,
  bindable,
  inject,
  Container
} from 'aurelia-framework';
import {Loader} from 'aurelia-loader';

@noView()
@inject(Loader, Element)
export class ChildApp {
  @bindable main;

  constructor(loader, element) {
    this.host = element;
    this.app = new Aurelia(this.loader, new Container());
    this.app.use.standardConfiguration();
  }

  mainChanged() {
    this.app.start().then(a => a.setRoot(this.main, this.host));
  }
}