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

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

Browse Source 
this is part of a larger effort to standardise download sections on angular.io

This commit partially addresses #35459

PR Close #36567
This commit is contained in:
ajitsinghkaler 2020-04-10 22:40:59 +05:30 committed by atscott
parent db11a0ddbf
commit 0cb0f66c17
7 changed files with 45 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
aio/content/tutorial/toh-pt0.md
View File

@ -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
@ -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>

8
aio/content/tutorial/toh-pt1.md
View File

@ -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`.
@ -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>

8
aio/content/tutorial/toh-pt2.md
View File

@ -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
@ -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>

8
aio/content/tutorial/toh-pt3.md
View File

@ -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`.
@ -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>

9
aio/content/tutorial/toh-pt4.md
View File

@ -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.
@ -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>

8
aio/content/tutorial/toh-pt5.md
View File

@ -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">
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">
@ -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}

8
aio/content/tutorial/toh-pt6.md
View File

@ -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
@ -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}