Skip to content

Instantly share code, notes, and snippets.

@MT-PL-SWF-Dev

MT-PL-SWF-Dev/app.html

Last active June 7, 2017 14:36
Show Gist options
  • Save MT-PL-SWF-Dev/a07bed877f5a2196bcf54413af0972fb to your computer and use it in GitHub Desktop.
Save MT-PL-SWF-Dev/a07bed877f5a2196bcf54413af0972fb to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia Gist
Raw
app.html
<template>
<h1>${message}</h1>
<button click.delegate="changeApp()">App2</button>
<button click.delegate="known()">Known</button>
</template>
Raw
app.js
import {inject, Aurelia} from "aurelia-framework";
import {AppRouter} from "aurelia-router";
@inject(Aurelia, AppRouter)
export class App {
message = 'Hello World!';
constructor(aurelia, appRouter) {
this._aurelia = aurelia;
this._appRouter = appRouter;
}
activate() {
}
changeApp(){
this._appRouter.deactivate();
this._appRouter.reset();
this._aurelia.setRoot("shell2");
}
known(){
this._appRouter.navigateToRoute("known");
}
}
Raw
app2.html
<template>
<h1>NEW: ${message}</h1>
<button click.delegate="changeApp()">App1</button>
<button click.delegate="unknown()">Unknown</button>
</template>
Raw
app2.js
import {inject, Aurelia} from "aurelia-framework";
import {AppRouter} from "aurelia-router";
@inject(Aurelia, AppRouter)
export class App {
message = 'Hello World 2222!';
constructor(aurelia, appRouter) {
this._aurelia = aurelia;
this._appRouter = appRouter;
}
changeApp(){
this._appRouter.deactivate();
this._appRouter.reset();
this._aurelia.setRoot("shell");
}
unknown(){
this._appRouter.navigateToRoute("known");
}
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app="main">
<h1>Loading...</h1>
<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
<script>
require(['aurelia-bootstrapper']);
</script>
</body>
</html>
Raw
known.html
<template>
DUAPDPADUAPDIUASPl
</template>
Raw
known.js
export class Known {}
Raw
main.js
export function configure(aurelia) {
aurelia.use.standardConfiguration();
return aurelia.start().then(ar => ar.setRoot("shell"));
}
Raw
shell.html
<template>
<h1>SHELL 1</h1>
<router-view></router-view>
</template>
Raw
shell.js
export class Shell {
configureRouter(config, router) {
config.map([{
route: ["","app1"],
name: "app1",
moduleId: "app"
},
{
route: ["known"],
name: "known",
moduleId: "known"
}
]);
return config;
}
}
Raw
shell2.html
<template>
<h1>SHELL 2</h1>
<router-view></router-view>
</template>
Raw
shell2.js
export class Shell2 {
configureRouter(config, router) {
config.map([{
route: [""],
name: "app2",
moduleId: "app2"
}
]);
config.mapUnknownRoutes(() => {
alert("unknown");
});
return config;
}
activate(){
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment