Skip to content

Instantly share code, notes, and snippets.

@Krussicus

Krussicus/app.html

Created September 6, 2018 11:45
Show Gist options
  • Save Krussicus/d5fb17a588b92f36f37672fedb4362c1 to your computer and use it in GitHub Desktop.
Save Krussicus/d5fb17a588b92f36f37672fedb4362c1 to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia Gist
Raw
app.html
<template>
<nav class="navbar">
<a repeat.for="nav of router.navigation" href.bind="nav.href" class="nav-link ${nav.isActive ? 'active' : ''}">
${nav.title}
</a>
</nav>
<router-view></router-view>
</template>
Raw
app.js
export class App {
configureRouter(config, router) {
this.router = router;
config.map([
{
name: 'home',
route: ['', 'home'],
moduleId: 'home',
nav: true,
title: 'Home'
},
{
name: 'arrivals',
route: 'arrivals',
href: '#/arrivals',
moduleId: 'arrivals',
nav: true,
title: 'Arrivals'
},
{
name: 'products',
route: 'products',
href: '#/products',
redirect: 'arrivals/products',
nav: true,
title: 'Products'
}
]);
}
}
Raw
arrival.html
<template>
Arrival
</template>
Raw
arrival.js
export class Arrival {
}
Raw
arrivals.html
<template>
<nav class="navbar">
<a repeat.for="nav of router.navigation" href.bind="nav.href" class="nav-link ${nav.isActive ? 'active' : ''}">
${nav.title}
</a>
</nav>
<router-view></router-view>
</template>
Raw
arrivals.js
export class Arrivals {
configureRouter(config, router) {
this.router = router;
config.map([
{
name: 'arrival',
route: ['', 'arrival'],
href: '#/arrivals/arrival',
moduleId: 'arrival',
nav: true,
title: 'Arrival'
},
{
name: 'products',
route: 'products/:index?',
href: `#/arrivals/products`,
moduleId: 'products',
nav: true,
title: 'Products',
activationStrategy: 'replace'
}
]);
}
}
Raw
home.html
<template>
Home
</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">
<style>
.navbar {
padding-bottom: 15px;
}
.nav-link {
padding: 0 5px 0 0;
color: blue;
}
.nav-link.active {
color: red;
}
</style>
</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>
Raw
products.html
<template>
Products
</template>
Raw
products.js
export class Products {
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment