Add data fetching example for Angular 2 template

SteveSandersonMS · SteveSandersonMS · commit 6d2e51bf6349 · 2016-02-29T11:27:19.000Z
diff --git a/templates/Angular2Spa/ClientApp/components/about/about.html b/templates/Angular2Spa/ClientApp/components/about/about.html
diff --git a/templates/Angular2Spa/ClientApp/components/about/about.ts b/templates/Angular2Spa/ClientApp/components/about/about.ts
diff --git a/templates/Angular2Spa/ClientApp/components/app/app.ts b/templates/Angular2Spa/ClientApp/components/app/app.ts
@@ -1,18 +1,18 @@
 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({
     selector: 'app'
 })
 @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'),
diff --git a/templates/Angular2Spa/ClientApp/components/fetch-data/fetch-data.html b/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>
diff --git a/templates/Angular2Spa/ClientApp/components/fetch-data/fetch-data.ts b/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;
+}
diff --git a/templates/Angular2Spa/ClientApp/components/nav-menu/nav-menu.html b/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>
diff --git a/templates/Angular2Spa/Controllers/SampleDataController.cs b/templates/Angular2Spa/Controllers/SampleDataController.cs
@@ -0,0 +1,44 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNet.Mvc;
+
+namespace WebApplicationBasic.Controllers
+{
+    [Route("api/[controller]")]
+    public class SampleDataController : Controller
+    {
+        private static string[] Summaries = new[]
+        {
+            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
+        };
+        
+        [HttpGet, Route("[action]")]
+        public IEnumerable<WeatherForecast> WeatherForecasts()
+        {
+            var rng = new Random();
+            return Enumerable.Range(1, 5).Select(index => new WeatherForecast
+            {
+                DateFormatted = DateTime.Now.AddDays(index).ToString("d"),
+                TemperatureC = rng.Next(-20, 55),
+                Summary = Summaries[rng.Next(Summaries.Length)]
+            });
+        }
+        
+        public class WeatherForecast
+        {
+            public string DateFormatted { get; set; }
+            public int TemperatureC { get; set; }
+            public string Summary { get; set; }
+            
+            public int TemperatureF
+            {
+                get
+                {
+                    return 32 + (int)(this.TemperatureC / 0.5556);
+                }
+            }
+        }
+    }
+}
diff --git a/templates/Angular2Spa/Startup.cs b/templates/Angular2Spa/Startup.cs
@@ -8,6 +8,7 @@
 using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Logging;
+using Newtonsoft.Json.Serialization;
 
 namespace WebApplicationBasic
 {
@@ -28,7 +29,10 @@ public Startup(IHostingEnvironment env)
         public void ConfigureServices(IServiceCollection services)
         {
             // Add framework services.
-            services.AddMvc();
+            services.AddMvc().AddJsonOptions(options =>
+            {
+                options.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
+            });
         }
 
         // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
diff --git a/templates/Angular2Spa/package.json b/templates/Angular2Spa/package.json
@@ -28,6 +28,7 @@
     "babel-core": "^6.5.2",
     "es6-shim": "^0.33.13",
     "es7-reflect-metadata": "^1.5.5",
+    "isomorphic-fetch": "^2.2.1",
     "reflect-metadata": "^0.1.2",
     "rxjs": "^5.0.0-beta.2",
     "zone.js": "^0.5.15"
diff --git a/templates/Angular2Spa/tsd.json b/templates/Angular2Spa/tsd.json
@@ -7,6 +7,9 @@
   "installed": {
     "requirejs/require.d.ts": {
       "commit": "dade4414712ce84e3c63393f1aae407e9e7e6af7"
+    },
+    "isomorphic-fetch/isomorphic-fetch.d.ts": {
+      "commit": "4d2d0653003a4d1df4d7c68054cce4f4ace58bdf"
     }
   }
 }
diff --git a/templates/Angular2Spa/typings/isomorphic-fetch/isomorphic-fetch.d.ts b/templates/Angular2Spa/typings/isomorphic-fetch/isomorphic-fetch.d.ts
@@ -0,0 +1,119 @@
+// Type definitions for isomorphic-fetch
+// Project: https://github.com/matthew-andrews/isomorphic-fetch
+// Definitions by: Todd Lucas <https://github.com/toddlucas>
+// Definitions: https://github.com/borisyankov/DefinitelyTyped
+
+declare enum RequestContext {
+    "audio", "beacon", "cspreport", "download", "embed", "eventsource", 
+    "favicon", "fetch", "font", "form", "frame", "hyperlink", "iframe", 
+    "image", "imageset", "import", "internal", "location", "manifest", 
+    "object", "ping", "plugin", "prefetch", "script", "serviceworker", 
+    "sharedworker", "subresource", "style", "track", "video", "worker",
+    "xmlhttprequest", "xslt"
+}
+declare enum RequestMode { "same-origin", "no-cors", "cors" }
+declare enum RequestCredentials { "omit", "same-origin", "include" }
+declare enum RequestCache { 
+    "default", "no-store", "reload", "no-cache", "force-cache", 
+    "only-if-cached"
+}
+declare enum ResponseType { "basic", "cors", "default", "error", "opaque" }
+
+declare type HeaderInit = Headers | Array<string>;
+declare type BodyInit = Blob | FormData | string;
+declare type RequestInfo = Request | string;
+
+interface RequestInit {
+    method?: string;
+    headers?: HeaderInit | { [index: string]: string };
+    body?: BodyInit;
+    mode?: string | RequestMode;
+    credentials?: string | RequestCredentials;
+    cache?: string | RequestCache;
+}
+
+interface IHeaders {
+    get(name: string): string;
+    getAll(name: string): Array<string>;
+    has(name: string): boolean;
+}
+
+declare class Headers implements IHeaders {
+    append(name: string, value: string): void;
+    delete(name: string):void;
+    get(name: string): string;
+    getAll(name: string): Array<string>;
+    has(name: string): boolean;
+    set(name: string, value: string): void;
+}
+
+interface IBody {
+    bodyUsed: boolean;
+    arrayBuffer(): Promise<ArrayBuffer>;
+    blob(): Promise<Blob>;
+    formData(): Promise<FormData>;
+    json(): Promise<any>;
+    json<T>(): Promise<T>;
+    text(): Promise<string>;
+}
+
+declare class Body implements IBody {
+    bodyUsed: boolean;
+    arrayBuffer(): Promise<ArrayBuffer>;
+    blob(): Promise<Blob>;
+    formData(): Promise<FormData>;
+    json(): Promise<any>;
+    json<T>(): Promise<T>;
+    text(): Promise<string>;
+}
+
+interface IRequest extends IBody {
+    method: string;
+    url: string;
+    headers: Headers;
+    context: string | RequestContext;
+    referrer: string;
+    mode: string | RequestMode;
+    credentials: string | RequestCredentials;
+    cache: string | RequestCache;
+}
+
+declare class Request extends Body implements IRequest {
+    constructor(input: string | Request, init?: RequestInit);
+    method: string;
+    url: string;
+    headers: Headers;
+    context: string | RequestContext;
+    referrer: string;
+    mode: string | RequestMode;
+    credentials: string | RequestCredentials;
+    cache: string | RequestCache;
+}
+
+interface IResponse extends IBody {
+    url: string;
+    status: number;
+    statusText: string;
+    ok: boolean;
+    headers: IHeaders;
+    type: string | ResponseType;
+    size: number;
+    timeout: number;
+    redirect(url: string, status: number): IResponse;
+    error(): IResponse;
+    clone(): IResponse;
+}
+
+interface IFetchStatic {
+    Promise: any;
+    Headers: IHeaders
+    Request: IRequest;
+    Response: IResponse;
+    (url: string | IRequest, init?: RequestInit): Promise<IResponse>;
+}
+
+declare module "isomorphic-fetch" {
+    export default IFetchStatic;
+}
+
+declare var fetch: IFetchStatic;
diff --git a/templates/Angular2Spa/typings/tsd.d.ts b/templates/Angular2Spa/typings/tsd.d.ts
@@ -1,2 +1,3 @@
 
 /// <reference path="requirejs/require.d.ts" />
+/// <reference path="isomorphic-fetch/isomorphic-fetch.d.ts" />

Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,7 @@`
`8`	`8`	`using Microsoft.Extensions.Configuration;`
`9`	`9`	`using Microsoft.Extensions.DependencyInjection;`
`10`	`10`	`using Microsoft.Extensions.Logging;`
	`11`	`+using Newtonsoft.Json.Serialization;`
`11`	`12`
`12`	`13`	`namespace WebApplicationBasic`
`13`	`14`	`{`
`@@ -28,7 +29,10 @@ public Startup(IHostingEnvironment env)`
`28`	`29`	`public void ConfigureServices(IServiceCollection services)`
`29`	`30`	`{`
`30`	`31`	`// Add framework services.`
`31`		`- services.AddMvc();`
	`32`	`+ services.AddMvc().AddJsonOptions(options =>`
	`33`	`+ {`
	`34`	`+ options.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();`
	`35`	`+ });`
`32`	`36`	`}`
`33`	`37`
`34`	`38`	`// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.`
Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,9 @@`
`7`	`7`	`"installed": {`
`8`	`8`	`"requirejs/require.d.ts": {`
`9`	`9`	`"commit": "dade4414712ce84e3c63393f1aae407e9e7e6af7"`
	`10`	`+ },`
	`11`	`+ "isomorphic-fetch/isomorphic-fetch.d.ts": {`
	`12`	`+ "commit": "4d2d0653003a4d1df4d7c68054cce4f4ace58bdf"`
`10`	`13`	`}`
`11`	`14`	`}`
`12`	`15`	`}`