Add data fetching example for Angular 2 template

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

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

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

@@ -1,10 +0,0 @@
-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.ts

@@ -1,9 +1,9 @@
 import * as ng from 'angular2/core';
 import * as router from 'angular2/router';
 import { Http, HTTP_BINDINGS } from 'angular2/http';
-import { NavMenu } from '../nav-menu/nav-menu.ts';
-import { Home } from '../home/home.ts';
-import { About } from '../about/about';
+import { NavMenu } from '../nav-menu/nav-menu';
+import { Home } from '../home/home';
+import { FetchData } from '../fetch-data/fetch-data';
 import { Counter } from '../counter/counter';
 
 @ng.Component({
@@ -11,8 +11,8 @@ import { Counter } from '../counter/counter';
 })
 @router.RouteConfig([
     { path: '/', component: Home, name: 'Home' },
-    { path: '/about', component: About, name: 'About' },
-    { path: '/counter', component: Counter, name: 'Counter' }
+    { path: '/counter', component: Counter, name: 'Counter' },
+    { path: '/fetch-data', component: FetchData, name: 'FetchData' }
 ])
 @ng.View({
     template: require('./app.html'),

templates/Angular2Spa/ClientApp/components/fetch-data/fetch-data.html

@@ -0,0 +1,24 @@
+<h1>Weather forecast</h1>
+
+<p>This component demonstrates fetching data from the server.</p>
+
+<p *ngIf="!forecasts"><em>Loading...</em></p>
+
+<table class='table' *ngIf="forecasts">
+    <thead>
+        <tr>
+            <th>Date</th>
+            <th>Temp. (C)</th>
+            <th>Temp. (F)</th>
+            <th>Summary</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr *ngFor="#forecast of forecasts">
+            <td>{{ forecast.dateFormatted }}</td>
+            <td>{{ forecast.temperatureC }}</td>
+            <td>{{ forecast.temperatureF }}</td>
+            <td>{{ forecast.summary }}</td>
+        </tr>
+    </tbody>
+</table>

templates/Angular2Spa/ClientApp/components/fetch-data/fetch-data.ts

@@ -0,0 +1,27 @@
+import * as ng from 'angular2/core';
+import fetch from 'isomorphic-fetch';
+
+@ng.Component({
+  selector: 'fetch-data'
+})
+@ng.View({
+  template: require('./fetch-data.html')
+})
+export class FetchData {
+    public forecasts: WeatherForecast[];
+    
+    constructor() {
+        fetch('/api/SampleData/WeatherForecasts')
+            .then(response => response.json())
+            .then((data: WeatherForecast[]) => {
+                this.forecasts = data;
+            });
+    }
+}
+
+interface WeatherForecast {
+    dateFormatted: string;
+    temperatureC: number;
+    temperatureF: number;
+    summary: string;
+}

templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.html

@@ -23,7 +23,7 @@
                     </a>
                 </li>
                 <li>
-                    <a [routerLink]="['/About']">
+                    <a [routerLink]="['/FetchData']">
                         <span class='glyphicon glyphicon-th-list'></span> Fetch data
                     </a>
                 </li>