Add AureliaSpa template

templates/AureliaSpa/Aurelia.xproj

@@ -0,0 +1,18 @@
+<?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>Angular2</RootNamespace>
+ <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,19 @@
+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:{class:'home'}, moduleId: '../home/home', nav: true, title: 'Home' },
+ { route: 'counter', name: 'counter', settings:{class:'education'}, moduleId: '../counter/counter', nav: true, title: 'Counter' },
+ { route: 'fetch-data', name: 'fetchdata', settings:{class:'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,9 @@
+
+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 class='table' if.bind="forecasts">
+ <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,27 @@
+/// <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[];
+ http: HttpClient;
+
+
+ constructor(http: HttpClient) {
+ this.http = http;
+ this.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,18 @@
+<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://angular.io/'>Angular 2</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>Server-side prerendering</strong>. For faster initial loading and improved SEO, your Angular 2 app is prerendered on the server. The resulting HTML is then transferred to the browser where a client-side copy of the app takes over.</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>Hot module replacement</strong>. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, your Angular 2 app will be rebuilt and a new instance injected is into the page.</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 {
+}

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

@@ -0,0 +1,59 @@
+li .glyphicon {
+ margin-right: 10px;
+}
+
+/* Highlighting rules for nav menu items */
+li.au-target.link-active a,
+li.au-target.link-active a:hover,
+li.au-target.link-active a:focus {
+ background-color: #4189C7;
+ color: white;
+}
+
+/* Keep the nav menu independent of scrolling and on top of other items */
+.main-nav {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 1;
+}
+
+@media (min-width: 768px) {
+ /* On small screens, convert the nav menu to a vertical sidebar */
+ .main-nav {
+ height: 100%;
+ width: calc(25% - 20px);
+ }
+ .navbar {
+ border-radius: 0px;
+ border-width: 0px;
+ height: 100%;
+ }
+ .navbar-header {
+ float: none;
+ }
+ .navbar-collapse {
+ border-top: 1px solid #444;
+ padding: 0px;
+ }
+ .navbar ul {
+ float: none;
+ }
+ .navbar li {
+ float: none;
+ font-size: 15px;
+ margin: 6px;
+ }
+ .navbar li a {
+ padding: 10px 16px;
+ border-radius: 4px;
+ }
+ .navbar a {
+ /* If a menu item's text is too long, truncate it */
+ width: 100%;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+}

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

@@ -0,0 +1,26 @@
+<template bindable="router">
+ <require from="./navmenu.css"></require>
+ <div class='main-nav'>
+ <div class='navbar navbar-inverse'>
+ <div class='navbar-header'>
+ <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
+ <span class='sr-only'>Toggle navigation</span>
+ <span class='icon-bar'></span>
+ <span class='icon-bar'></span>
+ <span class='icon-bar'></span>
+ </button>
+ <a class='navbar-brand' href="#/home">Aurelia</a>
+ </div>
+ <div class='clearfix'></div>
+ <div class='navbar-collapse collapse'>
+ <ul class='nav navbar-nav'>
+ <li class="${row.isActive ? 'link-active' : ''}" repeat.for = "row of router.navigation" >
+ <a href.bind = "row.href">
+ <span class='glyphicon glyphicon-${row.settings.class}'></span> ${row.title}
+ </a>
+ </li> 
+ </ul>
+ </div>
+ </div>
+ </div>
+</template>

templates/AureliaSpa/ClientApp/boot.ts

@@ -0,0 +1,15 @@
+import {Aurelia} from 'aurelia-framework';
+import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap';
+
+// comment out if you don't want a Promise polyfill (remove also from webpack.config.js)
+import * as Bluebird from 'bluebird';
+Bluebird.config({ warnings: false });
+
+export function configure(aurelia: Aurelia) {
+ aurelia.use
+ .standardConfiguration()
+ .developmentLogging();
+
+ aurelia.start().then(() => aurelia.setRoot('app/components/app/app'));
+}

templates/AureliaSpa/Controllers/HomeController.cs

@@ -0,0 +1,21 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+
+namespace WebApplicationBasic.Controllers
+{
+ public class HomeController : Controller
+ {
+ public IActionResult Index()
+ {
+ return View();
+ }
+
+ public IActionResult Error()
+ {
+ return View();
+ }
+ }
+}

templates/AureliaSpa/Controllers/SampleDataController.cs

@@ -0,0 +1,44 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+
+namespace WebApplicationBasic.Controllers
+{
+ [Route("api/[controller]")]
+ public class SampleDataController : Controller
+ {
+ private static string[] Summaries = new[]
+ {
+ "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
+ };
+
+ [HttpGet("[action]")]
+ public IEnumerable<WeatherForecast> WeatherForecasts()
+ {
+ var rng = new Random();
+ return Enumerable.Range(1, 5).Select(index => new WeatherForecast
+ {
+ DateFormatted = DateTime.Now.AddDays(index).ToString("d"),
+ TemperatureC = rng.Next(-20, 55),
+ Summary = Summaries[rng.Next(Summaries.Length)]
+ });
+ }
+
+ public class WeatherForecast
+ {
+ public string DateFormatted { get; set; }
+ public int TemperatureC { get; set; }
+ public string Summary { get; set; }
+
+ public int TemperatureF
+ {
+ get
+ {
+ return 32 + (int)(this.TemperatureC / 0.5556);
+ }
+ }
+ }
+ }
+}

templates/AureliaSpa/Dockerfile

@@ -0,0 +1,16 @@
+FROM microsoft/dotnet:latest
+
+RUN apt-get update
+RUN apt-get install -y build-essential nodejs nodejs-legacy
+
+WORKDIR /app
+
+COPY project.json .
+RUN ["dotnet", "restore"]
+
+COPY . /app
+RUN ["dotnet", "build"]
+
+EXPOSE 5000/tcp
+
+ENTRYPOINT ["dotnet", "run", "--server.urls", "http://0.0.0.0:5000"]

templates/AureliaSpa/Program.cs

@@ -0,0 +1,31 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Hosting;
+using Microsoft.Extensions.Configuration;
+
+namespace WebApplicationBasic
+{
+ public class Program
+ {
+ public static void Main(string[] args)
+ {
+ var config = new ConfigurationBuilder()
+ .AddCommandLine(args)
+ .AddEnvironmentVariables(prefix: "ASPNETCORE_")
+ .Build();
+
+ var host = new WebHostBuilder()
+ .UseConfiguration(config)
+ .UseKestrel()
+ .UseContentRoot(Directory.GetCurrentDirectory())
+ .UseIISIntegration()
+ .UseStartup<Startup>()
+ .Build();
+
+ host.Run();
+ }
+ }
+}