Update:Â A series of posts has been made covering this same topic with the RTM versions of both ASP.NET Core and Aurelia. The first post in the series can be found here.
Now that I have a web API for my contacts I wanted to go back and add a front end to view them. I decided this would also be a good time to try out one of the single-page application frameworks instead of using razor. The number of choices for a spa framework is almost over whelming. Angular, Ember, Meteor, etc. In the end I decided to try out Aurelia mostly based on the fact that Rob Eisenberg is behind it.
To get going I highly recommend going through Aurelia’s get started guide. In addition to being a great introduction to Aurelia I also had to pull at least one file out of the sample project to get up and running in my ASP.NET project.
A couple more resources I recommend reading before getting started are a couple of blog post by Scott Allen. The first covers getting jspm going in ASP.NET 5 and the second is a guide to get started with Aurelia in ASP.NET 5.
Now to get started. The first step is to install jspm which is yet another package manager. It can be installed using with the following npm command.
npm install -g jspm@beta
jspm utilizes GitHub in some cases to install packages so it is recommended that jspm be configured with a login or api token for GitHub to avoid any anonymous API request limits.
jspm registry config github
The remaining commands should be run from the project directory that contains the project.json file.
Next run jspm’s init command. This command will ask a series of questions. The default is fine for most of them. The exceptions being the server baseURL should be ./wwwroot and I chose to use Babel as my transpiler.
jspm init
Now to install all the Aurelia bits that will be need to get an application up and hit a web API.
jspm install aurelia-framework
jspm install aurelia-bootstrapper
jspm install aurelia-fetch-client
Next add an html file (any name is fine) to the wwwroot folder. This html file will be how the Aurelia application is accessed and the file does not have a lot in it. If you read either Aurelia’s getting started or Scott’s blog the following contents will look very similar.
<!doctype html>
<html>
<head>
<title>Hello from Aurelia</title>
</head>
<body aurelia-app>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import("aurelia-bootstrapper");
</script>
</body>
</html>
When the above page loads Aurelia kicks in and looks for app.js and app.html. My app.js is based on the users.js from the getting started guide.
import {inject} from 'aurelia-framework';
import {HttpClient} from 'jspm_packages/github/aurelia/[email protected]/aurelia-fetch-client.js';
import 'fetch';
@inject(HttpClient)
export class App{
heading = 'Contacts';
contacts = [];
constructor(http){
http.configure(config => {
config
.useStandardConfiguration()
.withBaseUrl('https://localhost:14830/api/');
});
this.http = http;
}
activate(){
return this.http.fetch('contacts')
.then(response => response.json())
.then(contacts => this.contacts = contacts);
}
}
This class acts as the view model for my contact list. In the constructor function an http client is set up with a base url that matches the base url for the project’s web API which is http://localhost:14830/api/ in this case. The activate function is called by Aurelia and is where the contacts API is called using http.fetch. The import to fetch is the file I had to copy out of the Aurelia get started application into the wwwroot folder. You may also notice that the other imports are referencing specific folders with specific versions. This is not something that should be done for anything other than a short demo. I need to do some learning on gulp and what exactly Aurelia requires to get that fixed.
The following is the app.html.
<template>
<section>
<h2>${heading}</h2>
<div repeat.for="contact of contacts">
<p>${contact.Name}</p>
<div repeat.for="emailaddress of contact.EmailAddressModels">
<p>${emailaddress.Address}</p>
</div>
</div>
</section>
</template>
The ${heading} is binding the value that will be displayed to the heading property defined in the app class. Next notice the repeat.for which will repeat the element it is defined on and its children foreach in the container to the right of the of statement. For example the above is going to print the name of each contact and all that contact’s email address contained in the contacts property of the app class. The resulting page is ugly, but the point is to prove Aurelia running and displaying the proper data.
At this point to remove some complexity I removed the authorize attribute off of the contacts controller and ran a test. As you may have guessed the test failed.
The failure was caused by the API returning a single object that then contain all the contacts instead of an array of contacts. The cause of this issue is the changes I made to work around serialization issue I was having with circular references  from my entity framework navigation properties.
The fix was to remove the following from the ConfigureServices function of the Startup class.
services.ConfigureMvcJson(options =>
{
options.SerializerSettings.PreserveReferencesHandling = PreserveReferencesHandling.All;
});
Then in all the contact related classes I added the JsonIgnore attribute to the property that pointed back to the contact model.
public class ContactEmailModel
{
public int ContactId { get; set; }
public int Id { get; set; }
[EmailAddress]
public string Address { get; set; }
[JsonIgnore]
public ContactModel Contact {get; set;}
}
With those two changes everything started working. At this point I am not sure if that is the proper way to handle my issue or not. I have a feeling it will be something I will end up revisiting as I continue to learn more.
