From 7af64a4f35bae8a512783409fe866a923bc8204a Mon Sep 17 00:00:00 2001 From: Ward Bell Date: Wed, 14 Dec 2016 20:35:29 -0800 Subject: [PATCH] docs(http): use a class for default `RequestOptions` override (#2982) John Papa pointed out that this makes user testing easier if you care about headers in those tests. --- .../server-communication/ts/app/app.module.ts | 18 ++++++--------- .../ts/app/default-request-options.service.ts | 14 ++++++++++++ .../ts/latest/guide/server-communication.jade | 22 ++++++++++++------- 3 files changed, 35 insertions(+), 19 deletions(-) create mode 100644 public/docs/_examples/server-communication/ts/app/default-request-options.service.ts diff --git a/public/docs/_examples/server-communication/ts/app/app.module.ts b/public/docs/_examples/server-communication/ts/app/app.module.ts index 72a8caf839..ae35cc2787 100644 --- a/public/docs/_examples/server-communication/ts/app/app.module.ts +++ b/public/docs/_examples/server-communication/ts/app/app.module.ts @@ -3,12 +3,12 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; -// #docregion override-default-options -import { HttpModule, JsonpModule, RequestOptions } from '@angular/http'; +import { HttpModule, JsonpModule } from '@angular/http'; + -// #enddocregion override-default-options import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; import { HeroData } from './hero-data'; +import { requestOptionsProvider } from './default-request-options.service'; import { AppComponent } from './app.component'; @@ -35,16 +35,12 @@ import { WikiSmartComponent } from './wiki/wiki-smart.component'; WikiComponent, WikiSmartComponent ], +// #docregion provide-default-request-options + providers: [ requestOptionsProvider ], +// #enddocregion provide-default-request-options bootstrap: [ AppComponent ] }) -// #docregion override-default-request-options -export class AppModule { - constructor(requestOptions: RequestOptions) { - // Set the default 'Content-Type' header - requestOptions.headers.set('Content-Type', 'application/json'); - } -} -// #enddocregion override-default-request-options +export class AppModule {} diff --git a/public/docs/_examples/server-communication/ts/app/default-request-options.service.ts b/public/docs/_examples/server-communication/ts/app/default-request-options.service.ts new file mode 100644 index 0000000000..769545fda8 --- /dev/null +++ b/public/docs/_examples/server-communication/ts/app/default-request-options.service.ts @@ -0,0 +1,14 @@ +// #docregion +import { BaseRequestOptions, RequestOptions } from '@angular/http'; + +export class DefaultRequestOptions extends BaseRequestOptions { + + constructor() { + super(); + + // Set the default 'Content-Type' header + this.headers.set('Content-Type', 'application/json'); + } +} + +export const requestOptionsProvider = {provide: RequestOptions, useClass: DefaultRequestOptions }; diff --git a/public/docs/ts/latest/guide/server-communication.jade b/public/docs/ts/latest/guide/server-communication.jade index 81fad0efdc..72bfdf5aed 100644 --- a/public/docs/ts/latest/guide/server-communication.jade +++ b/public/docs/ts/latest/guide/server-communication.jade @@ -659,22 +659,28 @@ a#override-default-request-options The `HttpModule` provides these default options via the `RequestOptions` token. You can override these defaults to suit your application needs. - The API docs suggest creating a custom sub-class of `RequestOptions` - and providing that as a replacement class for the `RequestOptions` token. + by creating a custom sub-class of `RequestOptions` + that sets the default options for the application. - Perhaps an easier way is to inject the current `RequestOptions` instance - into an application module constructor and re-set its values directly. - This sample sets the default `Content-Type` header to JSON in the root `AppModule` constructor: -+makeExample('server-communication/ts/app/app.module.ts', 'override-default-request-options', 'app/app.module.ts (default request header override)')(format=".") + This sample creates a class that sets the default `Content-Type` header to JSON. + It exports a constant with the necessary `RequestOptions` provider to simplify registration in `AppModule`. + ++makeExample('server-communication/ts/app/default-request-options.service.ts', '', 'app/default-request-options.service.ts')(format=".") +:marked + Then it registers the provider in the root `AppModule`. ++makeExample('server-communication/ts/app/app.module.ts', 'provide-default-request-options', 'app/app.module.ts (provide default request header)')(format=".") +.l-sub-section + :marked + Remember to include this provider during setup when unit testing the app's HTTP services. :marked After this change, the `header` option setting in `HeroService.addHero` is no longer necessary, +makeExample('server-communication/ts/app/toh/hero.service.ts', 'addhero', 'app/toh/hero.service.ts (addHero)')(format=".") :marked - You can confirm this works by looking at the network tab. + You can confirm that `DefaultRequestOptions` is working by examing HTTP requests in the browser developer tools' network tab. If you're short-circuiting the server call with something like the [_in-memory web api_](#in-mem-web-api), try commenting-out the `addHero` header option, - set a breakpoint on the POST call, and step through to the backend request + set a breakpoint on the POST call, and step through the request processing to verify the header is there. Individual requests options, like this one, take precedence over the default `RequestOptions`.