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

docs: improve accessibility of tohpt4 (#40622)

Browse Source 
PR Close #40622
This commit is contained in:
Kapunahele Wong 2021-01-28 16:42:32 -05:00 committed by atscott
parent 4d1299bd82
commit bd6f377db2
6 changed files with 35 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.css
View File

@ -0,0 +1,3 @@
input {
padding: .5rem;
}

5
aio/content/examples/toh-pt4/src/app/hero-detail/hero-detail.component.html
View File

@ -2,8 +2,7 @@
<h2>{{hero.name | uppercase}} Details</h2> <h2>{{hero.name | uppercase}} Details</h2>
<div><span>id: </span>{{hero.id}}</div> <div><span>id: </span>{{hero.id}}</div>
<div> <div>
<label>name: <label for="hero-name">Hero name: </label>
<input [(ngModel)]="hero.name" placeholder="name"/> <input id="hero-name" [(ngModel)]="hero.name" placeholder="name"/>
</label>
</div> </div>
</div> </div>

17
aio/content/examples/toh-pt4/src/app/heroes/heroes.component.css
View File

@ -16,16 +16,24 @@
border-radius: 4px; border-radius: 4px;
} }
.heroes li:hover { .heroes li:hover {
color: #607D8B; color: #2c3a41;
background-color: #DDD; background-color: #e6e6e6;
left: .1em; left: .1em;
} }
.heroes li:active {
background-color: #525252;
color: #fafafa;
}
.heroes li.selected { .heroes li.selected {
background-color: #CFD8DC; background-color: black;
color: white; color: white;
} }
.heroes li.selected:hover { .heroes li.selected:hover {
background-color: #BBD8DC; background-color: #505050;
color: white;
}
.heroes li.selected:active {
background-color: black;
color: white; color: white;
} }
.heroes .badge { .heroes .badge {
@ -42,3 +50,4 @@
margin-right: .8em; margin-right: .8em;
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
} }

15
aio/content/examples/toh-pt4/src/app/messages/messages.component.css
View File

@ -1,20 +1,19 @@
/* MessagesComponent's private CSS styles */ /* MessagesComponent's private CSS styles */
h2 { h2 {
color: red; color: #A80000;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-weight: lighter; font-weight: lighter;
} }
button.clear { .clear {
font-family: Arial, sans-serif;
color: #333; color: #333;
background-color: #eee; background-color: #eee;
margin-bottom: 12px; margin-bottom: 12px;
border: none; padding: 1rem;
padding: 5px 10px;
border-radius: 4px; border-radius: 4px;
cursor: pointer; font-size: 1rem;
} }
button:hover { .clear:hover {
background-color: #cfd8dc; color: white;
background-color: #42545C;
} }

2
aio/content/examples/toh-pt4/src/app/messages/messages.component.html
View File

@ -2,7 +2,7 @@
<h2>Messages</h2> <h2>Messages</h2>
<button class="clear" <button class="clear"
(click)="messageService.clear()">clear</button> (click)="messageService.clear()">Clear messages</button>
<div *ngFor='let message of messageService.messages'> {{message}} </div> <div *ngFor='let message of messageService.messages'> {{message}} </div>
</div> </div>

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

@ -7,7 +7,7 @@ It will also be easier to unit-test with a mock service.
<div class="alert is-helpful"> <div class="alert is-helpful">
For the sample app that this page describes, see the <live-example></live-example>. For the sample application that this page describes, see the <live-example></live-example>.
</div> </div>
@ -79,7 +79,7 @@ before Angular can _inject_ it into the `HeroesComponent` by registering a _prov
To make sure that the `HeroService` can provide this service, register it To make sure that the `HeroService` can provide this service, register it
with the _injector_, which is the object that is responsible for choosing with the _injector_, which is the object that is responsible for choosing
and injecting the provider where the app requires it. and injecting the provider where the application requires it.
By default, the Angular CLI command `ng generate service` registers a provider with the _root injector_ for your service by including provider metadata, that is `providedIn: 'root'` in the `@Injectable()` decorator. By default, the Angular CLI command `ng generate service` registers a provider with the _root injector_ for your service by including provider metadata, that is `providedIn: 'root'` in the `@Injectable()` decorator.
@ -90,7 +90,7 @@ By default, the Angular CLI command `ng generate service` registers a provider w
``` ```
When you provide the service at the root level, Angular creates a single, shared instance of `HeroService` and injects into any class that asks for it. When you provide the service at the root level, Angular creates a single, shared instance of `HeroService` and injects into any class that asks for it.
Registering the provider in the `@Injectable` metadata also allows Angular to optimize an app by removing the service if it turns out not to be used after all. Registering the provider in the `@Injectable` metadata also allows Angular to optimize an application by removing the service if it turns out not to be used after all.
<div class="alert is-helpful"> <div class="alert is-helpful">
@ -118,7 +118,7 @@ Import the `HeroService` instead.
<code-example path="toh-pt4/src/app/heroes/heroes.component.ts" header="src/app/heroes/heroes.component.ts (import HeroService)" region="hero-service-import"> <code-example path="toh-pt4/src/app/heroes/heroes.component.ts" header="src/app/heroes/heroes.component.ts (import HeroService)" region="hero-service-import">
</code-example> </code-example>
Replace the definition of the `heroes` property with a simple declaration. Replace the definition of the `heroes` property with a declaration.
<code-example path="toh-pt4/src/app/heroes/heroes.component.ts" header="src/app/heroes/heroes.component.ts" region="heroes"> <code-example path="toh-pt4/src/app/heroes/heroes.component.ts" header="src/app/heroes/heroes.component.ts" region="heroes">
</code-example> </code-example>
@ -150,7 +150,7 @@ Create a method to retrieve the heroes from the service.
While you could call `getHeroes()` in the constructor, that's not the best practice. While you could call `getHeroes()` in the constructor, that's not the best practice.
Reserve the constructor for simple initialization such as wiring constructor parameters to properties. Reserve the constructor for minimal initialization such as wiring constructor parameters to properties.
The constructor shouldn't _do anything_. The constructor shouldn't _do anything_.
It certainly shouldn't call a function that makes HTTP requests to a remote server as a _real_ data service would. It certainly shouldn't call a function that makes HTTP requests to a remote server as a _real_ data service would.
@ -162,7 +162,7 @@ let Angular call `ngOnInit()` at an appropriate time _after_ constructing a `Her
### See it run ### See it run
After the browser refreshes, the app should run as before, After the browser refreshes, the application should run as before,
showing a list of heroes and a hero detail view when you click on a hero name. showing a list of heroes and a hero detail view when you click on a hero name.
## Observable data ## Observable data
@ -177,7 +177,7 @@ as if heroes could be fetched synchronously.
This will not work in a real app. This will not work in a real app.
You're getting away with it now because the service currently returns _mock heroes_. You're getting away with it now because the service currently returns _mock heroes_.
But soon the app will fetch heroes from a remote server, But soon the application will fetch heroes from a remote server,
which is an inherently _asynchronous_ operation. which is an inherently _asynchronous_ operation.
The `HeroService` must wait for the server to respond, The `HeroService` must wait for the server to respond,
@ -256,7 +256,7 @@ the `HeroService` requests heroes from the server.
This section guides you through the following: This section guides you through the following:
* adding a `MessagesComponent` that displays app messages at the bottom of the screen * adding a `MessagesComponent` that displays application messages at the bottom of the screen
* creating an injectable, app-wide `MessageService` for sending messages to be displayed * creating an injectable, app-wide `MessageService` for sending messages to be displayed
* injecting `MessageService` into the `HeroService` * injecting `MessageService` into the `HeroService`
* displaying a message when `HeroService` fetches heroes successfully * displaying a message when `HeroService` fetches heroes successfully
@ -387,7 +387,7 @@ path="toh-pt4/src/app/heroes/heroes.component.ts">
Refresh the browser to see the list of heroes, and scroll to the bottom to see the Refresh the browser to see the list of heroes, and scroll to the bottom to see the
messages from the HeroService. Each time you click a hero, a new message appears to record messages from the HeroService. Each time you click a hero, a new message appears to record
the selection. Use the "clear" button to clear the message history. the selection. Use the **Clear messages** button to clear the message history.
{@a final-code-review} {@a final-code-review}