Add Angular2Spa template

templates/Angular2Spa/ClientApp/components/about/about.html

@@ -0,0 +1,3 @@
+<h2>About</h2>
+
+<p>Use this area to provide additional information.</p>

templates/Angular2Spa/ClientApp/components/about/about.ts

@@ -0,0 +1,10 @@
+import * as ng from 'angular2/core';
+
+@ng.Component({
+  selector: 'about'
+})
+@ng.View({
+  template: require('./about.html')
+})
+export class About {
+}

templates/Angular2Spa/ClientApp/components/app/app.css

@@ -0,0 +1,21 @@
+/* Wrapping element */
+/* Set some basic padding to keep content from hitting the edges */
+.body-content {
+    padding-top: 50px;
+    padding-bottom: 20px;
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
+/* Set widths on the form inputs since otherwise they're 100% wide */
+input,
+select,
+textarea {
+    max-width: 280px;
+}
+
+/* Carousel */
+.carousel-caption p {
+    font-size: 20px;
+    line-height: 1.4;
+}

templates/Angular2Spa/ClientApp/components/app/app.html

@@ -0,0 +1,28 @@
+<div class="navbar navbar-inverse navbar-fixed-top">
+    <div class="container">
+        <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" [routerLink]="['/Home']">WebApplicationBasic</a>
+        </div>
+        <div class="navbar-collapse collapse">
+            <ul class="nav navbar-nav">
+                <li><a [routerLink]="['/Home']">Home</a></li>
+                <li><a [routerLink]="['/About']">About</a></li>
+                <li><a [routerLink]="['/Counter']">Counter</a></li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<div class="container body-content">
+    <router-outlet></router-outlet>
+    <hr />
+    <footer>
+        <p>&copy; 2016 - WebApplicationBasic</p>
+    </footer>
+</div>

templates/Angular2Spa/ClientApp/components/app/app.ts

@@ -0,0 +1,22 @@
+import * as ng from 'angular2/core';
+import * as router from 'angular2/router';
+import { Http, HTTP_BINDINGS } from 'angular2/http';
+import { Home } from '../home/home.ts';
+import { About } from '../about/about';
+import { Counter } from '../counter/counter';
+
+@ng.Component({
+    selector: 'app'
+})
+@router.RouteConfig([
+    { path: '/', component: Home, name: 'Home' },
+    { path: '/about', component: About, name: 'About' },
+    { path: '/counter', component: Counter, name: 'Counter' }
+])
+@ng.View({
+    template: require('./app.html'),
+    styles: [require('./app.css')],
+    directives: [router.ROUTER_DIRECTIVES]
+})
+export class App {
+}

templates/Angular2Spa/ClientApp/components/counter/counter.html

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

templates/Angular2Spa/ClientApp/components/counter/counter.ts

@@ -0,0 +1,15 @@
+import * as ng from 'angular2/core';
+
+@ng.Component({
+  selector: 'counter'
+})
+@ng.View({
+  template: require('./counter.html')
+})
+export class Counter {
+    public currentCount = 0;
+    
+    public incrementCounter() {
+        this.currentCount++;
+    }
+}

templates/Angular2Spa/ClientApp/components/home/home.html

@@ -0,0 +1,36 @@
+<!-- Carousel -->
+<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="6000">
+    <ol class="carousel-indicators">
+        <li *ngFor="#item of carouselItems; #i = index" data-target="#myCarousel" [attr.data-slide-to]="i" class="{{ i == 0 ? 'active' : '' }}"></li>
+    </ol>
+    <div class="carousel-inner" role="listbox">
+        <div *ngFor="#item of carouselItems; #i = index" class="{{ 'item ' + (i == 0 ? 'active' : '') }}">
+            <img src="{{ item.imageUrl }}" alt="{{ item.imageAlt }}" class="img-responsive" />
+            
+            <div class="carousel-caption">
+                <p>
+                    {{ item.text }}
+                    <a class="btn btn-default" href="{{ item.learnMoreUrl }}">Learn More</a>
+                </p>
+            </div>
+        </div>
+    </div>
+    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
+        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"> </span>
+        <span class="sr-only">Previous</span>
+    </a>
+    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
+        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"> </span>
+        <span class="sr-only">Next</span>
+    </a>
+</div>
+
+<!-- Lists of links -->
+<div class="row">
+    <div *ngFor="#list of linkLists" class="col-md-3">
+        <h2>{{ list.title }}</h2>
+        <ul>
+            <li *ngFor="#entry of list.entries" [innerHTML]="entry"></li>
+        </ul>
+    </div>
+</div>

templates/Angular2Spa/ClientApp/components/home/home.ts

@@ -0,0 +1,14 @@
+import * as ng from 'angular2/core';
+import { carouselItems } from '../../data/CarouselItems';
+import { linkLists } from '../../data/HomepageLinkLists';
+
+@ng.Component({
+  selector: 'home'
+})
+@ng.View({
+  template: require('./home.html')
+})
+export class Home {
+    public carouselItems = carouselItems;
+    public linkLists = linkLists;
+}