Add AureliaSpa template (#398)

Author: kmkatsma

templates/AureliaSpa/Aurelia.xproj

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="14.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup>
+    <VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">14.0</VisualStudioVersion>
+    <VSToolsPath Condition="'$(VSToolsPath)' == ''">$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)</VSToolsPath>
+    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
+  </PropertyGroup>
+  <Import Project="$(VSToolsPath)\DotNet\Microsoft.DotNet.Props" Condition="'$(VSToolsPath)' != ''" />
+  <PropertyGroup Label="Globals">
+    <ProjectGuid>33d8dad9-74f9-471d-8bad-55f828faa736</ProjectGuid>
+    <RootNamespace>AureliaSpa</RootNamespace>
+    <BaseIntermediateOutputPath Condition="'$(BaseIntermediateOutputPath)'=='' ">.\obj</BaseIntermediateOutputPath>
+    <OutputPath Condition="'$(OutputPath)'=='' ">.\bin\</OutputPath>
+    <TargetFrameworkVersion>v4.5.2</TargetFrameworkVersion>
+  </PropertyGroup>
+  <PropertyGroup>
+    <SchemaVersion>2.0</SchemaVersion>
+  </PropertyGroup>
+  <Import Project="$(VSToolsPath)\DotNet.Web\Microsoft.DotNet.Web.targets" Condition="'$(VSToolsPath)' != ''" />
+</Project>

templates/AureliaSpa/ClientApp/app/components/app/app.css

@@ -0,0 +1,6 @@
+@media (max-width: 767px) {
+    /* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
+    .body-content {
+        padding-top: 50px;
+    }
+}

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

@@ -0,0 +1,14 @@
+<template>
+    <require from="../navmenu/navmenu.html"></require>
+    <require from="./app.css"></require>
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-sm-3">
+                <navmenu router.bind="router"></navmenu>
+            </div>
+            <div class="col-sm-9 body-content">
+                <router-view></router-view>
+            </div>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,34 @@
+import { Aurelia } from 'aurelia-framework';
+import { Router, RouterConfiguration } from 'aurelia-router';
+
+export class App {
+    router: Router;
+
+    configureRouter(config: RouterConfiguration, router: Router) {
+        config.title = 'Aurelia';
+        config.map([{
+            route: [ '', 'home' ],
+            name: 'home',
+            settings: { icon: 'home' },
+            moduleId: '../home/home',
+            nav: true,
+            title: 'Home'
+        }, {
+            route: 'counter',
+            name: 'counter',
+            settings: { icon: 'education' },
+            moduleId: '../counter/counter',
+            nav: true,
+            title: 'Counter'
+        }, {
+            route: 'fetch-data',
+            name: 'fetchdata',
+            settings: { icon: 'th-list' },
+            moduleId: '../fetchdata/fetchdata',
+            nav: true,
+            title: 'Fetch data'
+        }]);
+
+        this.router = router;
+    }
+}

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

@@ -0,0 +1,9 @@
+<template>
+    <h2>Counter</h2>
+
+    <p>This is a simple example of an Aurelia component.</p>
+
+    <p>Current count: <strong>${currentCount}</strong></p>
+
+    <button click.delegate="incrementCounter()">Increment</button>
+</template>

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

@@ -0,0 +1,7 @@
+export class Counter {
+    public currentCount = 0;
+
+    public incrementCounter() {
+        this.currentCount++;
+    }
+}

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;
+}

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

@@ -0,0 +1,16 @@
+<template>
+    <h1>Hello, world!</h1>
+    <p>Welcome to your new single-page application, built with:</p>
+    <ul>
+        <li><a href="https://get.asp.net/">ASP.NET Core</a> and <a href="https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx">C#</a> for cross-platform server-side code</li>
+        <li><a href="https://aurelia.io/">Aurelia</a> and <a href="http://www.typescriptlang.org/">TypeScript</a> for client-side code</li>
+        <li><a href="https://webpack.github.io/">Webpack</a> for building and bundling client-side resources</li>
+        <li><a href="http://getbootstrap.com/">Bootstrap</a> for layout and styling</li>
+    </ul>
+    <p>To help you get started, we've also set up:</p>
+    <ul>
+        <li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
+        <li><strong>Webpack dev middleware</strong>. In development mode, there's no need to run the <code>webpack</code> build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.</li>
+        <li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and the <code>webpack</code> build tool produces minified static CSS and JavaScript files.</li>
+    </ul>
+</template>

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

@@ -0,0 +1,2 @@
+export class Home {
+}