iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(aio): rename ToH to match the guide name

Browse Source
This commit is contained in:
Jesus Rodriguez
2017-04-18 20:16:02 +02:00
committed by Pete Bacon Darwin
parent 691e86c9bf
commit 9d40ab9e20
113 changed files with 174 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
aio/content/tutorial/toh-pt1.md
+10 -10
View File
@@ -109,7 +109,7 @@ Add two properties to the `AppComponent`: a `title` property for the app name an
for a hero named "Windstorm."
<code-example path="toh-1/app/app.component.1.ts" region="app-component-1" title="app.component.ts (AppComponent class)" linenums="false">
<code-example path="toh-pt1/app/app.component.1.ts" region="app-component-1" title="app.component.ts (AppComponent class)" linenums="false">
</code-example>
@@ -118,7 +118,7 @@ for a hero named "Windstorm."
Now update the template in the `@Component` decorator with data bindings to these new properties.
<code-example path="toh-1/app/app.component.1.ts" region="show-hero" title="app.component.ts (@Component)" linenums="false">
<code-example path="toh-pt1/app/app.component.1.ts" region="show-hero" title="app.component.ts (@Component)" linenums="false">
</code-example>
@@ -151,7 +151,7 @@ Create a `Hero` class with `id` and `name` properties.
Add these properties near the top of the `app.component.ts` file, just below the import statement.
<code-example path="toh-1/src/app/app.component.ts" region="hero-class-1" title="src/app/app.component.ts (Hero class)" linenums="false">
<code-example path="toh-pt1/src/app/app.component.ts" region="hero-class-1" title="src/app/app.component.ts (Hero class)" linenums="false">
</code-example>
@@ -161,7 +161,7 @@ In the `AppComponent` class, refactor the component's `hero` property to be of t
then initialize it with an `id` of `1` and the name `Windstorm`.
<code-example path="toh-1/src/app/app.component.ts" region="hero-property-1" title="src/app/app.component.ts (hero property)" linenums="false">
<code-example path="toh-pt1/src/app/app.component.ts" region="hero-property-1" title="src/app/app.component.ts (hero property)" linenums="false">
</code-example>
@@ -171,7 +171,7 @@ Because you changed the hero from a string to an object,
update the binding in the template to refer to the hero's `name` property.
<code-example path="toh-1/app/app.component.1.ts" region="show-hero-2" title="toh-1/app/app.component.ts">
<code-example path="toh-pt1/app/app.component.1.ts" region="show-hero-2" title="src/app/app.component.ts">
</code-example>
@@ -191,7 +191,7 @@ thanks to the <i>template literals</i> feature in ES2015 and TypeScript. For mor
<code-example path="toh-1/app/app.component.1.ts" region="multi-line-strings" title="app.component.ts (AppComponent's template)" linenums="false">
<code-example path="toh-pt1/app/app.component.1.ts" region="multi-line-strings" title="app.component.ts (AppComponent's template)" linenums="false">
</code-example>
@@ -210,7 +210,7 @@ You need a two-way binding between the `<input>` form element and the `hero.name
Refactor the hero name in the template so it looks like this:
<code-example path="toh-1/app/app.component.1.ts" region="name-input" title="toh-1/app/app.component.ts" linenums="false">
<code-example path="toh-pt1/app/app.component.1.ts" region="name-input" title="src/app/app.component.ts" linenums="false">
</code-example>
@@ -237,7 +237,7 @@ of external modules that the app uses.
The updated `AppModule` looks like this:
<code-example path="toh-1/src/app/app.module.ts" title="app.module.ts (FormsModule import)">
<code-example path="toh-pt1/src/app/app.module.ts" title="app.module.ts (FormsModule import)">
</code-example>
@@ -279,7 +279,7 @@ Your app should look like this <live-example></live-example>.
Here's the complete `app.component.ts` as it stands now:
<code-example path="toh-1/src/app/app.component.ts" title="src/app/app.component.ts">
<code-example path="toh-pt1/src/app/app.component.ts" title="src/app/app.component.ts">
</code-example>
@@ -289,4 +289,4 @@ Here's the complete `app.component.ts` as it stands now:
## The road ahead
In the [next tutorial page](tutorial/toh-pt2), you'll build on the Tour of Heroes app to display a list of heroes.
You'll also allow the user to select heroes and display their details.
You'll learn more about how to retrieve lists and bind them to the template.
You'll learn more about how to retrieve lists and bind them to the template.
aio/content/tutorial/toh-pt2.md
+16 -16
View File
@@ -111,7 +111,7 @@ To display a list of heroes, you'll add heroes to the view's template.
Create an array of ten heroes.
<code-example path="toh-2/src/app/app.component.ts" region="hero-array" title="src/app/app.component.ts (hero array)">
<code-example path="toh-pt2/src/app/app.component.ts" region="hero-array" title="src/app/app.component.ts (hero array)">
</code-example>
@@ -126,7 +126,7 @@ Create a public property in `AppComponent` that exposes the heroes for binding.
<code-example path="toh-2/src/app/app.component.1.html" region="hero-array-1" title="app.component.ts (hero array property)">
<code-example path="toh-pt2/src/app/app.component.1.html" region="hero-array-1" title="app.component.ts (hero array property)">
</code-example>
@@ -153,7 +153,7 @@ insert the following chunk of HTML below the title and above the hero details.
<code-example path="toh-2/src/app/app.component.1.html" region="heroes-template-1" title="app.component.ts (heroes template)" linenums="false">
<code-example path="toh-pt2/src/app/app.component.1.html" region="heroes-template-1" title="app.component.ts (heroes template)" linenums="false">
</code-example>
@@ -169,7 +169,7 @@ and display them individually.
Modify the `<li>` tag by adding the built-in directive `*ngFor`.
<code-example path="toh-2/src/app/app.component.1.html" region="heroes-ngfor-1" title="app.component.ts (ngFor)">
<code-example path="toh-pt2/src/app/app.component.1.html" region="heroes-ngfor-1" title="app.component.ts (ngFor)">
</code-example>
@@ -206,7 +206,7 @@ that uses the `hero` template variable to display the hero's properties.
<code-example path="toh-2/src/app/app.component.1.html" region="ng-for" title="app.component.ts (ngFor template)" linenums="false">
<code-example path="toh-pt2/src/app/app.component.1.html" region="ng-for" title="app.component.ts (ngFor template)" linenums="false">
</code-example>
@@ -221,7 +221,7 @@ To add styles to your component, set the `styles` property on the `@Component` d
to the following CSS classes:
<code-example path="toh-2/src/app/app.component.ts" region="styles" title="src/app/app.component.ts (styles)" linenums="false">
<code-example path="toh-pt2/src/app/app.component.ts" region="styles" title="src/app/app.component.ts (styles)" linenums="false">
</code-example>
@@ -238,7 +238,7 @@ The template for displaying heroes should look like this:
<code-example path="toh-2/src/app/app.component.1.html" region="heroes-styled" title="src/app/app.component.ts (styled heroes)" linenums="false">
<code-example path="toh-pt2/src/app/app.component.1.html" region="heroes-styled" title="src/app/app.component.ts (styled heroes)" linenums="false">
</code-example>
@@ -260,7 +260,7 @@ Add a click event binding to the `<li>` like this:
<code-example path="toh-2/src/app/app.component.1.html" region="selectedHero-click" title="app.component.ts (template excerpt)" linenums="false">
<code-example path="toh-pt2/src/app/app.component.1.html" region="selectedHero-click" title="app.component.ts (template excerpt)" linenums="false">
</code-example>
@@ -291,7 +291,7 @@ But the user will be able to select one of the heroes by clicking on it.
So replace the `hero` property with this simple `selectedHero` property:
<code-example path="toh-2/src/app/app.component.ts" region="selected-hero" title="src/app/app.component.ts (selectedHero)">
<code-example path="toh-pt2/src/app/app.component.ts" region="selected-hero" title="src/app/app.component.ts (selectedHero)">
</code-example>
@@ -302,7 +302,7 @@ you won't initialize the `selectedHero` as you did with `hero`.
Add an `onSelect()` method that sets the `selectedHero` property to the `hero` that the user clicks.
<code-example path="toh-2/src/app/app.component.ts" region="on-select" title="src/app/app.component.ts (onSelect)" linenums="false">
<code-example path="toh-pt2/src/app/app.component.ts" region="on-select" title="src/app/app.component.ts (onSelect)" linenums="false">
</code-example>
@@ -313,7 +313,7 @@ Bind to the new `selectedHero` property instead as follows:
<code-example path="toh-2/src/app/app.component.1.html" region="selectedHero-details" title="app.component.ts (template excerpt)" linenums="false">
<code-example path="toh-pt2/src/app/app.component.1.html" region="selectedHero-details" title="app.component.ts (template excerpt)" linenums="false">
</code-example>
@@ -341,7 +341,7 @@ Wrap the HTML hero detail content of the template with a `<div>`.
Then add the `ngIf` built-in directive and set it to the `selectedHero` property of the component.
<code-example path="toh-2/src/app/app.component.1.html" region="ng-if" title="src/app/app.component.ts (ngIf)" linenums="false">
<code-example path="toh-pt2/src/app/app.component.1.html" region="ng-if" title="src/app/app.component.ts (ngIf)" linenums="false">
</code-example>
@@ -401,7 +401,7 @@ like this:
In the template, add the following `[class.selected]` binding to the `<li>`:
<code-example path="toh-2/src/app/app.component.1.html" region="class-selected-1" title="app.component.ts (setting the CSS class)" linenums="false">
<code-example path="toh-pt2/src/app/app.component.1.html" region="class-selected-1" title="app.component.ts (setting the CSS class)" linenums="false">
</code-example>
@@ -425,7 +425,7 @@ Read more about the `[class]` binding in the [Template Syntax](guide/template-sy
The final version of the `<li>` looks like this:
<code-example path="toh-2/src/app/app.component.1.html" region="class-selected-2" title="app.component.ts (styling each hero)" linenums="false">
<code-example path="toh-pt2/src/app/app.component.1.html" region="class-selected-2" title="app.component.ts (styling each hero)" linenums="false">
</code-example>
@@ -443,7 +443,7 @@ After clicking "Magneta", the list should look like this:
Here's the complete `app.component.ts` as of now:
<code-example path="toh-2/src/app/app.component.ts" title="src/app/app.component.ts">
<code-example path="toh-pt2/src/app/app.component.ts" title="src/app/app.component.ts">
</code-example>
@@ -463,4 +463,4 @@ Your app should look like this <live-example></live-example>.
## The road ahead
You've expanded the Tour of Heroes app, but it's far from complete.
An app shouldn't be one monolithic component.
In the [next page](tutorial/toh-pt3), you'll split the app into subcomponents and make them work together.
In the [next page](tutorial/toh-pt3), you'll split the app into subcomponents and make them work together.
aio/content/tutorial/toh-pt3.md
+19 -19
View File
@@ -113,7 +113,7 @@ The `HeroDetailComponent` class goes in the `hero-detail.component.ts` file.
Start writing the `HeroDetailComponent` as follows:
<code-example path="toh-3/app/hero-detail.component.1.ts" region="v1" title="app/hero-detail.component.ts (initial version)" linenums="false">
<code-example path="toh-pt3/app/hero-detail.component.1.ts" region="v1" title="app/hero-detail.component.ts (initial version)" linenums="false">
</code-example>
@@ -142,7 +142,7 @@ Replace the word, "selectedHero", with the word, "hero", everywhere in the templ
When you're done, the new template should look like this:
<code-example path="toh-3/src/app/hero-detail.component.ts" region="template" title="src/app/hero-detail.component.ts (template)" linenums="false">
<code-example path="toh-pt3/src/app/hero-detail.component.ts" region="template" title="src/app/hero-detail.component.ts (template)" linenums="false">
</code-example>
@@ -153,7 +153,7 @@ When you're done, the new template should look like this:
The `HeroDetailComponent` template binds to the component's `hero` property.
Add that property to the `HeroDetailComponent` class like this:
<code-example path="toh-3/app/hero-detail.component.1.ts" region="hero" title="src/app/hero-detail.component.ts (hero property)">
<code-example path="toh-pt3/app/hero-detail.component.1.ts" region="hero" title="src/app/hero-detail.component.ts (hero property)">
</code-example>
@@ -167,7 +167,7 @@ The Angular [style guide](guide/style-guide#rule-of-one "Style guide: rule of on
Move the `Hero` class from `app.component.ts` to its own `hero.ts` file.
<code-example path="toh-3/src/app/hero.ts" title="src/app/hero.ts" linenums="false">
<code-example path="toh-pt3/src/app/hero.ts" title="src/app/hero.ts" linenums="false">
</code-example>
@@ -176,7 +176,7 @@ Move the `Hero` class from `app.component.ts` to its own `hero.ts` file.
Now that the `Hero` class is in its own file, the `AppComponent` and the `HeroDetailComponent` have to import it.
Add the following `import` statement near the top of _both_ the `app.component.ts` and the `hero-detail.component.ts` files.
<code-example path="toh-3/app/hero-detail.component.1.ts" region="hero-import" title="toh-3/app/hero-detail.component.ts">
<code-example path="toh-pt3/app/hero-detail.component.1.ts" region="hero-import" title="src/app/hero-detail.component.ts">
</code-example>
@@ -189,7 +189,7 @@ the parent `AppComponent` will tell the child `HeroDetailComponent` which hero t
by binding its `selectedHero` to the `hero` property of the `HeroDetailComponent`.
The binding will look like this:
<code-example path="toh-3/app/app.component.1.html" region="hero-detail-binding" title="toh-3/app/app.component.html" linenums="false">
<code-example path="toh-pt3/app/app.component.1.html" region="hero-detail-binding" title="src/app/app.component.html" linenums="false">
</code-example>
@@ -202,7 +202,7 @@ Otherwise, Angular rejects the binding and throws an error.
First, amend the `@angular/core` import statement to include the `Input` symbol.
<code-example path="toh-3/src/app/hero-detail.component.ts" region="import-input" title="src/app/hero-detail.component.ts (excerpt)" linenums="false">
<code-example path="toh-pt3/src/app/hero-detail.component.ts" region="import-input" title="src/app/hero-detail.component.ts (excerpt)" linenums="false">
</code-example>
@@ -211,7 +211,7 @@ First, amend the `@angular/core` import statement to include the `Input` symbol.
Then declare that `hero` is an *input* property by
preceding it with the `@Input` decorator that you imported earlier.
<code-example path="toh-3/src/app/hero-detail.component.ts" region="hero" title="src/app/hero-detail.component.ts (excerpt)" linenums="false">
<code-example path="toh-pt3/src/app/hero-detail.component.ts" region="hero" title="src/app/hero-detail.component.ts (excerpt)" linenums="false">
</code-example>
@@ -231,7 +231,7 @@ Read more about _input_ properties in the
That's it. The `hero` property is the only thing in the `HeroDetailComponent` class.
<code-example path="toh-3/src/app/hero-detail.component.ts" region="class" title="toh-3/src/app/hero-detail.component.ts" linenums="false">
<code-example path="toh-pt3/src/app/hero-detail.component.ts" region="class" title="src/src/app/hero-detail.component.ts" linenums="false">
</code-example>
@@ -241,7 +241,7 @@ All it does is receive a hero object through its `hero` input property and then
Here's the complete `HeroDetailComponent`.
<code-example path="toh-3/src/app/hero-detail.component.ts" title="src/app/hero-detail.component.ts">
<code-example path="toh-pt3/src/app/hero-detail.component.ts" title="src/app/hero-detail.component.ts">
</code-example>
@@ -253,7 +253,7 @@ Every component must be declared in one&mdash;and only one&mdash;Angular module.
Open `app.module.ts` in your editor and import the `HeroDetailComponent` so you can refer to it.
<code-example path="toh-3/src/app/app.module.ts" region="hero-detail-import" title="src/app/app.module.ts">
<code-example path="toh-pt3/src/app/app.module.ts" region="hero-detail-import" title="src/app/app.module.ts">
</code-example>
@@ -262,7 +262,7 @@ Open `app.module.ts` in your editor and import the `HeroDetailComponent` so you
Add `HeroDetailComponent` to the module's `declarations` array.
<code-example path="toh-3/src/app/app.module.ts" region="declarations" title="src/app/app.module.ts" linenums="false">
<code-example path="toh-pt3/src/app/app.module.ts" region="declarations" title="src/app/app.module.ts" linenums="false">
</code-example>
@@ -305,7 +305,7 @@ Coordinate the master `AppComponent` with the `HeroDetailComponent`
by binding the `selectedHero` property of the `AppComponent`
to the `hero` property of the `HeroDetailComponent`.
<code-example path="toh-3/app/app.component.1.html" region="hero-detail-binding" title="app.component.ts (excerpt)" linenums="false">
<code-example path="toh-pt3/app/app.component.1.html" region="hero-detail-binding" title="app.component.ts (excerpt)" linenums="false">
</code-example>
@@ -316,7 +316,7 @@ Now every time the `selectedHero` changes, the `HeroDetailComponent` gets a new
The revised `AppComponent` template should look like this:
<code-example path="toh-3/src/app/app.component.ts" region="hero-detail-template" title="app.component.ts (excerpt)" linenums="false">
<code-example path="toh-pt3/src/app/app.component.ts" region="hero-detail-template" title="app.component.ts (excerpt)" linenums="false">
</code-example>
@@ -422,19 +422,19 @@ Here are the code files discussed in this page.
<code-tabs>
<code-pane title="src/app/hero-detail.component.ts" path="toh-3/src/app/hero-detail.component.ts">
<code-pane title="src/app/hero-detail.component.ts" path="toh-pt3/src/app/hero-detail.component.ts">
</code-pane>
<code-pane title="src/app/app.component.ts" path="toh-3/src/app/app.component.ts">
<code-pane title="src/app/app.component.ts" path="toh-pt3/src/app/app.component.ts">
</code-pane>
<code-pane title="src/app/hero.ts" path="toh-3/src/app/hero.ts">
<code-pane title="src/app/hero.ts" path="toh-pt3/src/app/hero.ts">
</code-pane>
<code-pane title="src/app/app.module.ts" path="toh-3/src/app/app.module.ts">
<code-pane title="src/app/app.module.ts" path="toh-pt3/src/app/app.module.ts">
</code-pane>
@@ -464,4 +464,4 @@ That's not sustainable.
Data access should be refactored to a separate service
and shared among the components that need data.
You’ll learn to create services in the [next tutorial](tutorial/toh-pt4) page.
You’ll learn to create services in the [next tutorial](tutorial/toh-pt4) page.
aio/content/tutorial/toh-pt4.md
+22 -22
View File
@@ -147,7 +147,7 @@ For example, the filename for `SpecialSuperHeroService` is `special-super-hero.s
Name the class `HeroService` and export it for others to import.
<code-example path="toh-4/src/app/hero.service.1.ts" region="empty-class" title="src/app/hero.service.ts (starting point)" linenums="false">
<code-example path="toh-pt4/src/app/hero.service.1.ts" region="empty-class" title="src/app/hero.service.ts (starting point)" linenums="false">
</code-example>
@@ -178,7 +178,7 @@ consistency and future-proofing.
Add a `getHeroes()` method stub.
<code-example path="toh-4/src/app/hero.service.1.ts" region="getHeroes-stub" title="src/app/hero.service.ts (getHeroes stub)" linenums="false">
<code-example path="toh-pt4/src/app/hero.service.1.ts" region="getHeroes-stub" title="src/app/hero.service.ts (getHeroes stub)" linenums="false">
</code-example>
@@ -195,7 +195,7 @@ Cut the `HEROES` array from `app.component.ts` and paste it to a new file in the
Additionally, copy the `import {Hero} ...` statement because the heroes array uses the `Hero` class.
<code-example path="toh-4/src/app/mock-heroes.ts" title="src/app/mock-heroes.ts">
<code-example path="toh-pt4/src/app/mock-heroes.ts" title="src/app/mock-heroes.ts">
</code-example>
@@ -206,7 +206,7 @@ The `HEROES` constant is exported so it can be imported elsewhere, such as the `
In `app.component.ts`, where you cut the `HEROES` array,
add an uninitialized `heroes` property:
<code-example path="toh-4/src/app/app.component.1.ts" region="heroes-prop" title="src/app/app.component.ts (heroes property)" linenums="false">
<code-example path="toh-pt4/src/app/app.component.1.ts" region="heroes-prop" title="src/app/app.component.ts (heroes property)" linenums="false">
</code-example>
@@ -216,7 +216,7 @@ add an uninitialized `heroes` property:
Back in the `HeroService`, import the mock `HEROES` and return it from the `getHeroes()` method.
The `HeroService` looks like this:
<code-example path="toh-4/src/app/hero.service.1.ts" region="full" title="src/app/hero.service.ts" linenums="false">
<code-example path="toh-pt4/src/app/hero.service.1.ts" region="full" title="src/app/hero.service.ts" linenums="false">
</code-example>
@@ -227,7 +227,7 @@ You're ready to use the `HeroService` in other components, starting with `AppCom
Import the `HeroService` so that you can reference it in the code.
<code-example path="toh-4/src/app/app.component.ts" linenums="false" title="toh-4/src/app/app.component.ts (hero-service-import)" region="hero-service-import">
<code-example path="toh-pt4/src/app/app.component.ts" linenums="false" title="src/app/app.component.ts (hero-service-import)" region="hero-service-import">
</code-example>
@@ -238,7 +238,7 @@ How should the `AppComponent` acquire a runtime concrete `HeroService` instance?
You could create a new instance of the `HeroService` with `new` like this:
<code-example path="toh-4/src/app/app.component.1.ts" region="new-service" title="toh-4/src/app/app.component.ts" linenums="false">
<code-example path="toh-pt4/src/app/app.component.1.ts" region="new-service" title="src/app/app.component.ts" linenums="false">
</code-example>
@@ -267,7 +267,7 @@ Instead of using the *new* line, you'll add two lines.
Add the constructor:
<code-example path="toh-4/src/app/app.component.1.ts" region="ctor" title="src/app/app.component.ts (constructor)">
<code-example path="toh-pt4/src/app/app.component.1.ts" region="ctor" title="src/app/app.component.ts (constructor)">
</code-example>
@@ -304,7 +304,7 @@ in the `@Component` call.
<code-example path="toh-4/src/app/app.component.1.ts" linenums="false" title="toh-4/src/app/app.component.ts (providers)" region="providers">
<code-example path="toh-pt4/src/app/app.component.1.ts" linenums="false" title="src/app/app.component.ts (providers)" region="providers">
</code-example>
@@ -321,7 +321,7 @@ The service is in a `heroService` private variable.
You could call the service and get the data in one line.
<code-example path="toh-4/src/app/app.component.1.ts" region="get-heroes" title="toh-4/src/app/app.component.ts" linenums="false">
<code-example path="toh-pt4/src/app/app.component.1.ts" region="get-heroes" title="src/app/app.component.ts" linenums="false">
</code-example>
@@ -330,7 +330,7 @@ You could call the service and get the data in one line.
You don't really need a dedicated method to wrap one line. Write it anyway:
<code-example path="toh-4/src/app/app.component.1.ts" linenums="false" title="toh-4/src/app/app.component.ts (getHeroes)" region="getHeroes">
<code-example path="toh-pt4/src/app/app.component.1.ts" linenums="false" title="src/app/app.component.ts (getHeroes)" region="getHeroes">
</code-example>
@@ -362,7 +362,7 @@ Read more about lifecycle hooks in the [Lifecycle Hooks](guide/lifecycle-hooks)
Here's the essential outline for the `OnInit` interface (don't copy this into your code):
<code-example path="toh-4/src/app/app.component.1.ts" region="on-init" title="toh-4/src/app/app.component.ts" linenums="false">
<code-example path="toh-pt4/src/app/app.component.1.ts" region="on-init" title="src/app/app.component.ts" linenums="false">
</code-example>
@@ -379,7 +379,7 @@ Add the implementation for the `OnInit` interface to your export statement:
Write an `ngOnInit` method with the initialization logic inside. Angular will call it
at the right time. In this case, initialize by calling `getHeroes()`.
<code-example path="toh-4/src/app/app.component.1.ts" linenums="false" title="toh-4/src/app/app.component.ts (ng-on-init)" region="ng-on-init">
<code-example path="toh-pt4/src/app/app.component.1.ts" linenums="false" title="src/app/app.component.ts (ng-on-init)" region="ng-on-init">
</code-example>
@@ -393,7 +393,7 @@ when you click on a hero name.
The `HeroService` returns a list of mock heroes immediately;
its `getHeroes()` signature is synchronous.
<code-example path="toh-4/src/app/app.component.1.ts" region="get-heroes" title="toh-4/src/app/app.component.ts" linenums="false">
<code-example path="toh-pt4/src/app/app.component.1.ts" region="get-heroes" title="src/app/app.component.ts" linenums="false">
</code-example>
@@ -429,7 +429,7 @@ This is a simplified explanation. Read more about ES2015 Promises in the
Update the `HeroService` with this Promise-returning `getHeroes()` method:
<code-example path="toh-4/src/app/hero.service.ts" region="get-heroes" title="src/app/hero.service.ts (excerpt)" linenums="false">
<code-example path="toh-pt4/src/app/hero.service.ts" region="get-heroes" title="src/app/hero.service.ts (excerpt)" linenums="false">
</code-example>
@@ -442,7 +442,7 @@ by returning an *immediately resolved Promise* with the mock heroes as the resul
As a result of the change to `HeroService`, `this.heroes` is now set to a `Promise` rather than an array of heroes.
<code-example path="toh-4/src/app/app.component.1.ts" region="getHeroes" title="src/app/app.component.ts (getHeroes - old)" linenums="false">
<code-example path="toh-pt4/src/app/app.component.1.ts" region="getHeroes" title="src/app/app.component.ts (getHeroes - old)" linenums="false">
</code-example>
@@ -453,7 +453,7 @@ When the `Promise` resolves successfully, you'll have heroes to display.
Pass the callback function as an argument to the Promise's `then()` method:
<code-example path="toh-4/src/app/app.component.ts" region="get-heroes" title="src/app/app.component.ts (getHeroes - revised)" linenums="false">
<code-example path="toh-pt4/src/app/app.component.ts" region="get-heroes" title="src/app/app.component.ts (getHeroes - revised)" linenums="false">
</code-example>
@@ -577,15 +577,15 @@ Here are the code files discussed in this page.
<code-tabs>
<code-pane title="src/app/hero.service.ts" path="toh-4/src/app/hero.service.ts">
<code-pane title="src/app/hero.service.ts" path="toh-pt4/src/app/hero.service.ts">
</code-pane>
<code-pane title="src/app/app.component.ts" path="toh-4/src/app/app.component.ts">
<code-pane title="src/app/app.component.ts" path="toh-pt4/src/app/app.component.ts">
</code-pane>
<code-pane title="src/app/mock-heroes.ts" path="toh-4/src/app/mock-heroes.ts">
<code-pane title="src/app/mock-heroes.ts" path="toh-pt4/src/app/mock-heroes.ts">
</code-pane>
@@ -617,7 +617,7 @@ Read about the Angular component router and navigation among the views in the [n
To simulate a slow connection,
import the `Hero` symbol and add the following `getHeroesSlowly()` method to the `HeroService`.
<code-example path="toh-4/src/app/hero.service.ts" region="get-heroes-slowly" title="app/hero.service.ts (getHeroesSlowly)" linenums="false">
<code-example path="toh-pt4/src/app/hero.service.ts" region="get-heroes-slowly" title="app/hero.service.ts (getHeroesSlowly)" linenums="false">
</code-example>
@@ -627,4 +627,4 @@ Like `getHeroes()`, it also returns a `Promise`.
But this Promise waits two seconds before resolving the Promise with mock heroes.
Back in the `AppComponent`, replace `getHeroes()` with `getHeroesSlowly()`
and see how the app behaves.
and see how the app behaves.
aio/content/tutorial/toh-pt5.md
+48 -48
View File
@@ -192,7 +192,7 @@ Do the following:
* Rename the selector `my-app` as `my-heroes`.
<code-example path="toh-5/src/app/heroes.component.ts" region="renaming" title="src/app/heroes.component.ts (showing renamings only)">
<code-example path="toh-pt5/src/app/heroes.component.ts" region="renaming" title="src/app/heroes.component.ts (showing renamings only)">
</code-example>
@@ -224,11 +224,11 @@ The first draft looks like this:
<code-tabs>
<code-pane title="src/app/app.component.ts (v1)" path="toh-5/src/app/app.component.1.ts">
<code-pane title="src/app/app.component.ts (v1)" path="toh-pt5/src/app/app.component.1.ts">
</code-pane>
<code-pane title="src/app/app.module.ts (v1)" path="toh-5/src/app/app.module.1.ts">
<code-pane title="src/app/app.module.ts (v1)" path="toh-pt5/src/app/app.module.1.ts">
</code-pane>
@@ -260,7 +260,7 @@ Open `index.html` and ensure there is a `<base href="...">` element
at the top of the `<head>` section.
<code-example path="toh-5/src/index.html" region="base-href" title="src/index.html (base-href)">
<code-example path="toh-pt5/src/index.html" region="base-href" title="src/index.html (base-href)">
</code-example>
@@ -299,7 +299,7 @@ pastes a URL into the browser address bar.
Define the first route as a route to the heroes component.
<code-example path="toh-5/src/app/app.module.2.ts" region="heroes" title="src/app/app.module.ts (heroes route)">
<code-example path="toh-pt5/src/app/app.module.2.ts" region="heroes" title="src/app/app.module.ts (heroes route)">
</code-example>
@@ -330,7 +330,7 @@ Read more about defining routes with `Routes` in the [Routing & Navigation](guid
Import the `RouterModule` and add it to the `AppModule` imports array.
<code-example path="toh-5/src/app/app.module.2.ts" title="src/app/app.module.ts (app routing)">
<code-example path="toh-pt5/src/app/app.module.2.ts" title="src/app/app.module.ts (app routing)">
</code-example>
@@ -366,7 +366,7 @@ Instead, add an anchor tag to the template that, when clicked, triggers navigati
The revised template looks like this:
<code-example path="toh-5/src/app/app.component.1.ts" region="template-v2" title="src/app/app.component.ts (template-v2)">
<code-example path="toh-pt5/src/app/app.component.1.ts" region="template-v2" title="src/app/app.component.ts (template-v2)">
</code-example>
@@ -414,7 +414,7 @@ and the list of heroes displays.
`AppComponent` now looks like this:
<code-example path="toh-5/src/app/app.component.1.ts" region="v2" title="src/app/app.component.ts (v2)">
<code-example path="toh-pt5/src/app/app.component.1.ts" region="v2" title="src/app/app.component.ts (v2)">
</code-example>
@@ -431,7 +431,7 @@ Routing only makes sense when multiple views exist.
To add another view, create a placeholder `DashboardComponent`, which users can navigate to and from.
<code-example path="toh-5/src/app/dashboard.component.1.ts" title="src/app/dashboard.component.ts (v1)">
<code-example path="toh-pt5/src/app/dashboard.component.1.ts" title="src/app/dashboard.component.ts (v1)">
</code-example>
@@ -446,7 +446,7 @@ import the dashboard component and
add the following route definition to the `Routes` array of definitions.
<code-example path="toh-5/src/app/app.module.3.ts" region="dashboard" title="src/app/app.module.ts (Dashboard route)">
<code-example path="toh-pt5/src/app/app.module.3.ts" region="dashboard" title="src/app/app.module.ts (Dashboard route)">
</code-example>
@@ -455,7 +455,7 @@ add the following route definition to the `Routes` array of definitions.
Also import and add `DashboardComponent` to the `AppModule`'s `declarations`.
<code-example path="toh-5/src/app/app.module.ts" region="dashboard" title="src/app/app.module.ts (dashboard)">
<code-example path="toh-pt5/src/app/app.module.ts" region="dashboard" title="src/app/app.module.ts (dashboard)">
</code-example>
@@ -472,7 +472,7 @@ To make this happen, use a redirect route. Add the following
to the array of route definitions:
<code-example path="toh-5/src/app/app.module.3.ts" region="redirect" title="src/app/app.module.ts (redirect)">
<code-example path="toh-pt5/src/app/app.module.3.ts" region="redirect" title="src/app/app.module.ts (redirect)">
</code-example>
@@ -495,7 +495,7 @@ of the [Routing & Navigation](guide/router) page.
Add a dashboard navigation link to the template, just above the *Heroes* link.
<code-example path="toh-5/src/app/app.component.1.ts" region="template-v3" title="src/app/app.component.ts (template-v3)">
<code-example path="toh-pt5/src/app/app.component.1.ts" region="template-v3" title="src/app/app.component.ts (template-v3)">
</code-example>
@@ -523,7 +523,7 @@ Replace the `template` metadata with a `templateUrl` property that points to a n
template file.
<code-example path="toh-5/src/app/dashboard.component.ts" region="metadata" title="src/app/dashboard.component.ts (metadata)">
<code-example path="toh-pt5/src/app/dashboard.component.ts" region="metadata" title="src/app/dashboard.component.ts (metadata)">
</code-example>
@@ -532,7 +532,7 @@ template file.
Create that file with this content:
<code-example path="toh-5/src/app/dashboard.component.1.html" title="src/app/dashboard.component.html">
<code-example path="toh-pt5/src/app/dashboard.component.1.html" title="src/app/dashboard.component.html">
</code-example>
@@ -555,7 +555,7 @@ Angular injects `HeroService` and you can use it in the `DashboardComponent`.
In <code>dashboard.component.ts</code>, add the following `import` statements.
<code-example path="toh-5/src/app/dashboard.component.ts" region="imports" title="src/app/dashboard.component.ts (imports)">
<code-example path="toh-pt5/src/app/dashboard.component.ts" region="imports" title="src/app/dashboard.component.ts (imports)">
</code-example>
@@ -564,7 +564,7 @@ In <code>dashboard.component.ts</code>, add the following `import` statements.
Now create the `DashboardComponent` class like this:
<code-example path="toh-5/src/app/dashboard.component.ts" region="class" title="src/app/dashboard.component.ts (class)">
<code-example path="toh-pt5/src/app/dashboard.component.ts" region="class" title="src/app/dashboard.component.ts (class)">
</code-example>
@@ -632,7 +632,7 @@ You need to represent the variable part of the route with a *parameter* (or *tok
Use the following *route definition*.
<code-example path="toh-5/src/app/app.module.3.ts" region="hero-detail" title="src/app/app.module.ts (hero detail)">
<code-example path="toh-pt5/src/app/app.module.3.ts" region="hero-detail" title="src/app/app.module.ts (hero detail)">
</code-example>
@@ -687,7 +687,7 @@ in the `ActivatedRoute` service and use the `HeroService` to fetch the hero with
Add the following imports:
<code-example path="toh-5/src/app/hero-detail.component.1.ts" region="added-imports" title="src/app/hero-detail.component.ts">
<code-example path="toh-pt5/src/app/hero-detail.component.1.ts" region="added-imports" title="src/app/hero-detail.component.ts">
</code-example>
@@ -697,7 +697,7 @@ Inject the `ActivatedRoute`, `HeroService`, and `Location` services
into the constructor, saving their values in private fields:
<code-example path="toh-5/src/app/hero-detail.component.ts" region="ctor" title="src/app/hero-detail.component.ts (constructor)">
<code-example path="toh-pt5/src/app/hero-detail.component.ts" region="ctor" title="src/app/hero-detail.component.ts (constructor)">
</code-example>
@@ -706,7 +706,7 @@ into the constructor, saving their values in private fields:
Import the `switchMap` operator to use later with the route parameters `Observable`.
<code-example path="toh-5/src/app/hero-detail.component.ts" region="rxjs-import" title="src/app/hero-detail.component.ts (switchMap import)">
<code-example path="toh-pt5/src/app/hero-detail.component.ts" region="rxjs-import" title="src/app/hero-detail.component.ts (switchMap import)">
</code-example>
@@ -715,7 +715,7 @@ Import the `switchMap` operator to use later with the route parameters `Observab
Tell the class to implement the `OnInit` interface.
<code-example path="toh-5/src/app/hero-detail.component.ts" region="implement" title="src/app/hero-detail.component.ts">
<code-example path="toh-pt5/src/app/hero-detail.component.ts" region="implement" title="src/app/hero-detail.component.ts">
</code-example>
@@ -726,7 +726,7 @@ extract the `id` parameter value from the `ActivatedRoute` service
and use the `HeroService` to fetch the hero with that `id`.
<code-example path="toh-5/src/app/hero-detail.component.ts" region="ngOnInit" title="src/app/hero-detail.component.ts">
<code-example path="toh-pt5/src/app/hero-detail.component.ts" region="ngOnInit" title="src/app/hero-detail.component.ts">
</code-example>
@@ -766,7 +766,7 @@ In the previous code snippet, `HeroService` doesn't have a `getHero()` method. T
open `HeroService` and add a `getHero()` method that filters the heroes list from `getHeroes()` by `id`.
<code-example path="toh-5/src/app/hero.service.ts" region="getHero" title="src/app/hero.service.ts (getHero)">
<code-example path="toh-pt5/src/app/hero.service.ts" region="getHero" title="src/app/hero.service.ts (getHero)">
</code-example>
@@ -781,7 +781,7 @@ Now add a third option, a `goBack()` method that navigates backward one step in
using the `Location` service you injected previously.
<code-example path="toh-5/src/app/hero-detail.component.ts" region="goBack" title="src/app/hero-detail.component.ts (goBack)">
<code-example path="toh-pt5/src/app/hero-detail.component.ts" region="goBack" title="src/app/hero-detail.component.ts (goBack)">
</code-example>
@@ -803,7 +803,7 @@ Read more on the [CanDeactivate](api/router/index/CanDeactivate-interface) page.
You'll wire this method with an event binding to a *Back* button that you'll add to the component template.
<code-example path="toh-5/src/app/hero-detail.component.html" region="back-button">
<code-example path="toh-pt5/src/app/hero-detail.component.html" region="back-button">
</code-example>
@@ -813,7 +813,7 @@ Migrate the template to its own file
called <code>hero-detail.component.html</code>:
<code-example path="toh-5/src/app/hero-detail.component.html" title="src/app/hero-detail.component.html">
<code-example path="toh-pt5/src/app/hero-detail.component.html" title="src/app/hero-detail.component.html">
</code-example>
@@ -823,7 +823,7 @@ Update the component metadata with a `templateUrl` pointing to the template file
<code-example path="toh-5/src/app/hero-detail.component.ts" region="metadata" title="src/app/hero-detail.component.ts (metadata)">
<code-example path="toh-pt5/src/app/hero-detail.component.ts" region="metadata" title="src/app/hero-detail.component.ts (metadata)">
</code-example>
@@ -845,7 +845,7 @@ To achieve this effect, reopen `dashboard.component.html` and replace the repeat
with `<a>` tags. Change the opening `<a>` tag to the following:
<code-example path="toh-5/src/app/dashboard.component.html" region="click" title="src/app/dashboard.component.html (repeated &lt;a&gt; tag)">
<code-example path="toh-pt5/src/app/dashboard.component.html" region="click" title="src/app/dashboard.component.html (repeated &lt;a&gt; tag)">
</code-example>
@@ -865,7 +865,7 @@ token in the parameterized hero detail route definition that you added to
`app.module.ts` earlier:
<code-example path="toh-5/src/app/app.module.3.ts" region="hero-detail" title="src/app/app.module.ts (hero detail)">
<code-example path="toh-pt5/src/app/app.module.3.ts" region="hero-detail" title="src/app/app.module.ts (hero detail)">
</code-example>
@@ -898,7 +898,7 @@ Create an `app-routing.module.ts` file as a sibling to `app.module.ts`.
Give it the following contents, extracted from the `AppModule` class:
<code-example path="toh-5/src/app/app-routing.module.ts" title="src/app/app-routing.module.ts">
<code-example path="toh-pt5/src/app/app-routing.module.ts" title="src/app/app-routing.module.ts">
</code-example>
@@ -923,8 +923,8 @@ Use an ES `import` statement *and* add it to the `NgModule.imports` list.
Here is the revised `AppModule`, compared to its pre-refactor state:
<code-tabs>
<code-pane path="toh-5/src/app/app.module.ts" title="src/app/app.module.ts (after)"></code-pane>
<code-pane path="toh-5/src/app/app.module.3.ts" title="src/app/app.module.ts (before)"></code-pane>
<code-pane path="toh-pt5/src/app/app.module.ts" title="src/app/app.module.ts (after)"></code-pane>
<code-pane path="toh-pt5/src/app/app.module.3.ts" title="src/app/app.module.ts (before)"></code-pane>
</code-tabs>
The revised and simplified `AppModule` is focused on identifying the key pieces of the app.
@@ -957,7 +957,7 @@ Instead, they'll see a mini detail on *this* page and have to click a button to
Add the following HTML fragment at the bottom of the template where the `<hero-detail>` used to be:
<code-example path="toh-5/src/app/heroes.component.html" region="mini-detail" title="src/app/heroes.component.ts">
<code-example path="toh-pt5/src/app/heroes.component.html" region="mini-detail" title="src/app/heroes.component.ts">
</code-example>
@@ -978,7 +978,7 @@ The hero's name is displayed in capital letters because of the `uppercase` pipe
that's included in the interpolation binding, right after the pipe operator ( | ).
<code-example path="toh-5/src/app/heroes.component.html" region="pipe">
<code-example path="toh-pt5/src/app/heroes.component.html" region="pipe">
</code-example>
@@ -1020,11 +1020,11 @@ The two new files should look like this:
<code-tabs>
<code-pane title="src/app/heroes.component.html" path="toh-5/src/app/heroes.component.html">
<code-pane title="src/app/heroes.component.html" path="toh-pt5/src/app/heroes.component.html">
</code-pane>
<code-pane title="src/app/heroes.component.css" path="toh-5/src/app/heroes.component.css">
<code-pane title="src/app/heroes.component.css" path="toh-pt5/src/app/heroes.component.css">
</code-pane>
@@ -1038,7 +1038,7 @@ delete `template` and `styles`, replacing them with
Set their properties to refer to the new files.
<code-example path="toh-5/src/app/heroes.component.ts" region="metadata" title="src/app/heroes.component.ts (revised metadata)">
<code-example path="toh-pt5/src/app/heroes.component.ts" region="metadata" title="src/app/heroes.component.ts (revised metadata)">
</code-example>
@@ -1069,7 +1069,7 @@ This approach requires the following changes to the component class:
1. Implement `gotoDetail()` by calling the router `navigate()` method.
<code-example path="toh-5/src/app/heroes.component.ts" region="gotoDetail" title="src/app/heroes.component.ts (gotoDetail)">
<code-example path="toh-pt5/src/app/heroes.component.ts" region="gotoDetail" title="src/app/heroes.component.ts (gotoDetail)">
</code-example>
@@ -1082,7 +1082,7 @@ back in the `DashboardComponent`.
Here's the revised `HeroesComponent` class:
<code-example path="toh-5/src/app/heroes.component.ts" region="class" title="src/app/heroes.component.ts (class)">
<code-example path="toh-pt5/src/app/heroes.component.ts" region="class" title="src/app/heroes.component.ts (class)">
</code-example>
@@ -1110,7 +1110,7 @@ Add a <code>dashboard.component.css</code> file to the `app` folder and referenc
that file in the component metadata's `styleUrls` array property like this:
<code-example path="toh-5/src/app/dashboard.component.ts" region="css" title="src/app/dashboard.component.ts (styleUrls)">
<code-example path="toh-pt5/src/app/dashboard.component.ts" region="css" title="src/app/dashboard.component.ts (styleUrls)">
</code-example>
@@ -1131,11 +1131,11 @@ Here's the content for the component CSS files.
<code-tabs>
<code-pane title="src/app/hero-detail.component.css" path="toh-5/src/app/hero-detail.component.css">
<code-pane title="src/app/hero-detail.component.css" path="toh-pt5/src/app/hero-detail.component.css">
</code-pane>
<code-pane title="src/app/dashboard.component.css" path="toh-5/src/app/dashboard.component.css">
<code-pane title="src/app/dashboard.component.css" path="toh-pt5/src/app/dashboard.component.css">
</code-pane>
@@ -1151,7 +1151,7 @@ You'll surround those links in `<nav>` tags.
Add an <code>app.component.css</code> file to the `app` folder with the following content.
<code-example path="toh-5/src/app/app.component.css" title="src/app/app.component.css (navigation styles)">
<code-example path="toh-pt5/src/app/app.component.css" title="src/app/app.component.css (navigation styles)">
</code-example>
@@ -1172,7 +1172,7 @@ All you have to do is define the style for it.
<code-example path="toh-5/src/app/app.component.ts" region="template" title="src/app/app.component.ts (active router links)">
<code-example path="toh-pt5/src/app/app.component.ts" region="template" title="src/app/app.component.ts (active router links)">
</code-example>
@@ -1181,7 +1181,7 @@ All you have to do is define the style for it.
Add a `styleUrls` property that refers to this CSS file as follows:
<code-example path="toh-5/src/app/app.component.ts" region="styleUrls" title="toh-5/src/app/app.component.ts">
<code-example path="toh-pt5/src/app/app.component.ts" region="styleUrls" title="src/app/app.component.ts">
</code-example>
@@ -1200,7 +1200,7 @@ These correspond to the full set of master styles that you installed earlier dur
Here's an excerpt:
<code-example path="toh-5/src/styles.css" region="toh" title="src/styles.css (excerpt)">
<code-example path="toh-pt5/src/styles.css" region="toh" title="src/styles.css (excerpt)">
</code-example>
@@ -1211,7 +1211,7 @@ Ensure that the file contains the [master styles provided here](https://raw.gith
Also edit <code>index.html</code> to refer to this stylesheet.
<code-example path="toh-5/src/index.html" region="css" title="src/index.html (link ref)">
<code-example path="toh-pt5/src/index.html" region="css" title="src/index.html (link ref)">
</code-example>
aio/content/tutorial/toh-pt6.md
+45 -45
View File
@@ -69,7 +69,7 @@ To allow access to these services from anywhere in the app,
add `HttpModule` to the `imports` list of the `AppModule`.
<code-example path="toh-6/src/app/app.module.ts" region="v1" title="src/app/app.module.ts (v1)">
<code-example path="toh-pt6/src/app/app.module.ts" region="v1" title="src/app/app.module.ts (v1)">
</code-example>
@@ -90,7 +90,7 @@ a mock service, the *in-memory web API*.
Update <code>src/app/app.module.ts</code> with this version, which uses the mock service:
<code-example path="toh-6/src/app/app.module.ts" region="v2" title="src/app/app.module.ts (v2)">
<code-example path="toh-pt6/src/app/app.module.ts" region="v2" title="src/app/app.module.ts (v2)">
</code-example>
@@ -101,7 +101,7 @@ Rather than require a real API server, this example simulates communication with
to the module `imports`, effectively replacing the `Http` client's XHR backend service with an in-memory alternative.
<code-example path="toh-6/src/app/app.module.ts" region="in-mem-web-api">
<code-example path="toh-pt6/src/app/app.module.ts" region="in-mem-web-api">
</code-example>
@@ -112,7 +112,7 @@ that primes the in-memory database.
Add the file `in-memory-data.service.ts` in `app` with the following content:
<code-example path="toh-6/src/app/in-memory-data.service.ts" region="init" title="src/app/in-memory-data.service.ts" linenums="false">
<code-example path="toh-pt6/src/app/in-memory-data.service.ts" region="init" title="src/app/in-memory-data.service.ts" linenums="false">
</code-example>
@@ -156,7 +156,7 @@ fetching heroes with an HTTP client, which must be an asynchronous operation.
Now convert `getHeroes()` to use HTTP.
<code-example path="toh-6/src/app/hero.service.ts" region="getHeroes" title="src/app/hero.service.ts (updated getHeroes and new class members)">
<code-example path="toh-pt6/src/app/hero.service.ts" region="getHeroes" title="src/app/hero.service.ts (updated getHeroes and new class members)">
</code-example>
@@ -165,7 +165,7 @@ Now convert `getHeroes()` to use HTTP.
Update the import statements as follows:
<code-example path="toh-6/src/app/hero.service.ts" region="imports" title="src/app/hero.service.ts (updated imports)">
<code-example path="toh-pt6/src/app/hero.service.ts" region="imports" title="src/app/hero.service.ts (updated imports)">
</code-example>
@@ -184,7 +184,7 @@ You'll read about [Observables](tutorial/toh-pt6#observables) later in this page
For now, you've converted the `Observable` to a `Promise` using the `toPromise` operator.
<code-example path="toh-6/src/app/hero.service.ts" region="to-promise">
<code-example path="toh-pt6/src/app/hero.service.ts" region="to-promise">
</code-example>
@@ -197,7 +197,7 @@ To use those capabilities, you have to add the operators themselves.
That's as easy as importing them from the RxJS library like this:
<code-example path="toh-6/src/app/hero.service.ts" region="rxjs">
<code-example path="toh-pt6/src/app/hero.service.ts" region="rxjs">
</code-example>
@@ -220,7 +220,7 @@ In the *Promise*'s `then()` callback, you call the `json` method of the HTTP `Re
data within the response.
<code-example path="toh-6/src/app/hero.service.ts" region="to-data">
<code-example path="toh-pt6/src/app/hero.service.ts" region="to-data">
</code-example>
@@ -252,7 +252,7 @@ It receives a Promise of *heroes* just as it did before.
At the end of `getHeroes()`, you `catch` server failures and pass them to an error handler.
<code-example path="toh-6/src/app/hero.service.ts" region="catch">
<code-example path="toh-pt6/src/app/hero.service.ts" region="catch">
</code-example>
@@ -262,7 +262,7 @@ This is a critical step.
You must anticipate HTTP failures, as they happen frequently for reasons beyond your control.
<code-example path="toh-6/src/app/hero.service.ts" region="handleError">
<code-example path="toh-pt6/src/app/hero.service.ts" region="handleError">
</code-example>
@@ -285,7 +285,7 @@ Most web APIs support a _get-by-id_ request in the form `api/hero/:id` (such as
Update the `HeroService.getHero()` method to make a _get-by-id_ request:
<code-example path="toh-6/src/app/hero.service.ts" region="getHero" title="src/app/hero.service.ts">
<code-example path="toh-pt6/src/app/hero.service.ts" region="getHero" title="src/app/hero.service.ts">
</code-example>
@@ -325,7 +325,7 @@ At the end of the hero detail template, add a save button with a `click` event
binding that invokes a new component method named `save()`.
<code-example path="toh-6/src/app/hero-detail.component.html" region="save" title="src/app/hero-detail.component.html (save)">
<code-example path="toh-pt6/src/app/hero-detail.component.html" region="save" title="src/app/hero-detail.component.html (save)">
</code-example>
@@ -335,7 +335,7 @@ Add the following `save()` method, which persists hero name changes using the he
`update()` method and then navigates back to the previous view.
<code-example path="toh-6/src/app/hero-detail.component.ts" region="save" title="src/app/hero-detail.component.ts (save)">
<code-example path="toh-pt6/src/app/hero-detail.component.ts" region="save" title="src/app/hero-detail.component.ts (save)">
</code-example>
@@ -348,7 +348,7 @@ The overall structure of the `update()` method is similar to that of
<code-example path="toh-6/src/app/hero.service.ts" region="update" title="src/app/hero.service.ts (update)">
<code-example path="toh-pt6/src/app/hero.service.ts" region="update" title="src/app/hero.service.ts (update)">
</code-example>
@@ -373,7 +373,7 @@ Insert the following into the heroes component HTML, just after
the heading:
<code-example path="toh-6/src/app/heroes.component.html" region="add" title="src/app/heroes.component.html (add)">
<code-example path="toh-pt6/src/app/heroes.component.html" region="add" title="src/app/heroes.component.html (add)">
</code-example>
@@ -383,7 +383,7 @@ In response to a click event, call the component's click handler and then
clear the input field so that it's ready for another name.
<code-example path="toh-6/src/app/heroes.component.ts" region="add" title="src/app/heroes.component.ts (add)">
<code-example path="toh-pt6/src/app/heroes.component.ts" region="add" title="src/app/heroes.component.ts (add)">
</code-example>
@@ -394,7 +394,7 @@ named hero to the hero service, and then adds the new hero to the array.
Implement the `create()` method in the `HeroService` class.
<code-example path="toh-6/src/app/hero.service.ts" region="create" title="src/app/hero.service.ts (create)">
<code-example path="toh-pt6/src/app/hero.service.ts" region="create" title="src/app/hero.service.ts (create)">
</code-example>
@@ -412,7 +412,7 @@ Add the following button element to the heroes component HTML, after the hero
name in the repeated `<li>` element.
<code-example path="toh-6/src/app/heroes.component.html" region="delete">
<code-example path="toh-pt6/src/app/heroes.component.html" region="delete">
</code-example>
@@ -421,7 +421,7 @@ name in the repeated `<li>` element.
The `<li>` element should now look like this:
<code-example path="toh-6/src/app/heroes.component.html" region="li-element" title="src/app/heroes.component.html (li-element)">
<code-example path="toh-pt6/src/app/heroes.component.html" region="li-element" title="src/app/heroes.component.html (li-element)">
</code-example>
@@ -435,7 +435,7 @@ select the hero that the user will delete.
The logic of the `delete()` handler is a bit trickier:
<code-example path="toh-6/src/app/heroes.component.ts" region="delete" title="src/app/heroes.component.ts (delete)">
<code-example path="toh-pt6/src/app/heroes.component.ts" region="delete" title="src/app/heroes.component.ts (delete)">
</code-example>
@@ -450,7 +450,7 @@ To place the delete button at the far right of the hero entry,
add this CSS:
<code-example path="toh-6/src/app/heroes.component.css" region="additions" title="src/app/heroes.component.css (additions)">
<code-example path="toh-pt6/src/app/heroes.component.css" region="additions" title="src/app/heroes.component.css (additions)">
</code-example>
@@ -461,7 +461,7 @@ add this CSS:
Add the hero service's `delete()` method, which uses the `delete()` HTTP method to remove the hero from the server:
<code-example path="toh-6/src/app/hero.service.ts" region="delete" title="src/app/hero.service.ts (delete)">
<code-example path="toh-pt6/src/app/hero.service.ts" region="delete" title="src/app/hero.service.ts (delete)">
</code-example>
@@ -514,7 +514,7 @@ As the user types a name into a search box, you'll make repeated HTTP requests f
Start by creating `HeroSearchService` that sends search queries to the server's web API.
<code-example path="toh-6/src/app/hero-search.service.ts" title="src/app/hero-search.service.ts">
<code-example path="toh-pt6/src/app/hero-search.service.ts" title="src/app/hero-search.service.ts">
</code-example>
@@ -538,7 +538,7 @@ Create a `HeroSearchComponent` that calls the new `HeroSearchService`.
The component template is simple&mdash;just a text box and a list of matching search results.
<code-example path="toh-6/src/app/hero-search.component.html" title="src/app/hero-search.component.html">
<code-example path="toh-pt6/src/app/hero-search.component.html" title="src/app/hero-search.component.html">
</code-example>
@@ -546,7 +546,7 @@ The component template is simple&mdash;just a text box and a list of matching se
Also, add styles for the new component.
<code-example path="toh-6/src/app/hero-search.component.css" title="src/app/hero-search.component.css">
<code-example path="toh-pt6/src/app/hero-search.component.css" title="src/app/hero-search.component.css">
</code-example>
@@ -564,7 +564,7 @@ The `async` pipe subscribes to the `Observable` and produces the array of heroes
Create the `HeroSearchComponent` class and metadata.
<code-example path="toh-6/src/app/hero-search.component.ts" title="src/app/hero-search.component.ts">
<code-example path="toh-pt6/src/app/hero-search.component.ts" title="src/app/hero-search.component.ts">
</code-example>
@@ -575,7 +575,7 @@ Create the `HeroSearchComponent` class and metadata.
Focus on the `searchTerms`:
<code-example path="toh-6/src/app/hero-search.component.ts" region="searchTerms">
<code-example path="toh-pt6/src/app/hero-search.component.ts" region="searchTerms">
</code-example>
@@ -597,7 +597,7 @@ You can turn the stream
of search terms into a stream of `Hero` arrays and assign the result to the `heroes` property.
<code-example path="toh-6/src/app/hero-search.component.ts" region="search">
<code-example path="toh-pt6/src/app/hero-search.component.ts" region="search">
</code-example>
@@ -659,7 +659,7 @@ When you need more RxJS features, extend `Observable` by *importing* the librar
Here are all the RxJS imports that _this_ component needs:
<code-example path="toh-6/src/app/hero-search.component.ts" region="rxjs-imports" title="src/app/hero-search.component.ts (rxjs imports)" linenums="false">
<code-example path="toh-pt6/src/app/hero-search.component.ts" region="rxjs-imports" title="src/app/hero-search.component.ts (rxjs imports)" linenums="false">
</code-example>
@@ -678,7 +678,7 @@ loads and executes the library's script file which, in turn, adds the operator t
Add the hero search HTML element to the bottom of the `DashboardComponent` template.
<code-example path="toh-6/src/app/dashboard.component.html" title="src/app/dashboard.component.html" linenums="false">
<code-example path="toh-pt6/src/app/dashboard.component.html" title="src/app/dashboard.component.html" linenums="false">
</code-example>
@@ -689,7 +689,7 @@ Finally, import `HeroSearchComponent` from
and add it to the `declarations` array.
<code-example path="toh-6/src/app/app.module.ts" region="search" title="src/app/app.module.ts (search)">
<code-example path="toh-pt6/src/app/app.module.ts" region="search" title="src/app/app.module.ts (search)">
</code-example>
@@ -866,39 +866,39 @@ Here are the files you added or changed in this page.
<code-tabs>
<code-pane title="app.comp...ts" path="toh-6/src/app/app.component.ts">
<code-pane title="app.comp...ts" path="toh-pt6/src/app/app.component.ts">
</code-pane>
<code-pane title="app.mod...ts" path="toh-6/src/app/app.module.ts">
<code-pane title="app.mod...ts" path="toh-pt6/src/app/app.module.ts">
</code-pane>
<code-pane title="heroes.comp...ts" path="toh-6/src/app/heroes.component.ts">
<code-pane title="heroes.comp...ts" path="toh-pt6/src/app/heroes.component.ts">
</code-pane>
<code-pane title="heroes.comp...html" path="toh-6/src/app/heroes.component.html">
<code-pane title="heroes.comp...html" path="toh-pt6/src/app/heroes.component.html">
</code-pane>
<code-pane title="heroes.comp...css" path="toh-6/src/app/heroes.component.css">
<code-pane title="heroes.comp...css" path="toh-pt6/src/app/heroes.component.css">
</code-pane>
<code-pane title="hero-detail.comp...ts" path="toh-6/src/app/hero-detail.component.ts">
<code-pane title="hero-detail.comp...ts" path="toh-pt6/src/app/hero-detail.component.ts">
</code-pane>
<code-pane title="hero-detail.comp...html" path="toh-6/src/app/hero-detail.component.html">
<code-pane title="hero-detail.comp...html" path="toh-pt6/src/app/hero-detail.component.html">
</code-pane>
<code-pane title="hero.service.ts" path="toh-6/src/app/hero.service.ts">
<code-pane title="hero.service.ts" path="toh-pt6/src/app/hero.service.ts">
</code-pane>
<code-pane title="in-memory-data.service.ts" path="toh-6/src/app/in-memory-data.service.ts">
<code-pane title="in-memory-data.service.ts" path="toh-pt6/src/app/in-memory-data.service.ts">
</code-pane>
@@ -908,19 +908,19 @@ Here are the files you added or changed in this page.
<code-tabs>
<code-pane title="hero-search.service.ts" path="toh-6/src/app/hero-search.service.ts">
<code-pane title="hero-search.service.ts" path="toh-pt6/src/app/hero-search.service.ts">
</code-pane>
<code-pane title="hero-search.component.ts" path="toh-6/src/app/hero-search.component.ts">
<code-pane title="hero-search.component.ts" path="toh-pt6/src/app/hero-search.component.ts">
</code-pane>
<code-pane title="hero-search.component.html" path="toh-6/src/app/hero-search.component.html">
<code-pane title="hero-search.component.html" path="toh-pt6/src/app/hero-search.component.html">
</code-pane>
<code-pane title="hero-search.component.css" path="toh-6/src/app/hero-search.component.css">
<code-pane title="hero-search.component.css" path="toh-pt6/src/app/hero-search.component.css">
</code-pane>