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.

Author: wardbell

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 {}
 
 
 

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 };

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`.