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

Update Angular 2 Music Store sample to latest Angular2/angular-universal and make HTTP requests work during server-side prerendering

Browse Source
This commit is contained in:
SteveSandersonMS
2016-04-21 11:59:01 +01:00
parent a0c47252ca
commit 7b53e4aa55
11 changed files with 52 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
samples/angular/MusicStore/package.json
View File

@@ -2,10 +2,10 @@
"name": "MusicStore",
"version": "0.0.0",
"dependencies": {
"angular2": "2.0.0-beta.13",
"angular2-aspnet": "^0.0.5",
"angular2-universal": "0.90.1",
"aspnet-prerendering": "^1.0.0",
"angular2": "2.0.0-beta.15",
"angular2-aspnet": "^0.0.6",
"angular2-universal": "0.98.1",
"aspnet-prerendering": "^1.0.1",
"bootstrap": "^3.3.5",
"css": "^2.2.1",
"es6-module-loader": "0.15.0",

7
samples/angular/MusicStore/wwwroot/ng-app/boot-server.ts
View File

@@ -3,13 +3,14 @@ import { FormBuilder } from 'angular2/common';
import * as ngCore from 'angular2/core';
import * as ngRouter from 'angular2/router';
import * as ngUniversal from 'angular2-universal';
import { BASE_URL, ORIGIN_URL, REQUEST_URL } from 'angular2-universal/common';
import { App } from './components/app/app';
export default function (params: any): Promise<{ html: string, globals?: any }> {
const serverBindings = [
ngCore.provide(ngUniversal.BASE_URL, { useValue: params.absoluteUrl }),
ngCore.provide(ngUniversal.REQUEST_URL, { useValue: params.url }),
ngCore.provide(ngRouter.APP_BASE_HREF, { useValue: '/' }),
ngCore.provide(BASE_URL, { useValue: '/' }),
ngCore.provide(ORIGIN_URL, { useValue: params.origin }),
ngCore.provide(REQUEST_URL, { useValue: params.url }),
ngUniversal.NODE_HTTP_PROVIDERS,
ngUniversal.NODE_ROUTER_PROVIDERS,
FormBuilder

6
samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-details/album-details.ts
View File

@@ -13,7 +13,11 @@ export class AlbumDetails {
public albumData: models.Album;
constructor(http: Http, routeParam: router.RouteParams) {
http.get('/api/albums/' + routeParam.params['albumId']).subscribe(result => {
// Workaround for RC1 bug. This can be removed with ASP.NET Core 1.0 RC2.
let isServerSide = typeof window === 'undefined';
let options: any = isServerSide ? { headers: { Connection: 'keep-alive' } } : null;
http.get('/api/albums/' + routeParam.params['albumId'], options).subscribe(result => {
this.albumData = result.json();
});
}

10
samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/album-edit.ts
View File

@@ -24,10 +24,14 @@ export class AlbumEdit {
private _http: Http;
constructor(fb: FormBuilder, http: Http, routeParam: router.RouteParams) {
// Workaround for RC1 bug. This can be removed with ASP.NET Core 1.0 RC2.
let isServerSide = typeof window === 'undefined';
let options: any = isServerSide ? { headers: { Connection: 'keep-alive' } } : null;
this._http = http;
var albumId = parseInt(routeParam.params['albumId']);
http.get('/api/albums/' + albumId).subscribe(result => {
http.get('/api/albums/' + albumId, options).subscribe(result => {
var json = result.json();
this.originalAlbum = json;
(<Control>this.form.controls['Title']).updateValue(json.Title);
@@ -37,11 +41,11 @@ export class AlbumEdit {
(<Control>this.form.controls['AlbumArtUrl']).updateValue(json.AlbumArtUrl);
});
http.get('/api/artists/lookup').subscribe(result => {
http.get('/api/artists/lookup', options).subscribe(result => {
this.artists = result.json();
});
http.get('/api/genres/genre-lookup').subscribe(result => {
http.get('/api/genres/genre-lookup', options).subscribe(result => {
this.genres = result.json();
});

6
samples/angular/MusicStore/wwwroot/ng-app/components/admin/albums-list/albums-list.ts
View File

@@ -45,8 +45,12 @@ export class AlbumsList {
}
refreshData() {
// Workaround for RC1 bug. This can be removed with ASP.NET Core 1.0 RC2.
let isServerSide = typeof window === 'undefined';
let options: any = isServerSide ? { headers: { Connection: 'keep-alive' } } : null;
var sortBy = this._sortBy + (this._sortByDesc ? ' DESC' : '');
this._http.get(`/api/albums?page=${ this._pageIndex }&pageSize=50&sortBy=${ sortBy }`).subscribe(result => {
this._http.get(`/api/albums?page=${ this._pageIndex }&pageSize=50&sortBy=${ sortBy }`, options).subscribe(result => {
var json = result.json();
this.rows = json.Data;

6
samples/angular/MusicStore/wwwroot/ng-app/components/app/app.ts
View File

@@ -25,7 +25,11 @@ export class App {
public genres: models.Genre[];
constructor(http: Http) {
http.get('/api/genres/menu').subscribe(result => {
// Workaround for RC1 bug. This can be removed with ASP.NET Core 1.0 RC2.
let isServerSide = typeof window === 'undefined';
let options: any = isServerSide ? { headers: { Connection: 'keep-alive' } } : null;
http.get('/api/genres/menu', options).subscribe(result => {
this.genres = result.json();
});
}

6
samples/angular/MusicStore/wwwroot/ng-app/components/public/album-details/album-details.ts
View File

@@ -11,7 +11,11 @@ export class AlbumDetails {
public albumData: models.Album;
constructor(http: Http, routeParam: router.RouteParams) {
http.get('/api/albums/' + routeParam.params['albumId']).subscribe(result => {
// Workaround for RC1 bug. This can be removed with ASP.NET Core 1.0 RC2.
let isServerSide = typeof window === 'undefined';
let options: any = isServerSide ? { headers: { Connection: 'keep-alive' } } : null;
http.get('/api/albums/' + routeParam.params['albumId'], options).subscribe(result => {
this.albumData = result.json();
});
}

6
samples/angular/MusicStore/wwwroot/ng-app/components/public/genre-contents/genre-contents.ts
View File

@@ -13,7 +13,11 @@ export class GenreContents {
public albums: models.Album[];
constructor(http: Http, routeParam: router.RouteParams) {
http.get(`/api/genres/${ routeParam.params['genreId'] }/albums`).subscribe(result => {
// Workaround for RC1 bug. This can be removed with ASP.NET Core 1.0 RC2.
let isServerSide = typeof window === 'undefined';
let options: any = isServerSide ? { headers: { Connection: 'keep-alive' } } : null;
http.get(`/api/genres/${ routeParam.params['genreId'] }/albums`, options).subscribe(result => {
this.albums = result.json();
});
}

6
samples/angular/MusicStore/wwwroot/ng-app/components/public/genres-list/genres-list.ts
View File

@@ -12,7 +12,11 @@ export class GenresList {
public genres: models.Genre[];
constructor(http: Http) {
http.get('/api/genres').subscribe(result => {
// Workaround for RC1 bug. This can be removed with ASP.NET Core 1.0 RC2.
let isServerSide = typeof window === 'undefined';
let options: any = isServerSide ? { headers: { Connection: 'keep-alive' } } : null;
http.get('/api/genres', options).subscribe(result => {
this.genres = result.json();
});
}

6
samples/angular/MusicStore/wwwroot/ng-app/components/public/home/home.ts
View File

@@ -12,7 +12,11 @@ export class Home {
public mostPopular: models.Album[];
constructor(http: Http) {
http.get('/api/albums/mostPopular').subscribe(result => {
// Workaround for RC1 bug. This can be removed with ASP.NET Core 1.0 RC2.
let isServerSide = typeof window === 'undefined';
let options: any = isServerSide ? { headers: { Connection: 'keep-alive' } } : null;
http.get('/api/albums/mostPopular', options).subscribe(result => {
this.mostPopular = result.json();
});
}

4
src/Microsoft.AspNet.AngularServices/npm/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "angular2-aspnet",
"version": "0.0.5",
"version": "0.0.6",
"description": "Helpers for Angular 2 apps built on ASP.NET",
"main": "./dist/Exports",
"scripts": {
@@ -15,7 +15,7 @@
"author": "Microsoft",
"license": "Apache-2.0",
"dependencies": {
"angular2": "2.0.0-beta.13",
"angular2": "^2.0.0-beta.13",
"rxjs": "5.0.0-beta.2"
},
"devDependencies": {