Skip to content

Instantly share code, notes, and snippets.

@jsobell

jsobell/app.html

Last active August 1, 2019 09:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save jsobell/ab55d2db964fbe300c06518336a52566 to your computer and use it in GitHub Desktop.
Save jsobell/ab55d2db964fbe300c06518336a52566 to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia Router Gist with Child router
Raw
app.html
<template>
<h1>${message}</h1>
Links:
<ul>
<li><a href='#/'>root</a></li>
<li><a href='#connect'>connect</a></li>
<li><a href='#connect/testapp'>connect/testapp</a></li>
</ul>
<router-view></router-view>
</template>
Raw
app.js
export class App {
message = 'Hello World!';
configureRouter(config: RouterConfiguration, router: Router) {
config.addPipelineStep('authorize', AuthorizeStep);
config.map([
{ route: '/', name: 'home', moduleId: 'home', settings: { roles: ['Trainer', 'Boss'] }},
{ route: '/connect', name: 'root', moduleId: 'connect/connect', settings: { roles: ['Admin'] }}
]);
}
}
class AuthorizeStep {
run(navigationInstruction, next): Promise<any> {
console.log('Checking user roles: ', navigationInstruction.getAllInstructions().map(i => i.config.settings.roles) )
return next();
}
}
Raw
connect\connect-app.html
<template>
connect/connect-app.js
<h3>Appname: ${app_name}</h3>
</template>
Raw
connect\connect-app.js
export class connectApp {
activate(params) {
this.app_name = params.app;
}
}
Raw
connect\connect.html
<template><router-view></router-view></template>
Raw
connect\connect.js
export class connect {
configureRouter(config: RouterConfiguration, router: Router) {
this.router = router;
config.map([{
route: ['/','home'],
name: 'connect-list',
moduleId: 'connect/list',
settings: { roles: ['Trainer1', 'Boss1', 'Admin1'] }
}, {
route: ':app',
name: 'connect-app',
moduleId: 'connect/connect-app',
settings: { roles: ['Trainer2', 'Boss2', 'Admin2'] }
}]);
}
}
Raw
connect\list.html
<template>connect/list</template>
Raw
connect\list.js
export class list {
}
Raw
home.html
<template>Home on the range...</template>
Raw
home.js
export class home {
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app>
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment