technical-recipes.blogspot.com

For steps on setting up a new Aurelia project please refer to this link: https://www.technical-recipes.com/2019/getting-started-with-aurelia-js-part-2/ (For reference I am using the TypeScript option when creating this new Aurelia project and building / running it in Visual Studio Code.) Some other useful links on this topic can be found here: https://www.syntaxsuccess.com/viewarticle/building-a-treeview-in-aurelia https://gist.run/?id=53dc5b81ef1549cdcc56c3b1fa1e67ba (GistRun link) Anyway the following are the files I added to Visual Studio Code project: app.html [code lang="html"] <template> <require from="styles.css"></require> <require from="tree-view"></require> <tree-view></tree-view> </template> [/code] app.ts [code lang="js"] export class App {} [/code] node-model.ts [code lang="js"] export class NodeModel { public id: string; public icon: s...

An alternative and possibly simpler approach to getting set up and using Aurelia. The previous approach can be found at the following link https://www.technical-recipes.com/2019/getting-started-with-aurelia-js/ Prerequisites The Aurelia CLI has a pre-requisite, Node.js . Get it from here: https://nodejs.dev/download/ In Visual Studio Code press Ctrl + P and type the following command: [code lang="xml"] ext install aurelia [/code] Still in Visual Studio Code, install the Aurelia CLI via the following command: [code lang="xml"] npm install aurelia-cli -g [/code] Step 1: Create a project folder In Windows Explorer create a directory for your Aurelia code projects if you have not yet done so: Step 2: Create the Aurelia project Open Visual Studio Code and in the terminal window enter the 'au new' command plus the name of your Aurelia project: [code lang="xml"] au new projectName [/code] When prompted, select if you want y...

A collection for Aurelia / typescript / javascript as and when I encounter them. For a post on getting set up with Aurelia JS see this post: https://www.technical-recipes.com/2019/getting-started-with-aurelia-js/ https://www.technical-recipes.com/2019/getting-started-with-aurelia-js-part-2/ 1. Hello World! app.js [code language="js"] export class App { constructor() { this.myData = 'Welcome to Aurelia app!'; } } [/code] app.html [code language="html"] <template> <h3>${myData}</h3> </template> [/code] Giving the following output: [caption id="attachment_9033" align="alignnone" width="630"] Hello World![/caption] 2. Detecting mouse movement events From here: https://bl.ocks.org/Vheissu/db72c2d41709697134654d5287913c0c app.html [code language="html"] <template> <div mousemove.delegate="mousemove($event)" style="background: t...

A cut-down version of the quickstart tutorial given at Aurelia's official site: https://aurelia.io/docs/tutorials/creating-a-todo-app The Aurelia CLI has a pre-requisite, Node.js. Get it from here: https://nodejs.org/en/ Step 1: Download the Basic Aurelia Project Setup Get the zip file from this link: http://aurelia.io/downloads/basic-aurelia-project.zip Step 2: Create a project In Windows Explorer create a directory for your Aurelia project: Extract the files from the basic Aurelia project setup and paste them into here: Step 3: Create an example Todo.js class In the src/ folder insert the following code for todo.js todo.js [code language="js"] export class Todo { constructor(description) { this.description = description; this.done = false; } } [/code] Step 4: Add the app.js class In the src/ folder add the following app.js file: app.js [code language="js"] import {Todo} from './todo'; ...