docs(architecture/ts): post-review updates

Author: chalin

public/docs/_examples/architecture/dart/lib/hero_list_component.dart

@@ -4,17 +4,18 @@ import 'hero.dart';
 import 'hero_detail_component.dart';
 import 'hero_service.dart';
 
-// #docregion metadata, providers
+// #docregion metadata
 @Component(
-    // #enddocregion providers
     selector: 'hero-list',
     templateUrl: 'hero_list_component.html',
     directives: const [HeroDetailComponent],
     // #docregion providers
-    providers: const [HeroService])
+    providers: const [HeroService]
+    // #enddocregion providers
+    )
 // #docregion class
 class HeroListComponent implements OnInit {
-  // #enddocregion metadata, providers
+  // #enddocregion metadata
   List<Hero> heroes;
   Hero selectedHero;
   // #docregion ctor
@@ -30,5 +31,5 @@ class HeroListComponent implements OnInit {
   void selectHero(Hero hero) {
     selectedHero = hero;
   }
-  // #docregion metadata, providers
+  // #docregion metadata
 }

public/docs/_examples/architecture/dart/lib/sales_tax_component.dart

@@ -7,7 +7,7 @@ import 'tax_rate_service.dart';
     selector: 'sales-tax',
     template: '''
       <h2>Sales Tax Calculator</h2>
-      Amount: <input #amountBox (input)="0" type="number">
+      Amount: <input #amountBox (change)="0">
 
       <div *ngIf="amountBox.value != ''">
       The sales tax is

public/docs/_examples/architecture/e2e-spec.ts

@@ -2,7 +2,6 @@
 'use strict';
 
 const nameSuffix = 'X';
-type WPromise<T> = webdriver.promise.Promise<T>;
 
 class Hero {
   id: number;
@@ -43,25 +42,17 @@ function heroTests() {
     expect(page.heroDetail.isPresent()).toBeFalsy('no hero detail');
   });
 
-  it(`selects ${targetHero.name} from hero list`, function () {
-    let hero = element(by.cssContainingText('li', targetHero.name));
-    hero.click();
-    // Nothing specific to expect other than lack of exceptions.
-  });
-
   it('shows selected hero details', async () => {
+    await element(by.cssContainingText('li', targetHero.name)).click();
     let page = getPageElts();
     let hero = await heroFromDetail(page.heroDetail);
     expect(hero.id).toEqual(targetHero.id);
     expect(hero.name).toEqual(targetHero.name);
   });
 
-  it(`can update hero name`, () => {
-    addToHeroName(nameSuffix);
-    // Nothing specific to expect other than lack of exceptions.
-  });
-
   it(`shows updated hero name in details`, async () => {
+    let input = element.all(by.css('input')).first();
+    await sendKeys(input, nameSuffix);
     let page = getPageElts();
     let hero = await heroFromDetail(page.heroDetail);
     let newName = targetHero.name + nameSuffix;
@@ -96,11 +87,6 @@ function getPageElts() {
   };
 }
 
-function addToHeroName(text: string): WPromise<void> {
-    let input = element.all(by.css('input')).first();
-    return sendKeys(input, text);
-}
-
 async function heroFromDetail(detail: protractor.ElementFinder): Promise<Hero> {
   // Get hero id from the first <div>
   let _id = await detail.all(by.css('div')).first().getText();

public/docs/_examples/architecture/ts/app/hero-list.component.ts

@@ -4,18 +4,18 @@ import { Hero }                from './hero';
 import { HeroDetailComponent } from './hero-detail.component';
 import { HeroService }         from './hero.service';
 
-// #docregion metadata, providers
+// #docregion metadata
 @Component({
-  // #enddocregion providers
   selector:    'hero-list',
   templateUrl: 'app/hero-list.component.html',
   directives:  [HeroDetailComponent],
   // #docregion providers
   providers:   [HeroService]
+  // #enddocregion providers
 })
 // #docregion class
 export class HeroListComponent implements OnInit {
-  // #enddocregion metadata, providers
+  // #enddocregion metadata
   heroes: Hero[];
   selectedHero: Hero;
 
@@ -28,5 +28,5 @@ export class HeroListComponent implements OnInit {
   }
 
   selectHero(hero: Hero) { this.selectedHero = hero; }
-  // #docregion metadata, providers
+  // #docregion metadata
 }

public/docs/_examples/architecture/ts/app/sales-tax.component.ts

@@ -7,7 +7,7 @@ import { TaxRateService }  from './tax-rate.service';
   selector:    'sales-tax',
   template: `
     <h2>Sales Tax Calculator</h2>
-    Amount: <input #amountBox (input)="0" type="number">
+    Amount: <input #amountBox (change)="0">
 
     <div *ngIf="amountBox.value">
     The sales tax is

public/docs/ts/latest/guide/architecture.jade

@@ -81,7 +81,7 @@ block modules-are-optional
   component class is the kind of thing we'd export from a module.
 
   Most applications have an `AppComponent`. By convention, we'll find it in a file named `!{_app_comp_filename}`.
-  Look inside such a file and we'll see a declaration like this one.
+  Look inside such a file and we'll see a declaration such as this one.
 
 +makeExcerpt('app/app.component.ts ()', 'export')
 
@@ -176,7 +176,7 @@ figure
   The class interacts with the view through an API of properties and methods.
 
   <a id="component-code"></a>
-  A `HeroListComponent`, for example, might have a `heroes` property that returns an !{_array} of heroes
+  A `HeroListComponent`, for example, might have a `heroes` property that returns !{_an} !{_array} of heroes
   that it acquired from a service.
   It might have a `selectHero()` method that sets a `selectedHero` property when the user clicks to choose a hero from that list.
   The component might be a class like this:
@@ -247,7 +247,7 @@ figure
 
   We tell Angular that `HeroListComponent` is a component by attaching **metadata** to the class.
 
-  In !{_Lang}, we attach metadata by using an **!{_decorator}**.
+  In !{_Lang}, we attach metadata by using !{_a} **!{_decorator}**.
   Here's some metadata for `HeroListComponent`:
 
 +makeExcerpt('app/hero-list.component.ts', 'metadata')
@@ -285,13 +285,13 @@ figure
   img(src="/resources/images/devguide/architecture/template-metadata-component.png" alt="Metadata" align="left" style="height:200px; margin-left:-40px;margin-right:10px" )
 
 :marked
-  At runtime, Angular discovers the metadata specified by the `@Component`
-  annotation. That's how Angular learns how to do "the right thing".
+  Angular reads the metadata specified by the `@Component`
+  annotation. That's how Angular learns to do "the right thing".
 
   The template, metadata, and component together describe a view.
 
   We apply other metadata !{_decorator}s in a similar fashion to guide Angular behavior.
-  `@Injectable`, `@Input`, `@Output`, and `@RouterConfig` are a few of the more popular !{_decorator}s
+  `@Injectable`, `@Input`, and `@Output` are a few of the more popular !{_decorator}s
   we'll master as our Angular knowledge grows.
 <br clear="all">
 :marked
@@ -341,9 +341,8 @@ figure
   as with event binding.
 
   Angular processes *all* data bindings once per JavaScript event cycle,
-  depth-first from the root of the application component tree.
-  <!-- PENDING: clarify what "depth-first from the root" really means,
-  or reassure that they'll learn it soon. -->
+  from the root of the application component tree down to the leaves.
+
 figure
   img(src="/resources/images/devguide/architecture/component-databinding.png" alt="Data Binding" style="float:left; width:300px; margin-left:-40px;margin-right:10px" )
 :marked
@@ -381,7 +380,7 @@ figure
 :marked
   Two *other* kinds of directives exist: _structural_ and _attribute_ directives.
 
-  They tend to appear within an element tag like attributes,
+  They tend to appear within an element tag as attributes do,
   sometimes by name but more often as the target of an assignment or a binding.
 
   **Structural** directives alter layout by adding, removing, and replacing elements in DOM.
@@ -423,7 +422,7 @@ block dart-bool
 figure
   img(src="/resources/images/devguide/architecture/service.png" alt="Service" style="float:left; margin-left:-40px;margin-right:10px" )
 :marked
-  _Services_ is a broad category encompassing any value, function, or feature that our application needs.
+  _Service_ is a broad category encompassing any value, function, or feature that our application needs.
 
   Almost anything can be a service.
   A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well.
@@ -475,7 +474,7 @@ figure
 figure
   img(src="/resources/images/devguide/architecture/dependency-injection.png" alt="Service" style="float:left; width:200px; margin-left:-40px;margin-right:10px" )
 :marked
-  Dependency injection is a way to supply a new instance of a class
+  _Dependency injection_ is a way to supply a new instance of a class
   with the fully-formed dependencies it requires. Most dependencies are services.
   Angular uses dependency injection to provide new components with the services they need.
 <br clear="all">
@@ -512,7 +511,7 @@ figure
 +makeExcerpt('app/main.ts', 'bootstrap')
 
 :marked
-  Alternatively, we might register at a component level:
+  Alternatively, we might register at a component level, in the providers property of the `@Component` metadata:
 
 +makeExcerpt('app/hero-list.component.ts', 'providers')
 
@@ -589,6 +588,9 @@ code-example().
 :marked
   > It displays a price of "42.33" as `$42.33`.
 
+  > [**Router**](router.html): Navigate from page to page within the client
+    application and never leave the browser.
+
   > [**Testing**](testing.html): Angular provides a
   [testing library](https://pub.dartlang.org/packages/angular2_testing)
   to run unit tests on our application parts as they interact with the Angular framework.