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

Useful links: https://code.tutsplus.com/tutorials/how-to-use-map-filter-reduce-in-javascript--cms-26209 https://medium.com/poka-techblog/simplify-your-javascript-use-map-reduce-and-filter-bd02c593cc2d To summarize: map Creates a new array by transforming every element in an array, individually. filter Creates a new array by removing elements that don't belong. reduce Takes all of the elements in an array, and reduces them into a single value. reduce method executes a provided function for each value of the array (from left-to-right). reduce passes your callback four arguments: The current value The previous value The current index The array you called reduce on In this post I use playcode.io to do the compiling of the JavaScripts online. Example Suppose we have the following array of objects, and we wish to filter the list of objects whose age is greater than 12, put the ages of those filtered objects into another array, and find the total age f...

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