github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-22 09:37:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Example of using asp-prerender-data to get server-supplied data to both server and client JS

Browse Source
This commit is contained in:
Steve Sanderson
2017-05-22 10:25:08 +01:00
parent ad645cbfe9
commit 678e230021
5 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
templates/AngularSpa/ClientApp/app/app.module.client.ts
View File

@@ -14,7 +14,8 @@ import { sharedConfig } from './app.module.shared';
...sharedConfig.imports ...sharedConfig.imports
], ],
providers: [ providers: [
{ provide: 'ORIGIN_URL', useValue: location.origin } { provide: 'ORIGIN_URL', useValue: location.origin },
{ provide: 'PRERENDERING_DATA', useValue: (window as any).PRERENDERING_DATA }
] ]
}) })
export class AppModule { export class AppModule {

2
templates/AngularSpa/ClientApp/app/components/fetchdata/fetchdata.component.html
View File

@@ -1,5 +1,7 @@
<h1>Weather forecast</h1> <h1>Weather forecast</h1>
<p>Prerendering data: {{ prerenderingDataString }}</p>
<p>This component demonstrates fetching data from the server.</p> <p>This component demonstrates fetching data from the server.</p>
<p *ngIf="!forecasts"><em>Loading...</em></p> <p *ngIf="!forecasts"><em>Loading...</em></p>

5
templates/AngularSpa/ClientApp/app/components/fetchdata/fetchdata.component.ts
View File

@@ -7,8 +7,11 @@ import { Http } from '@angular/http';
}) })
export class FetchDataComponent { export class FetchDataComponent {
public forecasts: WeatherForecast[]; public forecasts: WeatherForecast[];
public prerenderingDataString: string;
constructor(http: Http, @Inject('ORIGIN_URL') originUrl: string, @Inject('PRERENDERING_DATA') prerenderingData: any) {
this.prerenderingDataString = JSON.stringify(prerenderingData);
constructor(http: Http, @Inject('ORIGIN_URL') originUrl: string) {
http.get(originUrl + '/api/SampleData/WeatherForecasts').subscribe(result => { http.get(originUrl + '/api/SampleData/WeatherForecasts').subscribe(result => {
this.forecasts = result.json() as WeatherForecast[]; this.forecasts = result.json() as WeatherForecast[];
}); });

6
templates/AngularSpa/ClientApp/boot-server.ts
View File

@@ -11,7 +11,8 @@ enableProdMode();
export default createServerRenderer(params => { export default createServerRenderer(params => {
const providers = [ const providers = [
{ provide: INITIAL_CONFIG, useValue: { document: '<app></app>', url: params.url } }, { provide: INITIAL_CONFIG, useValue: { document: '<app></app>', url: params.url } },
{ provide: 'ORIGIN_URL', useValue: params.origin } { provide: 'ORIGIN_URL', useValue: params.origin },
{ provide: 'PRERENDERING_DATA', useValue: params.data }
]; ];
return platformDynamicServer(providers).bootstrapModule(AppModule).then(moduleRef => { return platformDynamicServer(providers).bootstrapModule(AppModule).then(moduleRef => {
@@ -26,7 +27,8 @@ export default createServerRenderer(params => {
// completing the request in case there's an error to report // completing the request in case there's an error to report
setImmediate(() => { setImmediate(() => {
resolve({ resolve({
html: state.renderToString() html: state.renderToString(),
globals: { PRERENDERING_DATA: params.data }
}); });
moduleRef.destroy(); moduleRef.destroy();
}); });

6
templates/AngularSpa/Views/Home/Index.cshtml
View File

@@ -2,7 +2,11 @@
ViewData["Title"] = "Home Page"; ViewData["Title"] = "Home Page";
} }
<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app> <app asp-prerender-module="ClientApp/dist/main-server"
asp-prerender-data="new {
IsGoldUser = true,
Cookies = ViewContext.HttpContext.Request.Cookies
}">Loading...</app>
<script src="~/dist/vendor.js" asp-append-version="true"></script> <script src="~/dist/vendor.js" asp-append-version="true"></script>
@section scripts { @section scripts {