<!DOCTYPE html>
<html>
<head>
<link data-require="font-awesome@4.3.0" data-semver="4.3.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Aurelia</title>
</head>
<body aurelia-app="animation-main">
<div class="splash">
<div class="message">Aurelia Navigation Skeleton</div>
<i class="fa fa-spinner fa-spin"></i>
</div>
<script data-require="jspm@0.16.11" data-semver="0.16.11" src="https://jspm.io/system@0.16.11.js"></script>
<script data-require="Aurelia@0.15.0" data-semver="0.15.0" src="https://cdn.rawgit.com/distros/aurelia/0.15.0/aurelia.js"></script>
<script src="config.js"></script>
<script>
System.import("aurelia-bootstrapper");
</script>
</body>
</html>
import {Redirect} from 'aurelia-router';
import {inject} from 'aurelia-framework';
import {UserSession} from './user-session';
export class App {
configureRouter(config, router) {
config.addPipelineStep('authorize', AuthorizeStep);
config.map([
{ route: ['login'], moduleId: './login', nav: true, title: 'Login' },
{ route: ['', 'welcome'], moduleId: './welcome', nav: true, title: 'Welcome', auth: true},
{ route: ['child'], moduleId: './child-router', nav: true, title: 'Child', auth: true},
]);
// config.mapUnknownRoutes(instruction => {
// router.navigateToRoute('login')
// });
this.router = router;
}
}
@inject(UserSession)
class AuthorizeStep {
constructor(userSession){
this.userSession = userSession;
}
run(routingContext, next) {
// if (routingContext.nextInstructions.some(i => i.config.auth)) {
// var isLoggedIn = this.userSession.isLoggedIn();
// if (!isLoggedIn) {
// return next.cancel(new Redirect('login'));
// }
// }
return next();
}
}
<template>
<div>Main router</div>
<router-view></router-view>
</template>
System.config({
"baseURL": ".",
"transpiler": "babel",
"babelOptions": {
"stage": 0
},
"paths": {
"*": "*.js"
}
});
System.config({
"map": {
"aurelia-animator-css": "github:aurelia/animator-css@0.13.0",
"aurelia-binding": "github:aurelia/binding@0.8.0",
"aurelia-bootstrapper": "github:aurelia/bootstrapper@0.14.0",
"aurelia-dependency-injection": "github:aurelia/dependency-injection@0.9.0",
"aurelia-event-aggregator": "github:aurelia/event-aggregator@0.6.0",
"aurelia-framework": "github:aurelia/framework@0.13.0",
"aurelia-history": "github:aurelia/history@0.6.0",
"aurelia-history-browser": "github:aurelia/history-browser@0.6.0",
"aurelia-http-client": "github:aurelia/http-client@0.10.0",
"aurelia-loader": "github:aurelia/loader@0.8.0",
"aurelia-loader-default": "github:aurelia/loader-default@0.9.0",
"aurelia-logging": "github:aurelia/logging@0.6.0",
"aurelia-metadata": "github:aurelia/metadata@0.7.0",
"aurelia-path": "github:aurelia/path@0.8.0",
"aurelia-route-recognizer": "github:aurelia/route-recognizer@0.6.0",
"aurelia-router": "github:aurelia/router@0.10.0",
"aurelia-task-queue": "github:aurelia/task-queue@0.6.0",
"aurelia-templating": "github:aurelia/templating@0.13.0",
"aurelia-templating-binding": "github:aurelia/templating-binding@0.13.0",
"aurelia-templating-resources": "github:aurelia/templating-resources@0.13.0",
"aurelia-templating-router": "github:aurelia/templating-router@0.14.0",
"aurelia-validation": "github:aurelia/validation@0.2.5",
"babel": "npm:babel-core@5.5.6",
"babel-runtime": "npm:babel-runtime@5.4.5",
"bootstrap": "github:twbs/bootstrap@3.3.4",
"core-js": "npm:core-js@0.9.18",
"font-awesome": "npm:font-awesome@4.3.0",
"jquery": "github:components/jquery@2.1.4",
"moment": "github:moment/moment@2.10.3",
"ramda": "npm:ramda@0.14.0",
"toastr": "npm:toastr@2.0.4",
"github:aurelia/animator-css@0.13.0": {
"aurelia-templating": "github:aurelia/templating@0.13.0"
},
"github:aurelia/binding@0.7.3": {
"aurelia-dependency-injection": "github:aurelia/dependency-injection@0.8.1",
"aurelia-metadata": "github:aurelia/metadata@0.6.0",
"aurelia-task-queue": "github:aurelia/task-queue@0.5.0",
"core-js": "npm:core-js@0.9.18"
},
"github:aurelia/binding@0.8.0": {
"aurelia-dependency-injection": "github:aurelia/dependency-injection@0.9.0",
"aurelia-metadata": "github:aurelia/metadata@0.7.0",
"aurelia-task-queue": "github:aurelia/task-queue@0.6.0",
"core-js": "npm:core-js@0.9.18"
},
"github:aurelia/bootstrapper@0.14.0": {
"aurelia-event-aggregator": "github:aurelia/event-aggregator@0.6.0",
"aurelia-framework": "github:aurelia/framework@0.13.0",
"aurelia-history": "github:aurelia/history@0.6.0",
"aurelia-history-browser": "github:aurelia/history-browser@0.6.0",
"aurelia-loader-default": "github:aurelia/loader-default@0.9.0",
"aurelia-logging-console": "github:aurelia/logging-console@0.6.0",
"aurelia-router": "github:aurelia/router@0.10.0",
"aurelia-templating": "github:aurelia/templating@0.13.0",
"aurelia-templating-binding": "github:aurelia/templating-binding@0.13.0",
"aurelia-templating-resources": "github:aurelia/templating-resources@0.13.0",
"aurelia-templating-router": "github:aurelia/templating-router@0.14.0",
"core-js": "npm:core-js@0.9.18"
},
"github:aurelia/dependency-injection@0.8.1": {
"aurelia-logging": "github:aurelia/logging@0.5.0",
"aurelia-metadata": "github:aurelia/metadata@0.6.0",
"core-js": "npm:core-js@0.9.18"
},
"github:aurelia/dependency-injection@0.9.0": {
"aurelia-logging": "github:aurelia/logging@0.6.0",
"aurelia-metadata": "github:aurelia/metadata@0.7.0",
"core-js": "npm:core-js@0.9.18"
},
"github:aurelia/event-aggregator@0.6.0": {
"aurelia-logging": "github:aurelia/logging@0.6.0"
},
"github:aurelia/framework@0.13.0": {
"aurelia-binding": "github:aurelia/binding@0.8.0",
"aurelia-dependency-injection": "github:aurelia/dependency-injection@0.9.0",
"aurelia-loader": "github:aurelia/loader@0.8.0",
"aurelia-logging": "github:aurelia/logging@0.6.0",
"aurelia-metadata": "github:aurelia/metadata@0.7.0",
"aurelia-path": "github:aurelia/path@0.8.0",
"aurelia-task-queue": "github:aurelia/task-queue@0.6.0",
"aurelia-templating": "github:aurelia/templating@0.13.0",
"core-js": "npm:core-js@0.9.18"
},
"github:aurelia/history-browser@0.6.0": {
"aurelia-history": "github:aurelia/history@0.6.0",
"core-js": "npm:core-js@0.9.18"
},
"github:aurelia/http-client@0.10.0": {
"aurelia-path": "github:aurelia/path@0.8.0",
"core-js": "npm:core-js@0.9.18"
},
"github:aurelia/loader-default@0.9.0": {
"aurelia-loader": "github:aurelia/loader@0.8.0",
"aurelia-metadata": "github:aurelia/metadata@0.7.0"
},
"github:aurelia/loader@0.7.0": {
"aurelia-html-template-element": "github:aurelia/html-template-element@0.2.0",
"aurelia-path": "github:aurelia/path@0.7.0",
"core-js": "npm:core-js@0.9.18",
"webcomponentsjs": "github:webcomponents/webcomponentsjs@0.6.3"
},
"github:aurelia/loader@0.8.0": {
"aurelia-html-template-element": "github:aurelia/html-template-element@0.2.0",
"aurelia-path": "github:aurelia/path@0.8.0",
"core-js": "npm:core-js@0.9.18",
"webcomponentsjs": "github:webcomponents/webcomponentsjs@0.6.3"
},
"github:aurelia/metadata@0.6.0": {
"core-js": "npm:core-js@0.9.18"
},
"github:aurelia/metadata@0.7.0": {
"core-js": "npm:core-js@0.9.18"
},
"github:aurelia/route-recognizer@0.6.0": {
"core-js": "npm:core-js@0.9.18"
},
"github:aurelia/router@0.10.0": {
"aurelia-dependency-injection": "github:aurelia/dependency-injection@0.9.0",
"aurelia-event-aggregator": "github:aurelia/event-aggregator@0.6.0",
"aurelia-history": "github:aurelia/history@0.6.0",
"aurelia-logging": "github:aurelia/logging@0.6.0",
"aurelia-path": "github:aurelia/path@0.8.0",
"aurelia-route-recognizer": "github:aurelia/route-recognizer@0.6.0",
"core-js": "npm:core-js@0.9.18"
},
"github:aurelia/templating-binding@0.13.0": {
"aurelia-binding": "github:aurelia/binding@0.8.0",
"aurelia-logging": "github:aurelia/logging@0.6.0",
"aurelia-templating": "github:aurelia/templating@0.13.0"
},
"github:aurelia/templating-resources@0.13.0": {
"aurelia-binding": "github:aurelia/binding@0.8.0",
"aurelia-dependency-injection": "github:aurelia/dependency-injection@0.9.0",
"aurelia-logging": "github:aurelia/logging@0.6.0",
"aurelia-task-queue": "github:aurelia/task-queue@0.6.0",
"aurelia-templating": "github:aurelia/templating@0.13.0",
"core-js": "npm:core-js@0.9.18"
},
"github:aurelia/templating-router@0.14.0": {
"aurelia-dependency-injection": "github:aurelia/dependency-injection@0.9.0",
"aurelia-metadata": "github:aurelia/metadata@0.7.0",
"aurelia-path": "github:aurelia/path@0.8.0",
"aurelia-router": "github:aurelia/router@0.10.0",
"aurelia-templating": "github:aurelia/templating@0.13.0"
},
"github:aurelia/templating@0.12.1": {
"aurelia-binding": "github:aurelia/binding@0.7.3",
"aurelia-dependency-injection": "github:aurelia/dependency-injection@0.8.1",
"aurelia-html-template-element": "github:aurelia/html-template-element@0.2.0",
"aurelia-loader": "github:aurelia/loader@0.7.0",
"aurelia-logging": "github:aurelia/logging@0.5.0",
"aurelia-metadata": "github:aurelia/metadata@0.6.0",
"aurelia-path": "github:aurelia/path@0.7.0",
"aurelia-task-queue": "github:aurelia/task-queue@0.5.0",
"core-js": "npm:core-js@0.9.18"
},
"github:aurelia/templating@0.13.0": {
"aurelia-binding": "github:aurelia/binding@0.8.0",
"aurelia-dependency-injection": "github:aurelia/dependency-injection@0.9.0",
"aurelia-html-template-element": "github:aurelia/html-template-element@0.2.0",
"aurelia-loader": "github:aurelia/loader@0.8.0",
"aurelia-logging": "github:aurelia/logging@0.6.0",
"aurelia-metadata": "github:aurelia/metadata@0.7.0",
"aurelia-path": "github:aurelia/path@0.8.0",
"aurelia-task-queue": "github:aurelia/task-queue@0.6.0",
"core-js": "npm:core-js@0.9.18"
},
"github:aurelia/validation@0.2.5": {
"aurelia-binding": "github:aurelia/binding@0.7.3",
"aurelia-dependency-injection": "github:aurelia/dependency-injection@0.8.1",
"aurelia-templating": "github:aurelia/templating@0.12.1"
},
"github:jspm/nodelibs-assert@0.1.0": {
"assert": "npm:assert@1.3.0"
},
"github:jspm/nodelibs-buffer@0.1.0": {
"buffer": "npm:buffer@3.2.2"
},
"github:jspm/nodelibs-events@0.1.1": {
"events": "npm:events@1.0.2"
},
"github:jspm/nodelibs-http@1.7.1": {
"Base64": "npm:Base64@0.2.1",
"events": "github:jspm/nodelibs-events@0.1.1",
"inherits": "npm:inherits@2.0.1",
"stream": "github:jspm/nodelibs-stream@0.1.0",
"url": "github:jspm/nodelibs-url@0.1.0",
"util": "github:jspm/nodelibs-util@0.1.0"
},
"github:jspm/nodelibs-https@0.1.0": {
"https-browserify": "npm:https-browserify@0.0.0"
},
"github:jspm/nodelibs-os@0.1.0": {
"os-browserify": "npm:os-browserify@0.1.2"
},
"github:jspm/nodelibs-path@0.1.0": {
"path-browserify": "npm:path-browserify@0.0.0"
},
"github:jspm/nodelibs-process@0.1.1": {
"process": "npm:process@0.10.1"
},
"github:jspm/nodelibs-stream@0.1.0": {
"stream-browserify": "npm:stream-browserify@1.0.0"
},
"github:jspm/nodelibs-url@0.1.0": {
"url": "npm:url@0.10.3"
},
"github:jspm/nodelibs-util@0.1.0": {
"util": "npm:util@0.10.3"
},
"github:systemjs/plugin-css@0.1.12": {
"clean-css": "npm:clean-css@3.1.9",
"fs": "github:jspm/nodelibs-fs@0.1.2",
"path": "github:jspm/nodelibs-path@0.1.0"
},
"github:twbs/bootstrap@3.3.4": {
"jquery": "github:components/jquery@2.1.4"
},
"npm:amdefine@0.1.1": {
"fs": "github:jspm/nodelibs-fs@0.1.2",
"module": "github:jspm/nodelibs-module@0.1.0",
"path": "github:jspm/nodelibs-path@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.1"
},
"npm:assert@1.3.0": {
"util": "npm:util@0.10.3"
},
"npm:buffer@3.2.2": {
"base64-js": "npm:base64-js@0.0.8",
"ieee754": "npm:ieee754@1.1.6",
"is-array": "npm:is-array@1.0.1"
},
"npm:clean-css@3.1.9": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"commander": "npm:commander@2.6.0",
"fs": "github:jspm/nodelibs-fs@0.1.2",
"http": "github:jspm/nodelibs-http@1.7.1",
"https": "github:jspm/nodelibs-https@0.1.0",
"os": "github:jspm/nodelibs-os@0.1.0",
"path": "github:jspm/nodelibs-path@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.1",
"source-map": "npm:source-map@0.1.43",
"url": "github:jspm/nodelibs-url@0.1.0",
"util": "github:jspm/nodelibs-util@0.1.0"
},
"npm:commander@2.6.0": {
"child_process": "github:jspm/nodelibs-child_process@0.1.0",
"events": "github:jspm/nodelibs-events@0.1.1",
"path": "github:jspm/nodelibs-path@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.1"
},
"npm:core-js@0.9.18": {
"fs": "github:jspm/nodelibs-fs@0.1.2",
"process": "github:jspm/nodelibs-process@0.1.1",
"systemjs-json": "github:systemjs/plugin-json@0.1.0"
},
"npm:core-util-is@1.0.1": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0"
},
"npm:font-awesome@4.3.0": {
"css": "github:systemjs/plugin-css@0.1.12"
},
"npm:https-browserify@0.0.0": {
"http": "github:jspm/nodelibs-http@1.7.1"
},
"npm:inherits@2.0.1": {
"util": "github:jspm/nodelibs-util@0.1.0"
},
"npm:os-browserify@0.1.2": {
"os": "github:jspm/nodelibs-os@0.1.0"
},
"npm:path-browserify@0.0.0": {
"process": "github:jspm/nodelibs-process@0.1.1"
},
"npm:punycode@1.3.2": {
"process": "github:jspm/nodelibs-process@0.1.1"
},
"npm:ramda@0.14.0": {
"process": "github:jspm/nodelibs-process@0.1.1"
},
"npm:readable-stream@1.1.13": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0",
"core-util-is": "npm:core-util-is@1.0.1",
"events": "github:jspm/nodelibs-events@0.1.1",
"inherits": "npm:inherits@2.0.1",
"isarray": "npm:isarray@0.0.1",
"process": "github:jspm/nodelibs-process@0.1.1",
"stream": "github:jspm/nodelibs-stream@0.1.0",
"stream-browserify": "npm:stream-browserify@1.0.0",
"string_decoder": "npm:string_decoder@0.10.31",
"util": "github:jspm/nodelibs-util@0.1.0"
},
"npm:source-map@0.1.43": {
"amdefine": "npm:amdefine@0.1.1",
"fs": "github:jspm/nodelibs-fs@0.1.2",
"path": "github:jspm/nodelibs-path@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.1"
},
"npm:stream-browserify@1.0.0": {
"events": "github:jspm/nodelibs-events@0.1.1",
"inherits": "npm:inherits@2.0.1",
"readable-stream": "npm:readable-stream@1.1.13"
},
"npm:string_decoder@0.10.31": {
"buffer": "github:jspm/nodelibs-buffer@0.1.0"
},
"npm:url@0.10.3": {
"assert": "github:jspm/nodelibs-assert@0.1.0",
"punycode": "npm:punycode@1.3.2",
"querystring": "npm:querystring@0.2.0",
"util": "github:jspm/nodelibs-util@0.1.0"
},
"npm:util@0.10.3": {
"inherits": "npm:inherits@2.0.1",
"process": "github:jspm/nodelibs-process@0.1.1"
}
}
});
body {
margin: 0;
}
.splash {
text-align: center;
margin: 10% 0 0 0;
box-sizing: border-box;
}
.splash .message {
font-size: 72px;
line-height: 72px;
text-shadow: rgba(0, 0, 0, 0.5) 0 0 15px;
text-transform: uppercase;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.splash .fa-spinner {
text-align: center;
display: inline-block;
font-size: 72px;
margin-top: 50px;
}
.page-host {
position: absolute;
left: 0;
right: 0;
top: 50px;
bottom: 0;
overflow-x: hidden;
overflow-y: auto;
}
section {
margin: 0 20px;
}
.navbar-nav li.loader {
margin: 12px 24px 0 6px;
}
.pictureDetail {
max-width: 425px;
}
/* animate page transitions */
section.au-enter-active {
-webkit-animation: fadeInRight 1s;
animation: fadeInRight 1s;
}
/* animate flickr image entry */
div.au-stagger {
/* 50ms will be applied between each successive enter operation */
-webkit-animation-delay:50ms;
animation-delay:50ms;
}
.flickr-img.au-enter {
opacity: 0!important;
}
.flickr-img.au-enter-active {
-webkit-animation: fadeIn 2s;
animation: fadeIn 2s;
}
.flickr-img > a > img {
width: 260px;
height: 180px;
}
/* animation definitions */
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-animator-css');
aurelia.start().then(a => a.setRoot());
}
<template>
<form role="form" submit.delegate="loginAction()">
<input name="userName" type="text" value.bind="userName"></input>
<input name="password" type="password" value.bind="password"></input>
<input type="submit" class="btn btn-default"></input>
</form>
</template>
export class UserSession {
login(username, password) {
this.currentUser = username;
}
isLoggedIn() {
return !Object.is(this.currentUser, undefined);
}
}
<template>
<div>Welcome!</div><br/>
<a href="#/login">login</a><br/>
<a href="#/welcome">welcome</a><br/>
<a href="#/child">child</a><br/>
<a href="#/child/child-welcome">child/child-welcome</a><br/>
<a href="#/child-welcome">child-welcome</a><br/>
</template>
export class Welcome {
constructor() {
}
}
import {Router} from 'aurelia-router';
import {inject} from 'aurelia-framework';
import {UserSession} from './user-session';
@inject(Router, UserSession)
export class Login {
constructor(router, userSession){
this.router = router;
this.userSession = userSession;
}
activate(params){
this.returnUrl = params.ReturnUrl;
}
loginAction() {
this.userSession.login(this.userName, this.password);
this.router.navigate('navigation');
}
}
import {Redirect} from 'aurelia-router';
import {inject} from 'aurelia-framework';
import {UserSession} from './user-session';
export class App {
configureRouter(config, router) {
config.map([
{ route: ['child-welcome'], moduleId: './welcome', nav: true, title: 'Welcome' },
]);
this.router = router;
}
}
<template>
<div>Child router</div>
<router-view></router-view>
</template>