diff --git a/aio/content/tutorial/toh-pt0.md b/aio/content/tutorial/toh-pt0.md index 48f80d723b..28c017e74c 100644 --- a/aio/content/tutorial/toh-pt0.md +++ b/aio/content/tutorial/toh-pt0.md @@ -9,6 +9,11 @@ In this part of the tutorial, you'll do the following: 3. Serve the application. 4. Make changes to the application. +
+ + For the sample app that this page describes, see the . + +
## Set up your environment @@ -113,9 +118,6 @@ Open `src/styles.css` and add the code below to the file. ## Final code review -The source code for this tutorial and the complete _Tour of Heroes_ global styles -are available in the . - Here are the code files discussed on this page. diff --git a/aio/content/tutorial/toh-pt1.md b/aio/content/tutorial/toh-pt1.md index 9b84306af6..777105a2ba 100644 --- a/aio/content/tutorial/toh-pt1.md +++ b/aio/content/tutorial/toh-pt1.md @@ -4,6 +4,12 @@ The application now has a basic title. Next you will create a new component to display hero information and place that component in the application shell. +
+ + For the sample app that this page describes, see the . + +
+ ## Create the heroes component Using the Angular CLI, generate a new component named `heroes`. @@ -201,7 +207,7 @@ Note that `AppModule` declares both application components, `AppComponent` and ## Final code review -Your app should look like this . Here are the code files discussed on this page. +Here are the code files discussed on this page. diff --git a/aio/content/tutorial/toh-pt2.md b/aio/content/tutorial/toh-pt2.md index e80fda62b3..d2522d1438 100644 --- a/aio/content/tutorial/toh-pt2.md +++ b/aio/content/tutorial/toh-pt2.md @@ -3,6 +3,12 @@ In this page, you'll expand the Tour of Heroes app to display a list of heroes, and allow users to select a hero and display the hero's details. +
+ + For the sample app that this page describes, see the . + +
+ ## Create mock heroes @@ -220,8 +226,6 @@ The finished `
  • ` looks like this: ## Final code review -Your app should look like this . - Here are the code files discussed on this page, including the `HeroesComponent` styles. diff --git a/aio/content/tutorial/toh-pt3.md b/aio/content/tutorial/toh-pt3.md index 9e8a4dbd58..322988cb49 100644 --- a/aio/content/tutorial/toh-pt3.md +++ b/aio/content/tutorial/toh-pt3.md @@ -10,6 +10,12 @@ In this page, you'll take the first step in that direction by moving the hero de The `HeroesComponent` will only present the list of heroes. The `HeroDetailComponent` will present details of a selected hero. +
    + + For the sample app that this page describes, see the . + +
    + ## Make the `HeroDetailComponent` Use the Angular CLI to generate a new component named `hero-detail`. @@ -136,7 +142,7 @@ without touching the parent `HeroesComponent`. ## Final code review -Here are the code files discussed on this page and your app should look like this . +Here are the code files discussed on this page. diff --git a/aio/content/tutorial/toh-pt4.md b/aio/content/tutorial/toh-pt4.md index fe03b14a6e..d09f68d955 100644 --- a/aio/content/tutorial/toh-pt4.md +++ b/aio/content/tutorial/toh-pt4.md @@ -5,6 +5,13 @@ The Tour of Heroes `HeroesComponent` is currently getting and displaying fake da After the refactoring in this tutorial, `HeroesComponent` will be lean and focused on supporting the view. It will also be easier to unit-test with a mock service. +
    + + For the sample app that this page describes, see the . + +
    + + ## Why services Components shouldn't fetch or save data directly and they certainly shouldn't knowingly present fake data. @@ -387,7 +394,7 @@ the selection. Use the "clear" button to clear the message history. ## Final code review -Here are the code files discussed on this page and your app should look like this . +Here are the code files discussed on this page. diff --git a/aio/content/tutorial/toh-pt5.md b/aio/content/tutorial/toh-pt5.md index a4da560ff2..9b700751af 100644 --- a/aio/content/tutorial/toh-pt5.md +++ b/aio/content/tutorial/toh-pt5.md @@ -7,6 +7,12 @@ There are new requirements for the Tour of Heroes app: * When users click a hero name in either view, navigate to a detail view of the selected hero. * When users click a *deep link* in an email, open the detail view for a particular hero. +
    + + For the sample app that this page describes, see the . + +
    + When you’re done, users will be able to navigate the app like this:
    @@ -466,7 +472,7 @@ from heroes list to the mini detail to the hero details and back to the heroes a ## Final code review -Here are the code files discussed on this page and your app should look like this . +Here are the code files discussed on this page. {@a approutingmodule} {@a appmodule} diff --git a/aio/content/tutorial/toh-pt6.md b/aio/content/tutorial/toh-pt6.md index 4b33cef9aa..2a982a58a8 100644 --- a/aio/content/tutorial/toh-pt6.md +++ b/aio/content/tutorial/toh-pt6.md @@ -7,7 +7,11 @@ Angular's `HttpClient`. * Users can add, edit, and delete heroes and save these changes over HTTP. * Users can search for heroes by name. -When you're done with this page, the app should look like this . +
    + + For the sample app that this page describes, see the . + +
    ## Enable HTTP services @@ -519,8 +523,6 @@ If you enter characters that match any existing hero names, you'll see something ## Final code review -Your app should look like this . - Here are the code files discussed on this page (all in the `src/app/` folder). {@a heroservice}