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

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

See this link for very similar instructions: https://www.typescriptlang.org/docs/handbook/asp-net-core.html Step 1: Create a new Asp.Net Core project Select Empty project: Click OK. Step 2: Add Microsoft.AspNetCore.StaticFiles via NuGet Right click on Dependencies and select Manage NuGet Packages: Select Browse and search for 'Microsoft.AspNetCore.StaticFiles': Select this item and click Install. Step 3: Add a scripts folder for TypeScript First update the body of Configure in Startup.cs file as shown: Startup.cs [code language="csharp"] using Microsoft.AspNetCore.Builder; using Microsoft.Extensions.DependencyInjection; namespace AspDotNetCore { public class Startup { // This method gets called by the runtime. Use this method to add services to the container. // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940 public void ConfigureServices...

Some instructions that distill how one may get started with using TypeScript in Visual Studio Code. Step 1: Set up your development environment Download and run the installer for Visual Studio Code from the following link: https://code.visualstudio.com/download Step 2: Install node.js Download and run the installer for node.js from the following link: https://nodejs.org/ Step 3: Install TypeScript Once node.js has been installed you can install TypeScript. Close VS Code if opened and open a command prompt and run the command: [code language="xml"] npm install -g typescript [/code] (Use the -g to ensure typescript is installed globally, not just for the folder you are in.) Step 4: Set up an example project Open VS Code. Create a new Terminal by selecting Terminal > New Terminal. Create a directory for your project using the mkdir command and navigate to that folder: Close the terminal and open the folder you just created by selecting File...