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

docs(toh-5/ts): minor edits

Browse Source 
closes #1644
This commit is contained in:
Patrice Chalin 2016-06-10 09:37:33 -07:00 committed by Ward Bell
parent 4dcea96b6d
commit fd46bf4970
16 changed files with 94 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/docs/_examples/toh-5/ts/app/app.component.1.ts
View File

@ -11,7 +11,6 @@ import { HeroesComponent } from './heroes.component';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
// #docregion
@Component({
selector: 'my-app',
template: `
@ -20,13 +19,12 @@ import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/route
`,
directives: [HeroesComponent],
providers: [
// #enddocregion
// #enddocregion
ROUTER_PROVIDERS,
// #docregion
// #docregion
HeroService
]
})
export class AppComponent {
title = 'Tour of Heroes';
}
// #enddocregion

7
public/docs/_examples/toh-5/ts/app/app.component.2.ts
View File

@ -10,14 +10,14 @@ import { HeroesComponent } from './heroes.component';
@Component({
selector: 'my-app',
// #docregion template
// #docregion template
template: `
<h1>{{title}}</h1>
<a [routerLink]="['Heroes']">Heroes</a>
<router-outlet></router-outlet>
`,
// #enddocregion template
// #docregion directives-and-providers
// #enddocregion template
// #docregion directives-and-providers
directives: [ROUTER_DIRECTIVES],
providers: [
ROUTER_PROVIDERS,
@ -37,4 +37,3 @@ import { HeroesComponent } from './heroes.component';
export class AppComponent {
title = 'Tour of Heroes';
}
// #enddocregion

4
public/docs/_examples/toh-5/ts/app/app.component.css
View File

@ -1,5 +1,4 @@
/* #docplaster */
/* #docregion css */
/* #docregion */
h1 {
font-size: 1.2em;
color: #999;
@ -28,4 +27,3 @@ nav a:hover {
nav a.router-link-active {
color: #039be5;
}
/* #enddocregion css */

17
public/docs/_examples/toh-5/ts/app/app.component.ts
View File

@ -12,7 +12,7 @@ import { HeroService } from './hero.service';
@Component({
selector: 'my-app',
// #docregion template
// #docregion template
template: `
<h1>{{title}}</h1>
<nav>
@ -21,10 +21,10 @@ import { HeroService } from './hero.service';
</nav>
<router-outlet></router-outlet>
`,
// #enddocregion template
// #docregion style-urls
// #enddocregion template
// #docregion style-urls
styleUrls: ['app/app.component.css'],
// #enddocregion style-urls
// #enddocregion style-urls
directives: [ROUTER_DIRECTIVES],
providers: [
ROUTER_PROVIDERS,
@ -32,21 +32,21 @@ import { HeroService } from './hero.service';
]
})
@RouteConfig([
// #docregion dashboard-route
// #docregion dashboard-route
{
path: '/dashboard',
name: 'Dashboard',
component: DashboardComponent,
useAsDefault: true
},
// #enddocregion dashboard-route
// #docregion hero-detail-route
// #enddocregion dashboard-route
// #docregion hero-detail-route
{
path: '/detail/:id',
name: 'HeroDetail',
component: HeroDetailComponent
},
// #enddocregion hero-detail-route
// #enddocregion hero-detail-route
{
path: '/heroes',
name: 'Heroes',
@ -56,4 +56,3 @@ import { HeroService } from './hero.service';
export class AppComponent {
title = 'Tour of Heroes';
}
// #enddocregion

1
public/docs/_examples/toh-5/ts/app/dashboard.component.2.ts
View File

@ -24,4 +24,3 @@ export class DashboardComponent implements OnInit {
gotoDetail() { /* not implemented yet */}
}
// #enddocregion component

2
public/docs/_examples/toh-5/ts/app/dashboard.component.css
View File

@ -1,4 +1,3 @@
/* #docplaster */
/* #docregion */
[class*='col-'] {
float: left;
@ -60,4 +59,3 @@ h4 {
min-width: 60px;
}
}
/* #enddocregion */

4
public/docs/_examples/toh-5/ts/app/dashboard.component.html
View File

@ -1,9 +1,9 @@
<!-- #docregion -->
<h3>Top Heroes</h3>
<div class="grid grid-pad">
<!-- #docregion click -->
<!-- #docregion click -->
<div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
<!-- #enddocregion click -->
<!-- #enddocregion click -->
<div class="module hero">
<h4>{{hero.name}}</h4>
</div>

5
public/docs/_examples/toh-5/ts/app/dashboard.component.ts
View File

@ -22,12 +22,12 @@ export class DashboardComponent implements OnInit {
heroes: Hero[] = [];
// #docregion ctor
// #docregion ctor
constructor(
private router: Router,
private heroService: HeroService) {
}
// #enddocregion ctor
// #enddocregion ctor
ngOnInit() {
this.heroService.getHeroes()
@ -41,4 +41,3 @@ export class DashboardComponent implements OnInit {
}
// #enddocregion goto-detail
}
// #enddocregion

22
public/docs/_examples/toh-5/ts/app/hero-detail.component.ts
View File

@ -1,7 +1,6 @@
// #docplaster
// #docregion
// #docregion v2
// #docregion import-oninit
// #docregion import-oninit, v2
import { Component, OnInit } from '@angular/core';
// #enddocregion import-oninit
// #docregion import-route-params
@ -18,25 +17,24 @@ import { HeroService } from './hero.service';
selector: 'my-hero-detail',
// #docregion template-url
templateUrl: 'app/hero-detail.component.html',
// #enddocregion template-url
// #enddocregion v2
// #enddocregion template-url, v2
styleUrls: ['app/hero-detail.component.css']
// #docregion v2
// #docregion v2
})
// #enddocregion extract-template
// #docregion implement
export class HeroDetailComponent implements OnInit {
// #enddocregion implement
// #enddocregion implement
hero: Hero;
// #docregion ctor
// #docregion ctor
constructor(
private heroService: HeroService,
private routeParams: RouteParams) {
}
// #enddocregion ctor
// #enddocregion ctor
// #docregion ng-oninit
// #docregion ng-oninit
ngOnInit() {
// #docregion get-id
let id = +this.routeParams.get('id');
@ -44,13 +42,11 @@ export class HeroDetailComponent implements OnInit {
this.heroService.getHero(id)
.then(hero => this.hero = hero);
}
// #enddocregion ng-oninit
// #enddocregion ng-oninit
// #docregion go-back
// #docregion go-back
goBack() {
window.history.back();
}
// #enddocregion go-back
}
// #enddocregion v2
// #enddocregion

1
public/docs/_examples/toh-5/ts/app/hero.service.ts
View File

@ -24,4 +24,3 @@ export class HeroService {
}
// #enddocregion get-hero
}
// #enddocregion

2
public/docs/_examples/toh-5/ts/app/heroes.component.html
View File

@ -17,5 +17,3 @@
</h2>
<button (click)="gotoDetail()">View Details</button>
</div>
<!-- #enddocregion mini-detail -->
<!-- #enddocregion -->

20
public/docs/_examples/toh-5/ts/app/heroes.component.ts
View File

@ -6,21 +6,18 @@ import { Router } from '@angular/router-deprecated';
import { Hero } from './hero';
import { HeroService } from './hero.service';
// #docregion metadata
// #docregion heroes-component-renaming
// #docregion heroes-component-renaming, metadata
@Component({
selector: 'my-heroes',
// #enddocregion heroes-component-renaming
// #enddocregion heroes-component-renaming
templateUrl: 'app/heroes.component.html',
styleUrls: ['app/heroes.component.css']
// #docregion heroes-component-renaming
// #docregion heroes-component-renaming
})
// #enddocregion heroes-component-renaming
// #enddocregion metadata
// #docregion class
// #docregion heroes-component-renaming
// #enddocregion heroes-component-renaming, metadata
// #docregion class, heroes-component-renaming
export class HeroesComponent implements OnInit {
// #enddocregion heroes-component-renaming
// #enddocregion heroes-component-renaming
heroes: Hero[];
selectedHero: Hero;
@ -41,8 +38,5 @@ export class HeroesComponent implements OnInit {
gotoDetail() {
this.router.navigate(['HeroDetail', { id: this.selectedHero.id }]);
}
// #docregion heroes-component-renaming
// #docregion heroes-component-renaming
}
// #enddocregion heroes-component-renaming
// #enddocregion class
// #enddocregion

1
public/docs/_examples/toh-5/ts/app/mock-heroes.ts
View File

@ -13,4 +13,3 @@ export var HEROES: Hero[] = [
{id: 19, name: 'Magma'},
{id: 20, name: 'Tornado'}
];
// #enddocregion

2
public/docs/_examples/toh-5/ts/index.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<!-- #docregion head -->
<!-- #docregion base-href -->
<!-- #docregion base-href -->
<head>
<base href="/">
<!-- #enddocregion base-href -->

28
public/docs/_examples/toh-5/ts/styles.1.css
View File

@ -1,5 +1,11 @@
/* #docregion */
h2 {
/* #docregion toh-excerpt */
/* Master Styles */
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
h2, h3 {
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
@ -11,23 +17,7 @@ body, input[text], button {
color: #888;
font-family: Cambria, Georgia;
}
button {
font-family: Arial;
background-color: #eee;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
cursor: hand;
}
button:hover {
background-color: #cfd8dc;
}
button:disabled {
background-color: #eee;
color: #aaa;
cursor: auto;
}
/* . . . */
/* everywhere else */
* {
font-family: Arial, Helvetica, sans-serif;

94
public/docs/ts/latest/tutorial/toh-pt5.jade
View File

@ -3,10 +3,10 @@ include ../_util-fns
:marked
# Routing Around the App
We received new requirements for our Tour of Heroes application:
* add a *Dashboard* view.
* navigate between the *Heroes* and *Dashboard* views.
* clicking on a hero in either view navigates to a detail view of the selected hero.
* clicking a *deep link* in an email opens the detail view for a particular hero;
* Add a *Dashboard* view.
* Navigate between the *Heroes* and *Dashboard* views.
* Clicking on a hero in either view navigates to a detail view of the selected hero.
* Clicking a *deep link* in an email opens the detail view for a particular hero;
When we’re done, users will be able to navigate the app like this:
figure.image-display
@ -16,7 +16,7 @@ figure.image-display
.l-sub-section
:marked
The [Routing and Navigation](../guide/router-deprecated.html) chapter covers the router in more detail
than we will in this tour.
than we will in this tutorial.
p Run the #[+liveExampleLink2('', 'toh-5')] for this part.
@ -65,10 +65,10 @@ code-example(language="bash").
## Action plan
Here's our plan
* turn `AppComponent` into an application shell that only handles navigation.
* relocate the *Heroes* concerns within the current `AppComponent` to a separate `HeroesComponent`
* add routing
* create a new `DashboardComponent`
* turn `AppComponent` into an application shell that only handles navigation,
* relocate the *Heroes* concerns within the current `AppComponent` to a separate `HeroesComponent`,
* add routing,
* create a new `DashboardComponent`,
* tie the *Dashboard* into the navigation structure.
.l-sub-section
@ -91,13 +91,13 @@ code-example(language="bash").
Instead of moving anything out of `AppComponent`, we'll just rename it `HeroesComponent`
and create a new `AppComponent` shell separately.
The steps are:
* rename `app.component.ts` file to `heroes.component.ts`.
* rename the `AppComponent` class to `HeroesComponent`.
* rename the selector `my-app` to `my-heroes`.
The steps are: rename the
* `app.component.ts` file to `heroes.component.ts`,
* `AppComponent` class to `HeroesComponent`,
* selector `my-app` to `my-heroes`.
:marked
+makeExample('toh-5/ts/app/heroes.component.ts', 'heroes-component-renaming', 'app/heroes.component.ts (renaming)')(format=".")
+makeExample('toh-5/ts/app/heroes.component.ts', 'heroes-component-renaming', 'app/heroes.component.ts (showing renamings only)')(format=".")
:marked
## Create *AppComponent*
@ -154,10 +154,10 @@ code-example(language="bash").
The Angular router is a combination of multiple services (`ROUTER_PROVIDERS`), multiple directives (`ROUTER_DIRECTIVES`),
and a configuration decorator (`RouteConfig`). We'll import them all together:
+makeExample('toh-5/ts/app/app.component.2.ts', 'import-router', 'app.component.ts (router imports)')(format=".")
+makeExample('toh-5/ts/app/app.component.2.ts', 'import-router', 'app/app.component.ts (router imports)')(format=".")
:marked
Next we update the `directives` and `providers` metadata arrays to *include* the router assets.
+makeExample('toh-5/ts/app/app.component.2.ts', 'directives-and-providers', 'app.component.ts (directives and providers)')(format=".")
+makeExample('toh-5/ts/app/app.component.2.ts', 'directives-and-providers', 'app/app.component.ts (directives and providers)')(format=".")
:marked
Notice that we also removed the `HeroesComponent` from the `directives` array.
`AppComponent` no longer shows heroes; that will be the router's job.
@ -172,7 +172,7 @@ code-example(language="bash").
pastes a URL into the browser address bar.
Let's define our first route, a route to the `HeroesComponent`.
+makeExample('toh-5/ts/app/app.component.2.ts', 'route-config', 'app.component.ts (RouteConfig for heroes)')(format=".")
+makeExample('toh-5/ts/app/app.component.2.ts', 'route-config', 'app/app.component.ts (RouteConfig for heroes)')(format=".")
:marked
`@RouteConfig` takes an array of *route definitions*.
We have only one route definition at the moment but rest assured, we'll add more.
@ -203,7 +203,7 @@ code-example(language="bash").
We add an anchor tag to the template which, when clicked, triggers navigation to the `HeroesComponent`.
The revised template looks like this:
+makeExample('toh-5/ts/app/app.component.2.ts', 'template', 'app.component.ts (template for Heroes)')(format=".")
+makeExample('toh-5/ts/app/app.component.2.ts', 'template', 'app/app.component.ts (template v1)')(format=".")
:marked
Notice the `[routerLink]` binding in the anchor tag.
We bind the `RouterLink` directive (another of the `ROUTER_DIRECTIVES`) to an array
@ -250,7 +250,7 @@ code-example(language="bash").
Import the `DashboardComponent` so we can reference it in the dashboard route definition.
Add the following `'Dashboard'` route definition to the `@RouteConfig` array of definitions.
+makeExample('toh-5/ts/app/app.component.ts','dashboard-route', 'app.component.ts (Dashboard Route)')(format=".")
+makeExample('toh-5/ts/app/app.component.ts','dashboard-route', 'app/app.component.ts (Dashboard route)')(format=".")
.l-sub-section
:marked
**useAsDefault**
@ -265,7 +265,7 @@ code-example(language="bash").
:marked
Finally, add a dashboard navigation link to the template, just above the *Heroes* link.
+makeExample('toh-5/ts/app/app.component.ts','template', 'app.component.ts (template)')(format=".")
+makeExample('toh-5/ts/app/app.component.ts','template', 'app/app.component.ts (template)')(format=".")
.l-sub-section
:marked
We nestled the two links within `<nav>` tags.
@ -288,7 +288,7 @@ code-example(language="bash").
We _can_ switch to [component-relative paths](../cookbook/component-relative-paths.html) if we prefer.
:marked
Create that file with these contents:
+makeExample('toh-5/ts/app/dashboard.component.html', null, 'dashboard.component.html')(format=".")
+makeExample('toh-5/ts/app/dashboard.component.html', null, 'app/dashboard.component.html')(format=".")
:marked
We use `*ngFor` once again to iterate over a list of heroes and display their names.
We added extra `<div>` elements to help with styling later in this chapter.
@ -305,7 +305,7 @@ code-example(language="bash").
and added it to the `providers` array of the top level `AppComponent`.
That move created a singleton `HeroService` instance, available to *all* components of the application.
We'll inject and use it here in the `DashboardComponent` .
Angular will inject `HeroService` and we'll use it here in the `DashboardComponent`.
### Get heroes
Open the `dashboard.component.ts` and add the requisite `import` statements.
@ -364,7 +364,7 @@ code-example(format='').
### Configure a Route with a Parameter
Here's the *route definition* we'll use.
+makeExample('toh-5/ts/app/app.component.ts','hero-detail-route', 'app/app.component.ts (Route to HeroDetailComponent)')(format=".")
+makeExample('toh-5/ts/app/app.component.ts','hero-detail-route', 'app/app.component.ts (route to HeroDetailComponent)')(format=".")
:marked
The colon (:) in the path indicates that `:id` is a placeholder to be filled with a specific hero `id`
when navigating to the `HeroDetailComponent`.
@ -389,19 +389,19 @@ code-example(format='').
:marked
## Revise the *HeroDetailComponent*
Before we rewrite the `HeroDetailComponent`, let's remember what it looks like now:
Before we rewrite the `HeroDetailComponent`, let's review what it looks like now:
+makeExample('toh-4/ts/app/hero-detail.component.ts', null, 'app/hero-detail.component.ts (current)')
:marked
The template won't change. We'll display a hero the same way. The big changes are driven by how we get the hero.
We will no longer receive the hero in a parent component property binding.
The new `HeroDetailComponent` should take the `id` parameter from the router's `RouteParams` service
and use the `HeroService` to fetch the hero with that `id` from storage.
and use the `HeroService` to fetch the hero with that `id`.
We need an import statement to reference the `RouteParams`.
+makeExample('toh-5/ts/app/hero-detail.component.ts', 'import-route-params')(format=".")
:marked
We import the `HeroService`so we can fetch a hero`.
We import the `HeroService`so we can fetch a hero.
+makeExample('toh-5/ts/app/hero-detail.component.ts', 'import-hero-service')(format=".")
:marked
We import the `OnInit` interface because we'll call the `HeroService` inside the `ngOnInit` component lifecycle hook.
@ -460,13 +460,11 @@ code-example(format='').
:marked
Here's the (nearly) finished `HeroDetailComponent`:
+makeExample('toh-5/ts/app/hero-detail.component.ts', 'v2', 'app/hero-detail.component.ts (latest)')(format=".")
:marked
.l-main-section
:marked
## Select a *Dashboard* Hero
When a user selects a hero in the dashboard, the app should navigate to the `HeroDetailComponent` to view and edit the selected hero..
When a user selects a hero in the dashboard, the app should navigate to the `HeroDetailComponent` to view and edit the selected hero.
In the dashboard template we bound each hero's click event to the `gotoDetail` method, passing along the selected `hero` entity.
+makeExample('toh-5/ts/app/dashboard.component.html','click', 'app/dashboard.component.html (click binding)')(format=".")
@ -489,7 +487,7 @@ code-example(format='').
+makeExample('toh-5/ts/app/app.component.ts','hero-detail-route', 'app/app.component.ts (hero detail route)')(format=".")
:marked
The `DashboardComponent` doesn't have the router yet. We obtain it in the usual way:
`import` the `router` reference and inject it in the constructor (along with the `HeroService`):
import the `router` reference and inject it in the constructor (along with the `HeroService`):
+makeExample('toh-5/ts/app/dashboard.component.ts','import-router', 'app/dashboard.component.ts (excerpts)')(format=".")
+makeExample('toh-5/ts/app/dashboard.component.ts','ctor')(format=".")
@ -526,7 +524,7 @@ figure.image-display
### Format with the *UpperCasePipe*
Notice that the hero's name is displayed in CAPITAL LETTERS. That's the effect of the `UpperCasePipe`
that we slipped into the interpolation binding. Look for it right after the pipe operator, ( | ).
that we slipped into the interpolation binding. Look for it right after the pipe operator ( | ).
+makeExample('toh-5/ts/app/heroes.component.html','pipe')(format=".")
:marked
Pipes are a good way to format strings, currency amounts, dates and other display data.
@ -551,14 +549,14 @@ figure.image-display
So we can remove it from the metadata `directives` array. The `directives` array is now empty so we delete it.
We might as well delete the `HeroDetailComponent` import statement too.
The revised component metadata looks like this:
The revised `@Component` looks like this:
+makeExample('toh-5/ts/app/heroes.component.ts', 'metadata', 'app/heroes.component.ts (revised metadata)')(format=".")
:marked
Now we can see what's going on as we update the component class along the same lines as the dashboard:
1. Import the `router`
1. Inject the `router` in the constructor (along with the `HeroService`)
1. Implement the `gotoDetail` method by calling the `router.navigate` method
with a two-part 'HeroDetail' *link parameters array*.
with a two-part `HeroDetail` *link parameters array*.
Here's the revised component class:
+makeExample('toh-5/ts/app/heroes.component.ts', 'class', 'app/heroes.component.ts (class)')
@ -613,7 +611,7 @@ figure.image-display
We cooperated by surrounding those links in `<nav>` tags.
Add a `app.component.css` file to the `app` folder with the following content.
+makeExample('toh-5/ts/app/app.component.css', 'css', 'app/app.component.css (Navigation Styles)')
+makeExample('toh-5/ts/app/app.component.css', '', 'app/app.component.css (navigation styles)')
.l-sub-section
:marked
**The *router-link-active* class**
@ -631,12 +629,21 @@ figure.image-display
We can also create styles at the *application level* outside of any component.
Our designers provided some basic styles to apply to elements across the entire app.
Add the following to a new file named `styles.css` in the root folder.
+makeExample('toh-5/ts/styles.1.css', '', 'styles.css (App Styles)')(format=".")
Our designers provided some basic styles to apply to elements across the entire app.
These correspond to the full set of master styles that we
introduced earlier (see
[QuickStart, "Add some style"](../quickstart.html#!#add-some-style)).
Here is an excerpt.
+makeExample('toh-5/ts/styles.1.css', 'toh-excerpt', 'styles.css (app styles excerpt)')(format=".")
- var styles_css = 'https://raw.githubusercontent.com/angular/angular.io/master/public/docs/_examples/styles.css'
:marked
Reference this stylesheet within the `index.html` in the traditional manner.
Add a new file named `styles.css` in the root folder, if there isn't one already.
Ensure that it contains the [master styles given here](!{styles_css}).
Also ensure this stylesheet is referenced in the traditional manner within `index.html`.
+makeExample('toh-5/ts/index.html','css', 'index.html (link ref)')(format=".")
:marked
Look at the app now. Our dashboard, heroes, and navigation links are styling!
@ -680,7 +687,6 @@ p.
.file systemjs.config.json
.file tsconfig.json
.file typings.json
:marked
.l-main-section
:marked
@ -689,15 +695,15 @@ p.
### The Road Behind
We travelled a great distance in this chapter.
- We added the Angular *Component Router* to navigate among different components.
- We learned how to create router links to represent navigation menu items
- We used router parameters to navigate to the details of user selected hero
- We shared the `HeroService` among multiple components
- We learned how to create router links to represent navigation menu items.
- We used router parameters to navigate to the details of user selected hero.
- We shared the `HeroService` among multiple components.
- We moved HTML and CSS out of the component file and into their own files.
- We added the `uppercase` pipe to format data
- We added the `uppercase` pipe to format data.
### The Road Ahead
We have much of the foundation we need to build an application.
We're still missing a key piece: remote data access.
In a forthcoming tutorial chapter,
In the next chapter,
we’ll replace our mock data with data retrieved from a server using http.