diff --git a/public/docs/_examples/server-communication/ts/.gitignore b/public/docs/_examples/server-communication/ts/.gitignore deleted file mode 100644 index d30e27f5f7..0000000000 --- a/public/docs/_examples/server-communication/ts/.gitignore +++ /dev/null @@ -1 +0,0 @@ -!systemjs.config.1.js diff --git a/public/docs/_examples/server-communication/ts/systemjs.config.1.js b/public/docs/_examples/server-communication/ts/systemjs.config.1.js deleted file mode 100644 index fc3e350d5a..0000000000 --- a/public/docs/_examples/server-communication/ts/systemjs.config.1.js +++ /dev/null @@ -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); diff --git a/public/docs/ts/latest/guide/server-communication.jade b/public/docs/ts/latest/guide/server-communication.jade index 6e4dfe3341..9b4e258b78 100644 --- a/public/docs/ts/latest/guide/server-communication.jade +++ b/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. - Moreover, we would need to install this library separately and load it in `system.js`. - All of our Developer Guide samples have this library installed. -+makeExample('server-communication/ts/systemjs.config.1.js', 'package-names', 'systemjs.config.js', { pnk: /('@angular\/http.*)/g})(format=".") +.l-sub-section + :marked + `Http` is not part of the Angular core. It's an optional service in its own `@angular/http` library + 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. - - First, install it with `npm`: -code-example(language="bash"). - npm install a2-in-memory-web-api --save +.l-sub-section + :marked + The *in-memory web api* is not part of the Angular core. + 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: -+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 + The *in-memory web api* gets its data from a custom, application 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