technical-recipes.blogspot.com

Firstly in your project folder make sure Aurelia dialog has been installed: [code language="text"] npm i aurelia-dialog [/code] Also see this following link on how to get started in creating, building, running etc a new Aurelia project: https://www.technical-recipes.com/2019/getting-started-with-aurelia-js-part-2/ In your src folder create the following files as a bare minimum dialog example: dialog.html [code language="html"] <template> <style> div.div{ border: 1px solid blue; padding: 15px; } </style> <div class="div"> <div> <h1>${title}</h1> </div> <div> <p1>${message}...</p1> </div> <div> <button click.delegate="ok()">OK</button> </div> </div> </template> [/code] dialog...

Some instructions on how to get started with a very simple TypeScript-based example in a Visual Studio Code development environment. 1. Create a new Aurelia project If you're unfamiliar with creating a new Aurelia project see this existing post for more instructions: https://www.technical-recipes.com/2019/getting-started-with-aurelia-in-visual-studio-code/ In the options presented during project creation I choose to use TypeScript. The files we are interested in modifying will be created in the src /folder as shown: 2. Create the web pages Create two more sub-folders within the src folder: 'home' and 'about': Into these folders will insert the files home.html, home.ts, about.html, about.ts: home.html [code lang="html"] <template> <h1>Home page</h1> </template> [/code] home.js [code lang="js"] export class Home {} [/code] about.html [code lang="html"] <template> <h1>A...

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...