Add Angular2Spa template

templates/Angular2Spa/ClientApp/boot.ts

@@ -0,0 +1,9 @@
+import 'bootstrap/dist/css/bootstrap.css';
+
+import { bootstrap } from 'angular2/platform/browser';
+import { FormBuilder } from 'angular2/common';
+import * as router from 'angular2/router';
+import { Http, HTTP_PROVIDERS } from 'angular2/http';
+import { App } from './components/app/app';
+
+bootstrap(App, [router.ROUTER_BINDINGS, HTTP_PROVIDERS, FormBuilder]);

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

templates/Angular2Spa/ClientApp/data/CarouselItems.ts

@@ -0,0 +1,28 @@
+export interface CarouselItem {
+    imageUrl: string;
+    imageAlt: string;
+    text: string;
+    learnMoreUrl: string;
+}
+
+export const carouselItems: CarouselItem[] = [{
+    imageUrl: "/images/ASP-NET-Banners-01.png",
+    imageAlt: "ASP.NET",
+    text: "Learn how to build ASP.NET apps that can run anywhere.",
+    learnMoreUrl: "http://go.microsoft.com/fwlink/?LinkID=525028&clcid=0x409"
+}, {
+    imageUrl: "/images/Banner-02-VS.png",
+    imageAlt: "Visual Studio",
+    text: "There are powerful new features in Visual Studio for building modern web apps.",
+    learnMoreUrl: "http://go.microsoft.com/fwlink/?LinkID=525030&clcid=0x409"
+}, {
+    imageUrl: "/images/ASP-NET-Banners-02.png",
+    imageAlt: "Package Management",
+    text: "Bring in libraries from NuGet, Bower, and npm, and automate tasks using Grunt or Gulp.",
+    learnMoreUrl: "http://go.microsoft.com/fwlink/?LinkID=525029&clcid=0x409"
+}, {
+    imageUrl: "/images/Banner-01-Azure.png",
+    imageAlt: "Microsoft Azure",
+    text: "Learn how Microsoft's Azure cloud platform allows you to build, deploy, and scale web apps.",
+    learnMoreUrl: "http://go.microsoft.com/fwlink/?LinkID=525027&clcid=0x409"
+}];

templates/Angular2Spa/ClientApp/data/HomepageLinkLists.ts

@@ -0,0 +1,43 @@
+export interface LinkList {
+    title: string;
+    entries: string[];
+}
+
+export const linkLists: LinkList[] = [{
+    title: "Application uses",
+    entries: [
+        "Sample pages using ASP.NET MVC 6",
+        "<a href=\"http://go.microsoft.com/fwlink/?LinkId=518007\">Gulp</a> and <a href=\"http://go.microsoft.com/fwlink/?LinkId=518004\">Bower</a> for managing client-side libraries",
+        "Theming using <a href=\"http://go.microsoft.com/fwlink/?LinkID=398939\">Bootstrap</a>"
+    ]
+}, {
+    title: "How to",
+    entries: [
+        "<a href=\"http://go.microsoft.com/fwlink/?LinkID=398600\">Add a Controller and View</a>",
+        "<a href=\"http://go.microsoft.com/fwlink/?LinkID=699314\">Add an appsetting in config and access it in app.</a>",
+        "<a href=\"http://go.microsoft.com/fwlink/?LinkId=699315\">Manage User Secrets using Secret Manager.</a>",
+        "<a href=\"http://go.microsoft.com/fwlink/?LinkId=699316\">Use logging to log a message.</a>",
+        "<a href=\"http://go.microsoft.com/fwlink/?LinkId=699317\">Add packages using NuGet.</a>",
+        "<a href=\"http://go.microsoft.com/fwlink/?LinkId=699318\">Add client packages using Bower.</a>",
+        "<a href=\"http://go.microsoft.com/fwlink/?LinkId=699319\">Target development, staging or production environment.</a>"
+    ]
+}, {
+    title: "Overview",
+    entries: [
+        "<a href=\"http://go.microsoft.com/fwlink/?LinkId=518008\">Conceptual overview of what is ASP.NET 5</a>",
+        "<a href=\"http://go.microsoft.com/fwlink/?LinkId=699320\">Fundamentals of ASP.NET 5 such as Startup and middleware.</a>",
+        "<a href=\"http://go.microsoft.com/fwlink/?LinkId=398602\">Working with Data</a>",
+        "<a href=\"http://go.microsoft.com/fwlink/?LinkId=398603\">Security</a>",
+        "<a href=\"http://go.microsoft.com/fwlink/?LinkID=699321\">Client side development</a>",
+        "<a href=\"http://go.microsoft.com/fwlink/?LinkID=699322\">Develop on different platforms</a>",
+        "<a href=\"http://go.microsoft.com/fwlink/?LinkID=699323\">Read more on the documentation site</a>"
+    ]
+}, {
+    title: "Run & Deploy",
+    entries: [
+        "<a href=\"http://go.microsoft.com/fwlink/?LinkID=517851\">Run your app</a>",
+        "<a href=\"http://go.microsoft.com/fwlink/?LinkID=517852\">Run your app on .NET Core</a>",
+        "<a href=\"http://go.microsoft.com/fwlink/?LinkID=517853\">Run commands in your project.json</a>",
+        "<a href=\"http://go.microsoft.com/fwlink/?LinkID=398609\">Publish to Microsoft Azure Web Apps</a>"
+    ]
+}];