Getting started with Aurelia routing in Visual Studio Code

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>About page</h1> </template> [/code] about.js [code lang="js"] export class About {} [/code] 3. Configure the router in app.ts / app.html In the router set up we care about config.map which is used to add the routes. app.html [code lang="html"] <template> <nav> <ul> <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}"> <a href.bind="row.href">${row.title}</a> </li> </ul> </nav> <router-view></router-view> </template> [/code] app.ts [code lang="js"] import { RouterConfiguration, Router } from "aurelia-router"; import { PLATFORM } from "aurelia-pal"; export class App { message = "Aurelia routing app"; router: Router; configureRouter(config: RouterConfiguration, router: Router) { config.title = "Aurelia"; this.router = router; config.map([ { route: ["", "home"], name: "home", moduleId: PLATFORM.moduleName("home/home"), nav: true, title: "Home" }, { route: "about", name: "about", moduleId: PLATFORM.moduleName("about/about"), nav: true, title: "About" } ]); } } [/code] One important gotcha is when we keep getting the error "Unable find module with ID". This has been covered at Stack Overflow: https://stackoverflow.com/questions/46088319/getting-the-error-unable-find-module-with-id-with-aurelia-router The fix is to basically pass the url into PLATFORM.moduleName(...). And on running the app we see that we are provided with navigable links to the two pages we created. Feel free to try this out and add more complex routes, stylings etc.

Comments

Post a Comment

Popular posts from this blog

Using the Supervisor Controller Pattern to access View controls in MVVM

Image
As discussed on a StackOverflow post , this is considered bad practice, so only use this when necessary. Step 1: Create a new WPF project Step 2: Add event handling code A number of classes are needed for doing command bindings in MVVM. Create the following classes and add to your Visual Studio project: RelayCommand.cs [code language="csharp"] using System; using System.Windows.Input; namespace SupervisorControllingPattern { public class RelayCommand<T> : ICommand { private readonly Predicate<T> _canExecute; private readonly Action<T> _execute; public RelayCommand(Action<T> execute) : this(execute, null) { _execute = execute; } public RelayCommand(Action<T> execute, Predicate<T> canExecute) { if (execute == null) throw new ArgumentNullException(nameof(execute)); _execute = execute; _canExecute = canExecute; ...
Read more

Getting started with client-server applications in C++

Image
A demonstration of simple Internet client-server applications in C++ (Linux-based). The client application tries to connect to the remote server application using the IP address of the remote server ('localhost' or 127.0.0.1) and the server port number which defaulted to 1234. The server application listens to port number 1234 for a connection request. When the server application receives the connection request it sends the text message "Hello!\r\n" to the client.
Read more

How to send an e-mail via Google SMTP using C#

Image
First things first, some useful StackOverflow links: https://stackoverflow.com/questions/9201239/send-e-mail-via-smtp-using-c-sharp https://stackoverflow.com/questions/17462628/the-server-response-was-5-7-0-must-issue-a-starttls-command-first-i16sm1806350 To demonstrate how this is done I first create a new Visual Studio project: Some example code for sending an email via a Google email account (smtp.goolgle.com) - obviously replace this with email / credentials of your own... I put the code within a try-catch block in order to capture any errors that may occur while attempting this. [code language="csharp"] using System; using System.Net; using System.Net.Mail; namespace EmailSmtp { class Program { static void Main(string[] args) { try { // Credentials var credentials = new NetworkCredential("someEmail@gmail.com", "somePassword"); // Mail message var ...
Read more