Add data fetching example for Angular 2 template

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