Add server-side prerendering for Angular 2 template

This commit is contained in:
SteveSandersonMS
2016-02-29 19:29:04 +00:00
parent 6d2e51bf63
commit 47ba251923
13 changed files with 50 additions and 134 deletions

View File

@@ -1,5 +1,5 @@
import * as ng from 'angular2/core';
import fetch from 'isomorphic-fetch';
import { Http } from 'angular2/http';
@ng.Component({
selector: 'fetch-data'
@@ -10,12 +10,10 @@ import fetch from 'isomorphic-fetch';
export class FetchData {
public forecasts: WeatherForecast[];
constructor() {
fetch('/api/SampleData/WeatherForecasts')
.then(response => response.json())
.then((data: WeatherForecast[]) => {
this.forecasts = data;
});
constructor(http: Http) {
http.get('/api/SampleData/WeatherForecasts').subscribe(result => {
this.forecasts = result.json();
});
}
}

View File

@@ -9,6 +9,7 @@
<p>To help you get started, we've also set up:</p>
<ul>
<li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
<li><strong>Server-side prerendering</strong>. For faster initial loading and improved SEO, your Angular 2 app is prerendered on the server. The resulting HTML is then transferred to the browser where a client-side copy of the app takes over.</li>
<li><strong>Webpack dev middleware</strong>. In development mode, there's no need to run the <code>webpack</code> build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.</li>
<li><strong>Hot module replacement</strong>. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, your Angular 2 app will be rebuilt and a new instance injected is into the page.</li>
<li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and the <code>webpack</code> build tool produces minified static CSS and JavaScript files.</li>