Posts

Showing posts from October, 2019

Getting started with Aurelia Dialog

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

Getting started with Aurelia routing in Visual Studio Code

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