docs(toh): add instructions to add the goBack method

closes #1478
This commit is contained in:
Foxandxss 2016-05-23 14:55:37 +02:00 committed by Ward Bell
parent 129b34c77e
commit 508b779a41
2 changed files with 13 additions and 6 deletions

View File

@ -46,9 +46,11 @@ export class HeroDetailComponent implements OnInit {
.catch(error => this.error = error); // TODO: Display error message .catch(error => this.error = error); // TODO: Display error message
} }
// #enddocregion save // #enddocregion save
// #docregion goback
goBack(savedHero: Hero = null) { goBack(savedHero: Hero = null) {
this.close.emit(savedHero); this.close.emit(savedHero);
if (this.navigated) { window.history.back(); } if (this.navigated) { window.history.back(); }
} }
// #enddocregion goback
} }

View File

@ -220,19 +220,24 @@ code-example(format="." language="bash").
### Add/Edit in the *HeroDetailComponent* ### Add/Edit in the *HeroDetailComponent*
We already have `HeroDetailComponent` for viewing details about a specific hero. Add and Edit are natural extensions of the detail view, so we are able to reuse `DetailHeroComponent` with a few tweaks. The original component was created to render existing data, but to add new data we have to initialize the `hero` property to an empty `Hero` object. We already have `HeroDetailComponent` for viewing details about a specific hero. Add and Edit are natural extensions of the detail view, so we are able to reuse `DetailHeroComponent` with a few tweaks. The original component was created to render existing data, but to add new data we have to initialize the `hero` property to an empty `Hero` object.
+makeExample('toh-6/ts/app/hero-detail.component.ts', 'ngOnInit', 'app/hero-detail.component.ts (ngOnInit)')(format=".") +makeExample('toh-6/ts/app/hero-detail.component.ts', 'ngOnInit', 'app/hero-detail.component.ts (ngOnInit)')(format=".")
:marked :marked
In order to differentiate between add and edit we are adding a check to see if an id is passed in the url. If the id is absent we bind `HeroDetailComponent` to an empty `Hero` object. In either case, any edits made through the UI will be bound back to the same `hero` property. In order to differentiate between add and edit we are adding a check to see if an id is passed in the url. If the id is absent we bind `HeroDetailComponent` to an empty `Hero` object. In either case, any edits made through the UI will be bound back to the same `hero` property.
The next step is to add a save method to `HeroDetailComponent` and call the corresponding save method in `HeroesService`. The next step is to add a save method to `HeroDetailComponent` and call the corresponding save method in `HeroesService`.
+makeExample('toh-6/ts/app/hero-detail.component.ts', 'save', 'app/hero-detail.component.ts (save)')(format=".") +makeExample('toh-6/ts/app/hero-detail.component.ts', 'save', 'app/hero-detail.component.ts (save)')(format=".")
:marked :marked
The same save method is used for both add and edit since `HeroService` will know when to call `post` vs `put` based on the state of the `Hero` object. The same save method is used for both add and edit since `HeroService` will know when to call `post` vs `put` based on the state of the `Hero` object.
Earlier we used the `save()` method to return a promise, so when the promise resolves, we call `emit` to notify `HeroesComponent` that we just added or modified a hero. `HeroesComponent` is listening for this notification and will automatically refresh the list of heroes to include our recent updates. After we save a hero, we redirect the browser back to the to the previous page using the `goBack()` method.
+makeExample('toh-6/ts/app/hero-detail.component.ts', 'goback', 'app/hero-detail.component.ts (goBack)')(format=".")
:marked
Here we call `emit` to notify that we just added or modified a hero. `HeroesComponent` is listening for this notification and will automatically refresh the list of heroes to include our recent updates.
.l-sub-section .l-sub-section
:marked :marked
@ -242,7 +247,7 @@ code-example(format="." language="bash").
Here is `HeroDetailComponent` with its new save button. Here is `HeroDetailComponent` with its new save button.
figure.image-display figure.image-display
img(src='/resources/images/devguide/toh/hero-details-save-button.png' alt="Hero Details With Save Button") img(src='/resources/images/devguide/toh/hero-details-save-button.png' alt="Hero Details With Save Button")
:marked :marked
### Add/Delete in the *HeroesComponent* ### Add/Delete in the *HeroesComponent*
@ -254,12 +259,12 @@ figure.image-display
As we noted above, that is the component's cue to create and present an empty hero. As we noted above, that is the component's cue to create and present an empty hero.
Add the following HTML to the `heroes.component.html`, just below the hero list (the `*ngFor`). Add the following HTML to the `heroes.component.html`, just below the hero list (the `*ngFor`).
+makeExample('toh-6/ts/app/heroes.component.html', 'add-hero', 'app/heroes.component.ts (add)')(format=".") +makeExample('toh-6/ts/app/heroes.component.html', 'add-hero', 'app/heroes.component.ts (add)')(format=".")
:marked :marked
The user can *delete* an existing hero by clicking a delete button next to the hero's name. The user can *delete* an existing hero by clicking a delete button next to the hero's name.
Add the following HTML to the `heroes.component.html` right after the name in the repeated `<li>` tag: Add the following HTML to the `heroes.component.html` right after the name in the repeated `<li>` tag:
+makeExample('toh-6/ts/app/heroes.component.html', 'delete-hero', 'app/heroes.component.ts (delete)')(format=".") +makeExample('toh-6/ts/app/heroes.component.html', 'delete-hero', 'app/heroes.component.ts (delete)')(format=".")
:marked :marked
Now let's fix-up the `HeroesComponent` to support the *add* and *delete* actions in the template. Now let's fix-up the `HeroesComponent` to support the *add* and *delete* actions in the template.