Composing a large'ish Aurelia app - multiple apps on one page

问题

So I have a large application which is composed of features. Each feature is accessible via a menu which essentially loads a web page containing an aurelia app for that particular feature. This is working fine as it allows me to complete a feature at a time and use potentially different client-side technologies as I go.

However, I now need to have more than one Aurelia app on a single page: the "feature" app described above and a "navbar" app which will always sit in the top navbar. The arrangement is thus like below.

I am using webpack with the aurelia webpack plugin. I have tried various arrangements to get this to work, but I hit issues at every turn. My current model is to manually bootstrap the the "feature" app and the "nav" app from a single webpack config file:

entry: {
    packages: [
        "main","nav"
    ]
},

In each of these modules I manually bootstrap, for example:

bootstrap((aurelia: Aurelia) => {
    // init code
    aurelia.start())
    .then(() => aurelia.setRoot(PLATFORM.moduleName("app"), document.querySelector("#packages-app")));});

So, the "features" app is loaded into a particular DOM element, similarly for the "nav" app.

My questions

Is this a supported or even an appropriate way to split functionality?
I seem to get code in one module affecting the other. Is there any way an Aurelia component which is DI injected into modules in each app have shared state?

回答1:

This is a totally valid scenario, as answered in another question by you at Aurelia Webpack Plugin - aureliaApp option - "module not found"

Is this a supported or even an appropriate way to split functionality?

Yes it's a totally valid scenario and you are probably not alone doing this

I seem to get code in one module affecting the other. Is there any way an Aurelia component which is DI injected into modules in each app have shared state?

Normally in Aurelia apps, DI is leveraged to handle this. so what you can do is to register your store instance in advance, for example:

// in your index.ts
import { bootstrap } from 'aurelia-bootstrapper';

// precreate store instance
const the_one_and_only_store = new Store(initState, options);

// bootstrap top nav application, with one instance of Aurelia
bootstrap(aurelia => {
  // do your configuration
  aurelia.container.registerInstance(Store, the_one_and_only_store);

  aurelia
    .start()
    .then(() => aurelia.setRoot(
      PLATFORM.moduleName('topnav'),
      document.querySelector('#topnav')
    );
});

// bootstrap main application, with another instance of Aurelia
bootstrap(aurelia => {
  // aurelia.use.standardConfiguration();
  // ...
  aurelia.container.registerInstance(Store, the_one_and_only_store);

  aurelia
    .start()
    .then(() => aurelia.setRoot(
      PLATFORM.moduleName('app'),
      document.querySelector('app')
    )
});

Now all Store injection in both apps will be pointed to your only store.

来源：https://stackoverflow.com/questions/54873905/composing-a-largeish-aurelia-app-multiple-apps-on-one-page

标签

aurelia