Add AureliaSpa template (#398)

templates/AureliaSpa/ClientApp/app/components/fetchdata/fetchdata.html

@@ -0,0 +1,26 @@
+<template>
+    <h1>Weather forecast</h1>
+
+    <p>This component demonstrates fetching data from the server.</p>
+
+    <p if.bind="!forecasts"><em>Loading...</em></p>
+
+    <table if.bind="forecasts" class="table">
+        <thead>
+            <tr>
+                <th>Date</th>
+                <th>Temp. (C)</th>
+                <th>Temp. (F)</th>
+                <th>Summary</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr repeat.for="forecast of forecasts">
+                <td>${ forecast.dateFormatted }</td>
+                <td>${ forecast.temperatureC }</td>
+                <td>${ forecast.temperatureF }</td>
+                <td>${ forecast.summary }</td>
+            </tr>
+        </tbody>
+    </table>
+</template>

templates/AureliaSpa/ClientApp/app/components/fetchdata/fetchdata.ts

@@ -0,0 +1,24 @@
+/// <reference path="../../../../node_modules/aurelia-fetch-client/doc/whatwg-fetch.d.ts" />
+/// <reference path="../../../../node_modules/aurelia-fetch-client/doc/url.d.ts" />
+import { HttpClient } from 'aurelia-fetch-client';
+import { inject } from 'aurelia-framework';
+
+@inject(HttpClient)
+export class Fetchdata {
+    public forecasts: WeatherForecast[];
+
+    constructor(http: HttpClient) {
+        http.fetch('/api/SampleData/WeatherForecasts')
+            .then(result => result.json())
+            .then(data => {
+                this.forecasts = data;
+            });
+    }
+}
+
+interface WeatherForecast {
+    dateFormatted: string;
+    temperatureC: number;
+    temperatureF: number;
+    summary: string;
+}