@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;

}

}

<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>

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;

}

<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>

export class Counter {

public currentCount = 0;

public incrementCounter() {

this.currentCount++;

}

<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>

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;

<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>

export class Home {