Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Aurelia - Getting Started
<!-- app/app.html -->
<template>
<h1>${status}</h1>
</template>
// app/app.js
import {getStatus} from 'status';
getStatus();
// app/app.js
export class App{
constructor(){
this.status = "Aurelia has been Bootstrapped"+
"loading corresponding view for "+
"this view-model.. looking for app.html";
}
}
'use strict';
var express = require('express');
var app = express();
app.use(express.static('app'));
app.get('/', function(req, res) {
res.sendfile('./app/test.html');
});
app.listen(5001);
var gulp = require('gulp');
var browserSync = require('browser-sync');
var nodemon = require('gulp-nodemon');
gulp.task('browser-sync', ['nodemon'], function() {
browserSync.init(null, {
proxy: "http://localhost:5001",
files: ["app/**/*.*"],
browser: "google chrome",
port: 7001,
});
});
gulp.task('nodemon', function () {
return nodemon({script: 'app.js'})
.on('restart', function(){
console.log("refreshing browser...");
});
});
gulp.task('default', ['browser-sync'], function () {
});
export function getStatus(){
console.log('JSPM set up correctly!');
}
<!-- app/test.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<h1>test</h1>
</body>
</html>
<!-- app/test.html -->
<!DOCTYPE html>
<html>
...
<body>
<h1>test</h1>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app');
</script>
</body>
</html>
<!-- app/test.html -->
<!DOCTYPE html>
<html>
...
<body>
...
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
<!-- app/test.html -->
<!DOCTYPE html>
<html>
...
<body>
<h1>Status - Page</h1>
<div class="jumbotron">
<div aurelia-app>
</div>
</div>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.