Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: place download section in toh to the top #36567

Closed
wants to merge 2 commits into from
Closed

docs: place download section in toh to the top #36567

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0faf438
docs: place download section in toh to the top
ajitsinghkaler Apr 10, 2020
c7bf2fb
fixup! docs: place download section in toh to the top
ajitsinghkaler Apr 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 5 additions & 3 deletions aio/content/tutorial/toh-pt0.md
View file
Open in desktop
Expand Up @@ -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.

<div class="alert is-helpful">

For the sample app that this page describes, see the <live-example></live-example>.

</div>

## Set up your environment

Expand Down Expand Up @@ -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 <live-example></live-example>.

Here are the code files discussed on this page.

<code-tabs>
Expand Down
8 changes: 7 additions & 1 deletion aio/content/tutorial/toh-pt1.md
View file
Open in desktop
Expand Up @@ -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.

<div class="alert is-helpful">

For the sample app that this page describes, see the <live-example></live-example>.

</div>

## Create the heroes component

Using the Angular CLI, generate a new component named `heroes`.
Expand Down Expand Up @@ -201,7 +207,7 @@ Note that `AppModule` declares both application components, `AppComponent` and

## Final code review

Your app should look like this <live-example></live-example>. Here are the code files discussed on this page.
Here are the code files discussed on this page.

<code-tabs>

Expand Down
8 changes: 6 additions & 2 deletions aio/content/tutorial/toh-pt2.md
View file
Open in desktop
Expand Up @@ -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.

<div class="alert is-helpful">

For the sample app that this page describes, see the <live-example></live-example>.

</div>


## Create mock heroes

Expand Down Expand Up @@ -220,8 +226,6 @@ The finished `<li>` looks like this:

## Final code review

Your app should look like this <live-example></live-example>.

Here are the code files discussed on this page, including the `HeroesComponent` styles.

<code-tabs>
Expand Down
8 changes: 7 additions & 1 deletion aio/content/tutorial/toh-pt3.md
View file
Open in desktop
Expand Up @@ -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.

<div class="alert is-helpful">

For the sample app that this page describes, see the <live-example></live-example>.

</div>

## Make the `HeroDetailComponent`

Use the Angular CLI to generate a new component named `hero-detail`.
Expand Down Expand Up @@ -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 <live-example></live-example>.
Here are the code files discussed on this page.

<code-tabs>

Expand Down
9 changes: 8 additions & 1 deletion aio/content/tutorial/toh-pt4.md
View file
Open in desktop
Expand Up @@ -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.

<div class="alert is-helpful">

For the sample app that this page describes, see the <live-example></live-example>.

</div>


## Why services

Components shouldn't fetch or save data directly and they certainly shouldn't knowingly present fake data.
Expand Down Expand Up @@ -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 <live-example></live-example>.
Here are the code files discussed on this page.

<code-tabs>

Expand Down
8 changes: 7 additions & 1 deletion aio/content/tutorial/toh-pt5.md
View file
Open in desktop
Expand Up @@ -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.

<div class="alert is-helpful">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After looking at the preview, I think you might consider putting this link above the image, to make it more visible at the top of the page.
I would put it right after the bullet list.


For the sample app that this page describes, see the <live-example></live-example>.

</div>

When you’re done, users will be able to navigate the app like this:

<div class="lightbox">
Expand Down Expand Up @@ -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 <live-example></live-example>.
Here are the code files discussed on this page.

{@a approutingmodule}
{@a appmodule}
Expand Down
8 changes: 5 additions & 3 deletions aio/content/tutorial/toh-pt6.md
View file
Open in desktop
Expand Up @@ -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 <live-example></live-example>.
<div class="alert is-helpful">

For the sample app that this page describes, see the <live-example></live-example>.

</div>

## Enable HTTP services

Expand Down Expand Up @@ -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 <live-example></live-example>.

Here are the code files discussed on this page (all in the `src/app/` folder).

{@a heroservice}
Expand Down