docs(server-communication): fix broken example

public/docs/_examples/server-communication/ts/.gitignore

@@ -1 +0,0 @@
-!systemjs.config.1.js

public/docs/_examples/server-communication/ts/systemjs.config.1.js

@@ -1,56 +0,0 @@
-// #docplaster
-/**
- * System configuration for Angular 2 samples
- * Adjust as necessary for your application needs.
- * Override at the last minute with global.filterSystemConfig (as plunkers do)
- */
-(function(global) {
-
-  // map tells the System loader where to look for things
-  // #docregion rxjs
-  var map = {
-    'app':                        'app', // 'dist',
-    'rxjs':                       'node_modules/rxjs',
-    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
-    '@angular':                   'node_modules/@angular'
-  };
-  // #enddocregion rxjs
-
-  // packages tells the System loader how to load when no filename and/or no extension
-  // #docregion rxjs
-  var packages = {
-    'app':                        { main: 'main.js',  defaultExtension: 'js' },
-    'rxjs':                       { defaultExtension: 'js' },
-    'angular2-in-memory-web-api': { defaultExtension: 'js' },
-  };
-  // #enddocregion rxjs
-// #docregion package-names
-  var packageNames = [
-    '@angular/common',
-    '@angular/compiler',
-    '@angular/core',
-    '@angular/http',
-    '@angular/platform-browser',
-    '@angular/platform-browser-dynamic',
-    '@angular/router',
-    '@angular/testing',
-    '@angular/upgrade',
-  ];
-  // #enddocregion package-names
-
-  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
-  packageNames.forEach(function(pkgName) {
-    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
-  });
-
-  var config = {
-    map: map,
-    packages: packages
-  }
-
-  // filterSystemConfig - index.html's chance to modify config before we register it.
-  if (global.filterSystemConfig) { global.filterSystemConfig(config); }
-
-  System.config(config);
-
-})(this);

public/docs/ts/latest/guide/server-communication.jade

@@ -56,7 +56,7 @@ figure.image-display
     We're making a point about application structure that is easier to justify when the app grows.
 :marked
   Here is the `TohComponent` shell:
-+makeExample('server-communication/ts/app/toh/toh.component.ts', null, 'app/toh.component.ts')
++makeExample('server-communication/ts/app/toh/toh.component.ts', '', 'app/toh.component.ts')
 :marked
   As usual, we import the symbols we need. The newcomer is `HTTP_PROVIDERS`, 
   an array of service providers from the Angular HTTP library.
@@ -138,10 +138,11 @@ a(id="HeroListComponent")
   We begin by importing Angular's `Http` client service and 
   [inject it](dependency-injection.html) into the `HeroService` constructor.
 
-  `Http` is not part of the Angular core. It's an optional service in its own `@angular/http` library.
+.l-sub-section
-  Moreover, we would need to install this library separately and load it in `system.js`.
+  :marked
-  All of our Developer Guide samples have this library installed.
+    `Http` is not part of the Angular core. It's an optional service in its own `@angular/http` library
-+makeExample('server-communication/ts/systemjs.config.1.js', 'package-names', 'systemjs.config.js', { pnk: /('@angular\/http.*)/g})(format=".")
+    that we installed with npm (see the `package.json`) and 
+    registered for module loading by SystemJS (see `systemjs.config.js`)
 :marked
   Look closely at how we call `http.get`
 +makeExample('server-communication/ts/app/toh/hero.service.ts', 'http-get', 'app/toh/hero.service.ts (getHeroes)')(format=".")
@@ -173,8 +174,7 @@ a(id="HeroListComponent")
    
   All of our Developer Guide samples have installed the RxJS npm package and loaded via `system.js`
   because observables are used widely in Angular applications.
-+makeExample('server-communication/ts/systemjs.config.1.js', 'rxjs', 'systemjs.config.js', {pnk: /('rxjs.*)/g})(format=".")
+
-:marked
   We certainly need it now when working with the HTTP client.
   And we must take a critical extra step to make RxJS observables usable.
   
@@ -604,15 +604,14 @@ figure.image-display
   We didn't want the hassle of setting up and maintaining a real server for this chapter.
   So we turned to an *in-memory web api simulator* instead. 
   You too can use it in your own development while waiting for a real server to arrive.
-  
+.l-sub-section
-  First, install it with `npm`:
+  :marked
-code-example(language="bash").
+    The *in-memory web api* is not part of the Angular core. 
-  npm install a2-in-memory-web-api --save
+    It's an optional service in its own `angular2-in-memory-web-api` library
+    that we installed with npm (see the `package.json`) and 
+    registered for module loading by SystemJS (see `systemjs.config.js`)
 :marked
-  Then load the script in the `index.html` below angular:
+  The *in-memory web api* gets its data from a custom, application class with a `createDb()` method that returns
-+makeExample('server-communication/ts/index.html', 'in-mem-web-api', 'index.html')(format=".")
-:marked
-  The *in-memory web api* gets its data from a class with a `createDb()` method that returns
   a "database" object whose keys are collection names ("heroes") 
   and whose values are arrays of objects in those collections.
   
@@ -625,7 +624,7 @@ code-example(language="bash").
   Finally, we tell Angular itself to direct its http requests to the *in-memory web api* rather
   than externally to a remote server.
   
-  This redirection is easy because Angular's `http` delegates the client/server communication tasks
+  This redirection is easy because Angular's `http` service delegates the client/server communication tasks
   to a helper service called the `XHRBackend`. 
   
   To enable our server simulation, we replace the default `XHRBackend` service with