Aurelia and Meteor power combined.
- Install Meteor
$ curl https://install.meteor.com | /bin/sh - Create a new meteor app using
$ meteor create myappor navigate to the root of your existing app - Install Aurelia
$ meteor add ahmedshuhel:aurelia
- Example application : A
aurelia-meteorport of skeleton-navigation - Simple Todo Application : A port of official meteor todo application.
To bootstrap Aurelia, in the index.html (the root of an Meteor app), include:
<body>
<div aurelia-app="client/main"></div>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>The aurelia-app="client/main" attribute points to the Aurelia configuration file named main, which is main.es.js.
In the client folder create main.es.js and insert:
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging();
aurelia.start().then(a => a.setRoot('client/app'));
}The main.es.js is the file where the configuration is done to bootstrap Aurelia.
In this case the main file tells where the entry point of the app is located ('client/app'), which means go look for the app.tmpl.html, app.es.js pair.
By convention Aurelia uses view/view-model pairs of the same name.
In the client folder, create app.tmpl.html and insert:
<template>
<input type="text" placeholder="Your name" value.bind="name">
<h2>Hello ${name}!</h2>
</template>Then create app.es.js and insert:
export class App {
constructor(){
this.name = "";
}
}- Use
.es.jsfor every javascript file that Aurelia will handle. - Use
.tmpl.htmlfor every Aurelia Templates. - Typescript can be used too. Just
.tswill work for typescript files.