angular · wardbell · May 19, 2016 · May 18, 2016
diff --git a/public/docs/_examples/server-communication/dart/example-config.json b/public/docs/_examples/server-communication/dart/example-config.json
diff --git a/public/docs/_examples/server-communication/dart/lib/app_component.dart b/public/docs/_examples/server-communication/dart/lib/app_component.dart
@@ -0,0 +1,31 @@
+// #docplaster
+// #docregion
+import "package:angular2/core.dart" show Component;
+
+import "toh/hero_list_component.dart" show HeroListComponent;
+import "wiki/wiki_component.dart" show WikiComponent;
+import "wiki/wiki_smart_component.dart" show WikiSmartComponent;
+
+@Component(
+    selector: "my-app",
+    template: '''
+      <hero-list></hero-list>
+      <my-wiki></my-wiki>
+      <my-wiki-smart></my-wiki-smart>
+    ''',
+    // #enddocregion
+    /*
+    // #docregion http-providers
+    providers: const [
+      // in-memory web api provider
+      const Provider(BrowserClient,
+          useFactory: HttpClientBackendServiceFactory, deps: const [])],
+    // #enddocregion http-providers
+    */
+    // #docregion
+    directives: const [
+      HeroListComponent,
+      WikiComponent,
+      WikiSmartComponent
+    ])
+class AppComponent {}
diff --git a/public/docs/_examples/server-communication/dart/lib/hero_data.dart b/public/docs/_examples/server-communication/dart/lib/hero_data.dart
@@ -2,7 +2,7 @@
 import 'package:http/browser_client.dart';
 import 'package:http_in_memory_web_api/http_in_memory_web_api.dart';
 
-CreateDb createDb = () => {
+CreateDb _createDb = () => {
       'heroes': [
         {"id": "1", "name": "Windstorm"},
         {"id": "2", "name": "Bombasto"},
@@ -12,4 +12,4 @@ CreateDb createDb = () => {
     };
 
 BrowserClient HttpClientBackendServiceFactory() =>
-  new HttpClientInMemoryBackendService(createDb);
+  new HttpClientInMemoryBackendService(_createDb);
diff --git a/public/docs/_examples/server-communication/dart/lib/toh/hero_list_component.dart b/public/docs/_examples/server-communication/dart/lib/toh/hero_list_component.dart
@@ -9,7 +9,7 @@ import 'hero_service.dart';
 @Component(
     selector: 'hero-list',
     templateUrl: 'hero_list_component.html',
-    styles: const ['.error {color:red;}'])
+    providers: const [HeroService])
 // #docregion component
 class HeroListComponent implements OnInit {
   final HeroService _heroService;

diff --git a/public/docs/_examples/server-communication/dart/lib/toh/hero_list_component.html b/public/docs/_examples/server-communication/dart/lib/toh/hero_list_component.html
@@ -1,4 +1,5 @@
 <!-- #docregion -->
+<h1>Tour of Heroes</h1>
 <h3>Heroes:</h3>
 <ul>
   <li *ngFor="let hero of heroes">

diff --git a/public/docs/_examples/server-communication/dart/lib/toh/hero_service.dart b/public/docs/_examples/server-communication/dart/lib/toh/hero_service.dart
@@ -15,7 +15,9 @@ class HeroService {
   // #enddocregion endpoint, http-get
   final BrowserClient _http;
 
+  // #docregion ctor
   HeroService(this._http);
+  // #enddocregion ctor
 
   // #docregion methods, error-handling, http-get
   Future<List<Hero>> getHeroes() async {
@@ -57,6 +59,7 @@ class HeroService {
 
   Exception _handleError(dynamic e) {
     // In a real world app, we might use a remote logging infrastructure
+    // We'd also dig deeper into the error to get a better message
     print(e); // log to console instead
     return new Exception('Server error; cause: $e');
   }

diff --git a/public/docs/_examples/server-communication/dart/lib/toh/toh_component.dart b/public/docs/_examples/server-communication/dart/lib/toh/toh_component.dart
diff --git a/public/docs/_examples/server-communication/dart/pubspec.yaml b/public/docs/_examples/server-communication/dart/pubspec.yaml
@@ -12,11 +12,15 @@ dependencies:
   jsonpadding: ^0.1.0
   stream_transformers: ^0.3.0+3
   http_in_memory_web_api: ^0.0.1
+# #docregion transformers
 transformers:
 - angular2:
-    platform_directives: 'package:angular2/common.dart#CORE_DIRECTIVES'
-    platform_pipes: 'package:angular2/common.dart#COMMON_PIPES'
+    platform_directives:
+    - 'package:angular2/common.dart#CORE_DIRECTIVES'
+    platform_pipes:
+    - 'package:angular2/common.dart#COMMON_PIPES'
     entry_points: 'web/main.dart'
     resolved_identifiers:
         BrowserClient: 'package:http/browser_client.dart'
 - dart_to_js_script_rewriter
+# #enddocregion transformers
diff --git a/public/docs/_examples/server-communication/dart/web/index.html b/public/docs/_examples/server-communication/dart/web/index.html
@@ -6,15 +6,14 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="sample.css">
 
     <script defer src="main.dart" type="application/dart"></script>
     <script defer src="packages/browser/dart.js"></script>
   </head>
 
   <body>
-    <my-toh>ToH Loading...</my-toh>
-    <my-wiki>Wiki Loading...</my-wiki>
-    <my-wiki-smart>WikiSmart Loading...</my-wiki-smart>
+    <my-app>Loading...</my-app>
   </body>
 
 </html>
diff --git a/public/docs/_examples/server-communication/dart/web/main.dart b/public/docs/_examples/server-communication/dart/web/main.dart
@@ -1,12 +1,34 @@
-// #docregion
-import 'package:angular2/platform/browser.dart';
+// #docplaster
+// #docregion final
+import 'package:angular2/core.dart' show Provider;
+// #docregion v1
+import 'package:angular2/platform/browser.dart' show bootstrap;
+// #docregion http-providers
+import 'package:http/browser_client.dart' show BrowserClient;
+// #enddocregion http-providers
 
-import 'package:server_communication/toh/toh_component.dart';
-import 'package:server_communication/wiki/wiki_component.dart';
-import 'package:server_communication/wiki/wiki_smart_component.dart';
+import 'package:server_communication/app_component.dart';
+// #enddocregion v1
+// #docregion in-mem-web-api-imports
+import "package:server_communication/hero_data.dart";
 
-main() {
-  bootstrap(TohComponent);
-  bootstrap(WikiComponent);
-  bootstrap(WikiSmartComponent);
+// #enddocregion in-mem-web-api-imports
+// #docregion in-mem-web-api-providers
+void main() {
+  bootstrap(AppComponent, const [
+    // in-memory web api provider
+    const Provider(BrowserClient,
+        useFactory: HttpClientBackendServiceFactory, deps: const [])
+    // TODO: drop `deps` once fix lands for 
+    // https://github.com/angular/angular/issues/5266
+  ]);
 }
+// #enddocregion final, in-mem-web-api-providers
+/*
+// #docregion v1
+
+void main() {
+  bootstrap(AppComponent, const [BrowserClient]);
+}
+// #enddocregion v1
+*/
diff --git a/public/docs/_examples/server-communication/dart/web/sample.css b/public/docs/_examples/server-communication/dart/web/sample.css
@@ -0,0 +1 @@
+.error {color:red;}
diff --git a/public/docs/_examples/server-communication/e2e-spec.js b/public/docs/_examples/server-communication/e2e-spec.js
@@ -4,69 +4,62 @@ describe('Server Communication', function () {
     browser.get('');
   });
 
-  describe('Tour of Heroes e2e tests', function () {
-
-    var _initialHeroCount = 4;
-    var _newHeroName = 'Mr. IQ';
-    var _heroCountAfterAdd = 5;
-
-    it('should display ' + _initialHeroCount + ' heroes after init', function () {
-      var myTohComp = element(by.tagName('my-toh'));
-      expect(myTohComp).toBeDefined('<my-toh> must exist');
-      var heroListComp = myTohComp.element(by.tagName('hero-list'));
+  describe('Tour of Heroes (Observable)', function () {
+
+    var initialHeroCount = 4;
+    var newHeroName = 'Mr. IQ';
+    var heroCountAfterAdd = 5;
+
+    var heroListComp = element(by.tagName('hero-list'));
+    var addButton = heroListComp.element(by.tagName('button'));
+    var heroTags = heroListComp.all(by.tagName('li'));
+    var heroNameInput = heroListComp.element(by.tagName('input'));
+
+    it('should exist', function() {
       expect(heroListComp).toBeDefined('<hero-list> must exist');
-      var heroTags = heroListComp.all(by.tagName('li'));
-      expect(heroTags.count()).toBe(_initialHeroCount);
     });
-
+
+    it('should display ' + initialHeroCount + ' heroes after init', function () {
+      expect(heroTags.count()).toBe(initialHeroCount);
+    });
+
     it('should not add hero with empty name', function () {
-      var myTohComp = element(by.tagName('my-toh'));
-      expect(myTohComp).toBeDefined('<my-toh> must exist');
-      var addButton = myTohComp.element(by.tagName('button'));
       expect(addButton).toBeDefined('"Add Hero" button must be defined');
       addButton.click().then(function() {
-        var heroListComp = myTohComp.element(by.tagName('hero-list'));
-        var heroTags = heroListComp.all(by.tagName('li'));
-        expect(heroTags.count()).toBe(_initialHeroCount, 'No new hero should be added');
+        expect(heroTags.count()).toBe(initialHeroCount, 'No new hero should be added');
       });
     })
 
     it('should add a new hero to the list', function () {
-      var myTohComp = element(by.tagName('my-toh'));
-      expect(myTohComp).toBeDefined('<my-toh> must exist');
-      var heroNameInput = myTohComp.element(by.tagName('input'));
       expect(heroNameInput).toBeDefined('<input> for hero name must exist');
-      var addButton = myTohComp.element(by.tagName('button'));
       expect(addButton).toBeDefined('"Add Hero" button must be defined');
-      sendKeys(heroNameInput, _newHeroName);
+      sendKeys(heroNameInput, newHeroName);
       addButton.click().then(function() {
-        var heroListComp = myTohComp.element(by.tagName('hero-list'));
-        var heroTags = heroListComp.all(by.tagName('li'));
-        expect(heroTags.count()).toBe(_heroCountAfterAdd, 'A new hero should be added');
-        var newHeroInList = heroTags.get(_heroCountAfterAdd - 1).getText();
-        expect(newHeroInList).toBe(_newHeroName, 'The hero should be added to the end of the list');
+        expect(heroTags.count()).toBe(heroCountAfterAdd, 'A new hero should be added');
+        var newHeroInList = heroTags.get(heroCountAfterAdd - 1).getText();
+        expect(newHeroInList).toBe(newHeroName, 'The hero should be added to the end of the list');
       });
     })
   });
-  
-  describe('Wikipedia Demo e2e tests', function () {
-    
+
+  describe('Wikipedia Demo', function () {
+
     it('should initialize the demo with empty result list', function () {
       var myWikiComp = element(by.tagName('my-wiki'));
       expect(myWikiComp).toBeDefined('<my-wiki> must exist');
       var resultList = myWikiComp.all(by.tagName('li'));
       expect(resultList.count()).toBe(0, 'result list must be empty');
     });
-    
+
     describe('Fetches after each keystroke', function () {
       it('should fetch results after "B"', function(done) {
         testForRefreshedResult('B', done);
       });
-      
+
       it('should fetch results after "Ba"', function(done) {
         testForRefreshedResult('a', done);
       });
-      
+
       it('should fetch results after "Bas"', function(done) {
         testForRefreshedResult('s', done);
       });
@@ -75,13 +68,13 @@ describe('Server Communication', function () {
         testForRefreshedResult('ic', done);
       });
     });
-    
+
     function testForRefreshedResult(keyPressed, done) {
       testForResult('my-wiki', keyPressed, false, done)
     }
   });
-  
-  describe('Smarter Wikipedia Demo e2e tests', function () {
+
+  describe('Smarter Wikipedia Demo', function () {
 
     it('should initialize the demo with empty result list', function () {
       var myWikiSmartComp = element(by.tagName('my-wiki-smart'));
@@ -93,40 +86,40 @@ describe('Server Communication', function () {
     it('should fetch results after "Java"', function(done) {
       testForNewResult('Java', done);
     });
-    
+
     it('should fetch results after "JavaS"', function(done) {
       testForStaleResult('S', done);
     });
-    
+
     it('should fetch results after "JavaSc"', function(done) {
       testForStaleResult('c', done);
     });
-    
+
     it('should fetch results after "JavaScript"', function(done) {
       testForStaleResult('ript', done);
     });
 
-    
+
     function testForNewResult(keyPressed, done) {
       testForResult('my-wiki-smart', keyPressed, false, done)
     }
 
     function testForStaleResult(keyPressed, done) {
-      testForResult('my-wiki-smart', keyPressed, true, done)      
+      testForResult('my-wiki-smart', keyPressed, true, done)
     }
 
   });
-  
+
   function testForResult(componentTagName, keyPressed, hasListBeforeSearch, done) {
     var searchWait = 1000; // Wait for wikipedia but not so long that tests timeout
     var wikiComponent = element(by.tagName(componentTagName));
     expect(wikiComponent).toBeDefined('<' + componentTagName + '> must exist');
     var searchBox = wikiComponent.element(by.tagName('input'));
     expect(searchBox).toBeDefined('<input> for search must exist');
-    
+
     searchBox.sendKeys(keyPressed).then(function () {
       var resultList = wikiComponent.all(by.tagName('li'));
-      
+
       if (hasListBeforeSearch) {
         expect(resultList.count()).toBeGreaterThan(0, 'result list should not be empty before search');
       }
@@ -137,5 +130,5 @@ describe('Server Communication', function () {
       }, searchWait);
     });
   }
-  
+
 });
diff --git a/public/docs/_examples/server-communication/ts/app/add-rxjs-operators.ts b/public/docs/_examples/server-communication/ts/app/add-rxjs-operators.ts