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

docs(toh-3/dart): copyedits and new snake_case glossary entry (#1629)

This commit is contained in:
Patrice Chalin 2016-06-15 10:49:42 -07:00 committed by Kathy Walrath
parent 6e5d8e6491
commit cd970c21ad
8 changed files with 63 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
public/docs/_examples/toh-3/dart/lib/app_component.dart
View File

@ -10,7 +10,7 @@ import 'hero_detail_component.dart';
@Component(
selector: 'my-app',
// #docregion hero-detail-template
// #docregion hero-detail-template
template: '''
<h1>{{title}}</h1>
<h2>My Heroes</h2>
@ -23,8 +23,9 @@ import 'hero_detail_component.dart';
</ul>
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
''',
// #enddocregion hero-detail-template
styles: const ['''
// #enddocregion hero-detail-template
styles: const [
'''
.selected {
background-color: #CFD8DC !important;
color: white;
@ -73,17 +74,16 @@ import 'hero_detail_component.dart';
}
'''
],
// #docregion directives
directives: const [
HeroDetailComponent
])
// #enddocregion directives
// #docregion directives
directives: const [HeroDetailComponent]
// #enddocregion directives
)
class AppComponent {
final String title = 'Tour of Heroes';
final List<Hero> heroes = mockHeroes;
Hero selectedHero;
onSelect(Hero hero) {
void onSelect(Hero hero) {
selectedHero = hero;
}
}

1
public/docs/_examples/toh-3/dart/lib/hero.dart
View File

@ -5,4 +5,3 @@ class Hero {
Hero(this.id, this.name);
}
// #enddocregion

33
public/docs/_examples/toh-3/dart/lib/hero_detail_component.dart
View File

@ -11,29 +11,26 @@ import 'hero.dart';
// #docregion v1
@Component(
selector: 'my-hero-detail',
// #enddocregion v1
// #enddocregion v1
// #docregion template
template: '''
<div *ngIf="hero != null">
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name">
</div>
</div>
'''
<div *ngIf="hero != null">
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name">
</div>
</div>'''
// #enddocregion template
// #docregion v1
// #docregion v1
)
class HeroDetailComponent {
// #enddocregion v1
// #docregion inputs
// #enddocregion v1
// #docregion inputs
@Input()
// #docregion hero
// #docregion hero
Hero hero;
// #enddocregion hero
// #enddocregion inputs
// #docregion v1
// #enddocregion hero, inputs
// #docregion v1
}
// #enddocregion v1

14
public/docs/dart/latest/glossary.jade
View File

@ -12,7 +12,19 @@ include _util-fns
!=partial('../../ts/latest/_fragments/glossary-f-l')
!=partial('../../ts/latest/_fragments/glossary-m1')
//!=partial('../../ts/latest/_fragments/glossary-m2') not needed in dart
!=partial('../../ts/latest/_fragments/glossary-n-s')
!=partial('../../ts/latest/_fragments/glossary-n-s-1')
:marked
## snake_case
.l-sub-section
:marked
The practice of writing compound words or phrases such that each word is separated by an underscore (`_`).
Library and file names are often spelled in snake_case. Examples include: `angular2_tour_of_heroes` and `app_component.dart`.
This form is also known as **underscore case**.
!=partial('../../ts/latest/_fragments/glossary-n-s-2')
!=partial('../../ts/latest/_fragments/glossary-t1')
//!=partial('../../ts/latest/_fragments/glossary-t2') notneeded in dart
!=partial('../../ts/latest/_fragments/glossary-u-z')

3
public/docs/dart/latest/tutorial/toh-pt1.jade
View File

@ -26,10 +26,9 @@ include ../_util-fns
.children
.file index.html
.file main.dart
.file styles.css
.file pubspec.yaml
// Add .file styles.css
.p &nbsp;
.callout.is-helpful

1
public/docs/dart/latest/tutorial/toh-pt2.jade
View File

@ -29,6 +29,7 @@ p Run the #[+liveExampleLink2('', 'toh-2')] for this part.
.children
.file index.html
.file main.dart
.file styles.css
.file pubspec.yaml
:marked
### Keep the app compiling and running

23
public/docs/dart/latest/tutorial/toh-pt3.jade
View File

@ -21,12 +21,13 @@ p Run the #[+liveExampleLink2('', 'toh-3')] for this part.
.children
.file index.html
.file main.dart
.file styles.css
.file pubspec.yaml
:marked
### Keep the app compiling and running
We want to start the Dart compiler, have it watch for changes, and start our server. We'll do this by typing
code-example(format="." language="bash").
code-example(language="bash").
pub serve
:marked
@ -50,7 +51,7 @@ code-example(format="." language="bash").
### Separating the Hero Detail Component
Add a new file named `hero_detail_component.dart` to the `lib` folder and create `HeroDetailComponent` as follows.
+makeExample('toh-3/dart/lib/hero_detail_component.dart', 'v1', 'hero_detail_component.dart (initial version)')(format=".")
+makeExample('toh-3/dart/lib/hero_detail_component.dart', 'v1', 'lib/hero_detail_component.dart (initial version)')(format=".")
.l-sub-section
:marked
### Naming conventions
@ -61,7 +62,8 @@ code-example(format="." language="bash").
All of our component names end in "Component". All of our component file names end in "_component".
We spell our filenames in lower underscore case (AKA "snake_case") so we don't worry about
We spell our filenames in lower **underscore case**
(AKA **[snake_case](../guide/glossary.html#!#snake_case)**) so we don't worry about
case sensitivity on the server or in source control.
<!-- TODO
@ -89,26 +91,26 @@ code-example(format="." language="bash").
So we replace `selectedHero` with `hero` everywhere in our new template. That's our only change.
The result looks like this:
+makeExample('toh-3/dart/lib/hero_detail_component.dart', 'template', 'hero_detail_component.dart (template)')(format=".")
+makeExample('toh-3/dart/lib/hero_detail_component.dart', 'template', 'lib/hero_detail_component.dart (template)')(format=".")
:marked
Now our hero detail layout exists only in the `HeroDetailComponent`.
#### Add the *hero* property
Let’s add that `hero` property we were talking about to the component class.
+makeExample('toh-3/dart/lib/hero_detail_component.dart', 'hero')(format=".")
+makeExample('toh-3/dart/lib/hero_detail_component.dart', 'hero')
:marked
Uh oh. We declared the `hero` property as type `Hero` but our `Hero` class is over in the `app_component.dart` file.
We have two components, each in their own file, that need to reference the `Hero` class.
We solve the problem by relocating the `Hero` class from `app_component.dart` to its own `hero.dart` file.
+makeExample('toh-3/dart/lib/hero.dart', null, 'hero.dart (Exported Hero class)')(format=".")
+makeExample('toh-3/dart/lib/hero.dart', '', 'lib/hero.dart')(format=".")
:marked
Add the following import statement near the top of both `app_component.dart` and `hero_detail_component.dart`.
Add the following import statement near the top of **both `app_component.dart` and `hero_detail_component.dart`**.
+makeExample('toh-3/dart/lib/hero_detail_component.dart', 'hero-import', 'hero_detail_component.dart and app_component.dart (Import the Hero class)')(format=".")
+makeExample('toh-3/dart/lib/hero_detail_component.dart', 'hero-import')
:marked
#### The *hero* property is an ***input***
@ -167,7 +169,7 @@ code-example(format=".")
:marked
The `AppComponent`’s template should now look like this
+makeExample('toh-3/dart/lib/app_component.dart', 'hero-detail-template', 'app_component.dart (Template)')(format=".")
+makeExample('toh-3/dart/lib/app_component.dart', 'hero-detail-template', 'app_component.dart (template)')(format=".")
:marked
Thanks to the binding, the `HeroDetailComponent` should receive the hero from the `AppComponent` and display that hero's detail beneath the list.
The detail should update every time the user picks a new hero.
@ -213,6 +215,7 @@ code-example(format=".")
.children
.file index.html
.file main.dart
.file styles.css
.file pubspec.yaml
:marked
Here are the code files we discussed in this chapter.
@ -237,6 +240,8 @@ code-example(format=".")
* We learned to bind a parent component to a child component.
* We learned to declare the application directives we need in a `directives` list.
p Run the #[+liveExampleLink2('', 'toh-3')] for this part.
.l-main-section
:marked
## The Road Ahead

19
public/docs/ts/latest/glossary.jade
View File

@ -150,9 +150,9 @@ include _util-fns
## dash-case
.l-sub-section
:marked
The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (-).
The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (`-`).
Directive selectors and the root of filenames are often spelled in dash-case. Examples include: `my-app` and the `hero-list.component.ts`.
Directive selectors and the root of filenames are often spelled in dash-case. Examples include: `my-app` and `hero-list.component.ts`.
This form is also known as [kebab-case](#kebab-case).
@ -408,9 +408,9 @@ include _util-fns
## kebab-case
.l-sub-section
:marked
The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (-).
The practice of writing compound words or phrases such that each word is separated by a dash or hyphen (`-`).
Directive selectors and the root of filenames are often spelled in kebab-case. Examples include: `my-app` and the `hero-list.component.ts`.
Directive selectors and the root of filenames are often spelled in kebab-case. Examples include: `my-app` and `hero-list.component.ts`.
This form is also known as [dash-case](#dash-case).
@ -480,7 +480,7 @@ include _util-fns
// #enddocregion m2
// #docregion n-s
// #docregion n-s-1
- var lang = current.path[1]
- var decorator = lang === 'dart' ? 'annotation' : '<a href="#decorator">decorator</a>'
- var atSym = lang === 'js' ? '' : '@'
@ -570,6 +570,7 @@ include _util-fns
<a id="S"></a>
.l-main-section
// #enddocregion n-s-1
:marked
## Scoped Package
.l-sub-section
@ -582,9 +583,9 @@ include _util-fns
We import a scoped package the same way we'd import a *normal* package.
The only difference, from a consumer perspective,
is that the package name begins with the Angular *scope name*, `@angular`.
// #enddocregion n-s
+makeExample('../docs/_fragments/architecture/ts/app/app.component.ts', 'import')(format=".")
// #docregion n-s
+makeExample('../docs/_fragments/architecture/ts/app/app.component.ts', 'import')(format=".")
// #docregion n-s-2
:marked
## Structural Directive
@ -596,7 +597,7 @@ include _util-fns
The `ngIf` "conditional element" directive and the `ngFor` "repeater" directive are
good examples in this category.
// #enddocregion n-s
// #enddocregion n-s-2
// #docregion t1
<a id="T"></a>