mirror of
https://github.com/aspnet/JavaScriptServices.git
synced 2025-12-23 18:19:40 +00:00
Add AureliaSpa template (#398)
This commit is contained in:
kmkatsma
committed by
SteveSandersonMS
SteveSandersonMS
parent
867e60d7fd
commit
e60ea04f86
@@ -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;
|
||||
}
|
||||
}
|
||||
14
templates/AureliaSpa/ClientApp/app/components/app/app.html
Normal file
14
templates/AureliaSpa/ClientApp/app/components/app/app.html
Normal file
@@ -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>
|
||||
34
templates/AureliaSpa/ClientApp/app/components/app/app.ts
Normal file
34
templates/AureliaSpa/ClientApp/app/components/app/app.ts
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -0,0 +1,7 @@
|
||||
export class Counter {
|
||||
public currentCount = 0;
|
||||
|
||||
public incrementCounter() {
|
||||
this.currentCount++;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
16
templates/AureliaSpa/ClientApp/app/components/home/home.html
Normal file
16
templates/AureliaSpa/ClientApp/app/components/home/home.html
Normal file
@@ -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>
|
||||
@@ -0,0 +1,2 @@
|
||||
export class Home {
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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 repeat.for = "row of router.navigation" class="${ row.isActive ? 'link-active' : '' }" >
|
||||
<a href.bind = "row.href">
|
||||
<span class="glyphicon glyphicon-${ row.settings.icon }"></span> ${ row.title }
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
11
templates/AureliaSpa/ClientApp/boot.ts
Normal file
11
templates/AureliaSpa/ClientApp/boot.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import { Aurelia } from 'aurelia-framework';
|
||||
import 'bootstrap/dist/css/bootstrap.css';
|
||||
import 'bootstrap';
|
||||
|
||||
export function configure(aurelia: Aurelia) {
|
||||
aurelia.use.standardConfiguration();
|
||||
if (window.location.host.includes('localhost')) {
|
||||
aurelia.use.developmentLogging();
|
||||
}
|
||||
aurelia.start().then(() => aurelia.setRoot('app/components/app/app'));
|
||||
}
|
||||
Reference in New Issue
Block a user