docs(aio): fix paths to images
This commit is contained in:
Peter Bacon Darwin
committed by
Igor Minar
Igor Minar
parent
0d63e2a586
commit
b70c881c00
@ -34,7 +34,7 @@ Here's a visual idea of where we're going in this tour, beginning with the "Dash
|
||||
view and our most heroic heroes:
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='/resources/images/devguide/toh/heroes-dashboard-1.png' alt="Output of heroes dashboard"> </img>
|
||||
<img src='assets/images/devguide/toh/heroes-dashboard-1.png' alt="Output of heroes dashboard"> </img>
|
||||
</figure>
|
||||
|
||||
Above the dashboard are two links ("Dashboard" and "Heroes").
|
||||
@ -44,7 +44,7 @@ Instead we click the dashboard hero named "Magneta" and the router takes us to a
|
||||
of that hero where we can change the hero's name.
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='/resources/images/devguide/toh/hero-details-1.png' alt="Details of hero in app"> </img>
|
||||
<img src='assets/images/devguide/toh/hero-details-1.png' alt="Details of hero in app"> </img>
|
||||
</figure>
|
||||
|
||||
Clicking the "Back" button would return us to the "Dashboard".
|
||||
@ -52,7 +52,7 @@ Links at the top can take us to either of the main views.
|
||||
We'll click "Heroes". The app takes to the "Heroes" master list view.
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='/resources/images/devguide/toh/heroes-list-2.png' alt="Output of heroes list app"> </img>
|
||||
<img src='assets/images/devguide/toh/heroes-list-2.png' alt="Output of heroes list app"> </img>
|
||||
</figure>
|
||||
|
||||
We click a different hero and the readonly mini-detail beneath the list reflects our new choice.
|
||||
@ -63,13 +63,13 @@ editable details of our selected hero.
|
||||
The following diagram captures all of our navigation options.
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='/resources/images/devguide/toh/nav-diagram.png' alt="View navigations"> </img>
|
||||
<img src='assets/images/devguide/toh/nav-diagram.png' alt="View navigations"> </img>
|
||||
</figure>
|
||||
|
||||
Here's our app in action
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='/resources/images/devguide/toh/toh-anim.gif' alt="Tour of Heroes in Action"> </img>
|
||||
<img src='assets/images/devguide/toh/toh-anim.gif' alt="Tour of Heroes in Action"> </img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
||||
@ -306,7 +306,7 @@ For example, when we select Magneta from the heroes list,
|
||||
we can make it pop out visually by giving it a subtle background color as shown here.
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='/resources/images/devguide/toh/heroes-list-selected.png' alt="Selected hero"> </img>
|
||||
<img src='assets/images/devguide/toh/heroes-list-selected.png' alt="Selected hero"> </img>
|
||||
</figure>
|
||||
|
||||
We’ll add a property binding on `class` for the `selected` class to the template. We'll set this to an expression that compares the current `selectedHero` to the `hero`.
|
||||
@ -329,7 +329,7 @@ The browser reloads our app.
|
||||
We select the hero Magneta and the selection is clearly identified by the background color.
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='/resources/images/devguide/toh/heroes-list-1.png' alt="Output of heroes list app"> </img>
|
||||
<img src='assets/images/devguide/toh/heroes-list-1.png' alt="Output of heroes list app"> </img>
|
||||
</figure>
|
||||
|
||||
We select a different hero and the tell-tale color switches to that hero.
|
||||
|
||||
@ -15,7 +15,7 @@ We received new requirements for our Tour of Heroes application:
|
||||
When we’re done, users will be able to navigate the app like this:
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='/resources/images/devguide/toh/nav-diagram.png' alt="View navigations"> </img>
|
||||
<img src='assets/images/devguide/toh/nav-diagram.png' alt="View navigations"> </img>
|
||||
</figure>
|
||||
|
||||
We'll add Angular’s *Router* to our app to satisfy these requirements.
|
||||
@ -93,6 +93,27 @@ Instead of displaying heroes automatically, we'd like to show them *after* the u
|
||||
In other words, we'd like to navigate to the list of heroes.
|
||||
|
||||
We'll need the Angular *Router*.
|
||||
### *<base href>*
|
||||
|
||||
Open `index.html` and ensure there is a `<base href="...">` element
|
||||
(or a script that dynamically sets this element)
|
||||
at the top of the `<head>` section.
|
||||
|
||||
|
||||
~~~ {.callout.is-important}
|
||||
|
||||
|
||||
<header>
|
||||
base href is essential
|
||||
</header>
|
||||
|
||||
See the *base href* section of the [router](../guide/router.html#base-href)
|
||||
guide to learn why this matters, and what to add if the `base`
|
||||
element is missing.
|
||||
|
||||
|
||||
~~~
|
||||
|
||||
|
||||
|
||||
{@a configure-routes}
|
||||
@ -322,7 +343,7 @@ Although the dashboard heroes are presented as button-like blocks, they should b
|
||||
When hovering over a hero block, the target URL should display in the browser status bar
|
||||
and the user should be able to copy the link or open the hero detail view in a new tab.
|
||||
|
||||
To achieve this effect, reopen the `dashboard.component.html` and replace the repeated `<div *ngFor...>` tags
|
||||
To achieve this effect, reopen the <span ngio-ex>dashboard.component.html</span> and replace the repeated `<div *ngFor...>` tags
|
||||
with `<a>` tags. The opening `<a>` tag looks like this:
|
||||
|
||||
|
||||
@ -374,7 +395,7 @@ Add the following HTML fragment at the bottom of the template where the `<my-her
|
||||
After clicking a hero, the user should see something like this below the hero list:
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='/resources/images/devguide/toh/mini-hero-detail.png' alt="Mini Hero Detail" height="70"> </img>
|
||||
<img src='assets/images/devguide/toh/mini-hero-detail.png' alt="Mini Hero Detail" height="70"> </img>
|
||||
</figure>
|
||||
|
||||
### Format with the *uppercase* pipe
|
||||
@ -420,7 +441,7 @@ back in the `DashboardComponent`.
|
||||
Here's the fully revised `HeroesComponent` class:
|
||||
Refresh the browser and start clicking.
|
||||
We can navigate around the app, from the dashboard to hero details and back,
|
||||
for heroes list to the mini-detail to the hero details and back to the heroes again.
|
||||
from heroes list to the mini-detail to the hero details and back to the heroes again.
|
||||
We can jump back and forth between the dashboard and the heroes.
|
||||
|
||||
We've met all of the navigational requirements that propelled this chapter.
|
||||
@ -478,7 +499,7 @@ If necessary, also edit <span ngio-ex>index.html</span> to refer to this stylesh
|
||||
Look at the app now. Our dashboard, heroes, and navigation links are styling!
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='/resources/images/devguide/toh/dashboard-top-heroes.png' alt="View navigations"> </img>
|
||||
<img src='assets/images/devguide/toh/dashboard-top-heroes.png' alt="View navigations"> </img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
||||
@ -266,7 +266,7 @@ Run the app again, go to the *Dashboard*, and enter some text in the search box.
|
||||
At some point it might look like this.
|
||||
|
||||
<figure class='image-display'>
|
||||
<img src='/resources/images/devguide/toh/toh-hero-search.png' alt="Hero Search Component"> </img>
|
||||
<img src='assets/images/devguide/toh/toh-hero-search.png' alt="Hero Search Component"> </img>
|
||||
</figure>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user