honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(Tutorial): minor repairs to toh-4 

close #602
John's comments
Fix for https://github.com/johnpapa/angular2-tour-of-heroes/issues/41
This commit is contained in:
Ward Bell 2015-12-22 10:25:30 -08:00
parent c2e1b55f6c
commit 5bec58577f
2 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/docs/_examples/toh-4/ts/app/hero.service.ts
View File

@ -15,7 +15,7 @@ export class HeroService {
// See the "Take it slow" appendix // See the "Take it slow" appendix
//#docregion get-heroes-slowly //#docregion get-heroes-slowly
getHeroesSlowly() { getHeroesSlowly() {
return new Promise(resolve => return new Promise<Hero[]>(resolve =>
setTimeout(()=>resolve(HEROES), 2000) // 2 seconds setTimeout(()=>resolve(HEROES), 2000) // 2 seconds
); );
} }

12
public/docs/ts/latest/tutorial/toh-pt4.jade
View File

@ -156,7 +156,7 @@ code-example(format="." language="bash").
Will we need different mocked versions under test? Will we need different mocked versions under test?
Not easy. Not easy.
*What if ... what if ... Dude! We've got work to do!* *What if ... what if ... Hey, we've got work to do!*
We get it. Really we do. We get it. Really we do.
But it is so ridiculously easy to avoid these problems that there is no excuse for doing it wrong. But it is so ridiculously easy to avoid these problems that there is no excuse for doing it wrong.
@ -303,6 +303,10 @@ code-example(format="." language="html").
We pass our callback function as an argument to the promise's **then** method: We pass our callback function as an argument to the promise's **then** method:
+makeExample('toh-4/ts/app/app.component.ts', 'get-heroes', 'app.component.ts (getHeroes - revised)')(format=".") +makeExample('toh-4/ts/app/app.component.ts', 'get-heroes', 'app.component.ts (getHeroes - revised)')(format=".")
.l-sub-section
:marked
The [ES2015 arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
in the callback is more succint than the equivalent function expression and gracefully handles *this*.
:marked :marked
Our callback sets the component's `heroes` property to the array of heroes returned by the service. That's all there is to it! Our callback sets the component's `heroes` property to the array of heroes returned by the service. That's all there is to it!
@ -382,10 +386,8 @@ code-example(format="." language="html").
### Appendix: Shadowing the parent's service ### Appendix: Shadowing the parent's service
We stated [earlier](#child-component) that if we injected the parent `AppComponent` `HeroService` We stated [earlier](#child-component) that if we injected the parent `AppComponent` `HeroService`
into the `HeroDetailComponent`, *we must not add a providers array* like the following into the `HeroDetailComponent`, *we must not add a providers array* to the `HeroDetailComponent` metadata.
to the `HeroDetailComponent`.
+makeExample('toh-4/ts/app/app.component.1.ts', 'providers', 'No! Don\'t do this!')
:marked
Why? Because that tells Angular to create a new instance of the `HeroService` at the `HeroDetailComponent` level. Why? Because that tells Angular to create a new instance of the `HeroService` at the `HeroDetailComponent` level.
The `HeroDetailComponent` doesn't want its *own* service instance; it wants its *parent's* service instance. The `HeroDetailComponent` doesn't want its *own* service instance; it wants its *parent's* service instance.
Adding the `providers` array creates a new service instance that shadows the parent instance. Adding the `providers` array creates a new service instance that shadows the parent instance.