Skip to content

Instantly share code, notes, and snippets.

@Alexander-Taran

Alexander-Taran/app.html

Last active April 26, 2018 18:12
Show Gist options
  • Save Alexander-Taran/a65ca2eedcbc858dffe92aba654e2e98 to your computer and use it in GitHub Desktop.
Save Alexander-Taran/a65ca2eedcbc858dffe92aba654e2e98 to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia Gist
Raw
app.html
<template>
<ul>
<li><a route-href="route: page1; params.bind: {id:1}">page1</a></li>
<li><a route-href="route: page2; params.bind: {id:2}">page2</a></li>
</ul>
<router-view></router-view>
</template>
Raw
app.js
import {RouterConfiguration, Router} from 'aurelia-router';
export class App {
router;
configureRouter(config, router) {
this.router = router;
config.title = 'Aurelia';
config.map([
{ route: '', name: 'home', moduleId: 'home.html' },
{ route: 'page1/:id', name: 'page1', moduleId: 'page1'},
{ route: 'page2/:id', name: 'page2', moduleId: 'page1'}
]);
}
}
Raw
home.html
<template>
home
</template>
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>
Raw
page1.html
<template>
<h1>page1</h1>
${log}
</template>
Raw
page1.js
import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';
@inject(Router)
export class Page1 {
log
constructor(router) {
console.log('page 1 constucting');
this.log += ' page 1 constucting'
this.router = router;
}
activate(params) {
console.log('page 1 says hello');
this.log += ' page 1 says hello'
}
deactivate() {
console.log('page 1 says goodbye');
this.log += ' page 1 says goodbye'
}
}
Raw
page2.html
<template>
<h1>page2</h1>
${log}
</template>
Raw
page2.js
import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';
@inject(Router)
export class Page2 {
log
constructor(router) {
console.log('page 2 constucting');
this.log += ' page 2 constucting'
this.router = router;
}
activate() {
console.log('page 2 says hello');
this.log += ' page 2 says hello'
}
deactivate() {
console.log('page 2 says goodbye');
this.log += ' page 2 says goodbye'
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment