Aurelia Nested Applications

Question

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

Since the example that he mentions in the link above is no longer publicly available, it would be very useful if someone here could continue development or even link or write a small example of how such nesting would be implemented.

The main application and the interface that I hope to create with Aurelia will consist of the Windows XP Desktop-ish shell, in which one could open the Aurelia sub-applications from the Start menu, opening the "Windows desktop area" in the main window inside the main application. - for example, Windows or File Explorer will open in regular Windows XP, but inside SPA.

To make this truly extensible, I would rather keep the ability to place aurelia nested applications in folders outside the root folder of the main applications and instead bind them to the main application using the file / folder path on the disk.

So, to make it “simple”, imagine it will be the main application (Windows shell) - clicking a button opens a window that can be minimized, resized or moved. Another aurelia application opens in this window. And, in the end, you hopefully can transfer a certain state from the main application to nested applications, for example, for example. language or database.

And if possible, it would be optimal if the embedded application could be located and referenced from the root folder of the main applications.

Answer 1

Here is 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'; } 

baby-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)); } }