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

docs: cleanup 

According to dictionary 'syntax' is countable and according to context it should be plural.

fix the broken table of template summary.

fix the table in Property Binding.

fix a position of right parethesis in Property Binding.

fix a occurance of a non-sense underscore.

fix a table in Inline Templates.

fix a missing '.' in Template Microsyntax.

fix the table in '## Binding Events'.

fix an article usage of 'an' against 'a' in '## Binding Events'.

fix a statement against the usage of plural after 'any'.

fix the typo error in former fixes.

Closes #3994
This commit is contained in:
Trotyl Yu 2015-09-05 00:22:02 +08:00 committed by Misko Hevery
parent a826f22698
commit 4df0604f09
1 changed files with 105 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

206
modules/angular2/docs/core/01_templates.md
View File

@ -2,7 +2,7 @@
Templates are markup which is added to HTML to declaratively describe how the application model should be Templates are markup which is added to HTML to declaratively describe how the application model should be
projected to DOM as well as which DOM events should invoke which methods on the controller. Templates contain projected to DOM as well as which DOM events should invoke which methods on the controller. Templates contain
syntax which is core to Angular and allows for data-binding, event-binding, template-instantiation. syntaxes which are core to Angular and allows for data-binding, event-binding, template-instantiation.
The design of the template syntax has these properties: The design of the template syntax has these properties:
@ -35,34 +35,30 @@ detail in the following sections.
<th>Text Interpolation</th> <th>Text Interpolation</th>
<td> <td>
<pre> <pre>
``` &lt;div&gt;{{exp}}&lt;/div&gt;
<div>{{exp}}</div>
```
</pre> </pre>
Example: Example:
<pre> <pre>
``` &lt;div&gt;
<div>
Hello {{name}}! Hello {{name}}!
<br> &lt;br&gt;
Goodbye {{name}}! Goodbye {{name}}!
</div> &lt;/div&gt;
```
</pre> </pre>
</td> </td>
<td> <td>
`<div [text|index]=exp>` <pre>
&lt;div [text|index]="exp"&gt;&lt;/div&gt;
</pre>
Example: Example:
<pre> <pre>
``` &lt;div
<div
[text|0]=" 'Hello' + stringify(name) + '!' " [text|0]=" 'Hello' + stringify(name) + '!' "
[text|2]=" 'Goodbye' + stringify(name) + '!' "> [text|2]=" 'Goodbye' + stringify(name) + '!' "&gt;
_<b>x</b>_ &lt;b&gt;x&lt;/b&gt;
</div> &lt;/div&gt;
```
</pre> </pre>
</td> </td>
</tr> </tr>
@ -70,148 +66,156 @@ Example:
<th>Property Interpolation</th> <th>Property Interpolation</th>
<td> <td>
<pre> <pre>
``` &lt;div name="{{exp}}"&gt;&lt;/div&gt;
<div name="{{exp}}">
```
</pre> </pre>
Example: Example:
<pre> <pre>
``` &lt;div class="{{selected}}"&gt;&lt;/div&gt;
<div class="{{selected}}">`
```
</pre> </pre>
</td> </td>
<td> <td>
<pre> <pre>
``` &lt;div [name]="stringify(exp)"&gt;&lt;/div&gt;
<div [name]="stringify(exp)">
```
</pre> </pre>
Example: Example:
<pre> <pre>
``` &lt;div [title]="stringify(selected)"&gt;&lt;/div&gt;
<div [title]="stringify(selected)">
```
</pre> </pre>
</td> </td>
</tr> </tr>
<tr> <tr>
<th>Property binding</th> <th>Property binding</th>
<td> <td>
`<div [prop]="exp">` <pre>
&lt;div [prop]="exp"&gt;&lt;/div&gt;
</pre>
Example: Example:
`<div [hidden]="true">` <pre>
&lt;div [hidden]="true"&gt;&lt;/div&gt;
</pre>
</td> </td>
<td> <td>
`<div bind-prop="exp">` <pre>
&lt;div bind-prop="exp"&gt;&lt;/div&gt;
</pre>
Example: Example:
`<div bind-hidden="true">` <pre>
&lt;div bind-hidden="true"&gt;&lt;/div&gt;
</pre>
</td> </td>
</tr> </tr>
<tr> <tr>
<th>Event binding (non-bubbling)</th> <th>Event binding (non-bubbling)</th>
<td> <td>
`<div (event)="statement">` <pre>
&lt;div (event)="statement"&gt;&lt;/div&gt;
Example: </pre>
`<div (click)="doX()">`
</td>
<td>
`<div on-event="statement">`
Example: Example:
<pre> <pre>
``` &lt;div (click)="doX()"&gt;&lt;/div&gt;
<video #player>
<button (click)="player.play()">play</button>
```
</pre> </pre>
</td> </td>
<td> <td>
`<div def="symbol">` <pre>
&lt;div on-event="statement"&gt;&lt;/div&gt;
</pre>
Example: Example:
<pre> <pre>
``` &lt;video #player&gt;
<video def="player"> &lt;button (click)="player.play()"&gt;play&lt;/button&gt;
<button on-click="player.play()">play</button> &lt;/video&gt;
``` </pre>
Or:
<pre>
&lt;div def="symbol"&gt;&lt;/div&gt;
</pre>
Example:
<pre>
&lt;video def="player"&gt;
&lt;button on-click="player.play()"&gt;play&lt;/button&gt;
&lt;/video&gt;
</pre> </pre>
</td> </td>
</tr> </tr>
<tr> <tr>
<th>Inline Template</th> <th>Inline Template</th>
<td> <td>
`<div template="...">...</div>` <pre>
&lt;div template="..."&gt;...&lt;/div&gt;
</pre>
Example: Example:
<pre> <pre>
``` &lt;ul&gt;
<ul> &lt;li template="for: #item of items"&gt;
<li template="for: #item of items">
{{item}} {{item}}
</li> &lt;/li&gt;
</ul> &lt;/ul&gt;
```
</pre> </pre>
</td> </td>
<td> <td>
`<template>...</template>` <pre>
&lt;template&gt;...&lt;/template&gt;
</pre>
Example: Example:
<pre> <pre>
``` &lt;ul&gt;
<ul> &lt;template def-for:"item"
<template def-for:"item" bind-for-in="items"&gt;
bind-for-in="items"> &lt;li&gt;
<li>
{{item}} {{item}}
</li> &lt;/li&gt;
</template> &lt;/template&gt;
</ul> &lt;/ul&gt;
```
</pre> </pre>
</td> </td>
</tr> </tr>
<tr> <tr>
<th>Explicit Template</th> <th>Explicit Template</th>
<td> <td>
`<template>...</template>` <pre>
&lt;template&gt;...&lt;/template&gt;
</pre>
Example: Example:
<pre> <pre>
``` &lt;template #for="item"
<template #for="item" [for-in]="items"&gt;
[for-in]="items">
_some_content_to_repeat_ _some_content_to_repeat_
</template> &lt;/template&gt;
```
</pre> </pre>
</td> </td>
<td> <td>
`<template>...</template>` <pre>
&lt;template&gt;...&lt;/template&gt;
</pre>
Example: Example:
<pre> <pre>
``` &lt;template def-for="item"
<template def-for="item" bind-for-in="items"&gt;
bind-for-in="items">
_some_content_to_repeat_ _some_content_to_repeat_
</template> &lt;/template&gt;
```
</pre> </pre>
</td> </td>
</tr> </tr>
@ -228,11 +232,11 @@ are always in the form of `property-name` which is assigned an `expression`. The
<table> <table>
<tr> <tr>
<th>Short form</th> <th>Short form</th>
<td>`<some-element [some-property]="expression">`</td> <td><pre>&lt;some-element [some-property]="expression"&gt;</pre></td>
</tr> </tr>
<tr> <tr>
<th>Canonical form</th> <th>Canonical form</th>
<td>`<some-element bind-some-property="expression">`</td> <td><pre>&lt;some-element bind-some-property="expression"&gt;</pre></td>
</tr> </tr>
</table> </table>
@ -255,7 +259,7 @@ Key points:
* The binding is to the element property not the element attribute. * The binding is to the element property not the element attribute.
* To prevent custom element from accidentally reading the literal `expression` on the title element, the attribute name * To prevent custom element from accidentally reading the literal `expression` on the title element, the attribute name
is escaped. In our case the `title` is escaped to `[title]` through the addition of square brackets `[]`. is escaped. In our case the `title` is escaped to `[title]` through the addition of square brackets `[]`.
* A binding value (in this case `user.firstName` will always be an expression, never a string literal). * A binding value (in this case `user.firstName`) will always be an expression, never a string literal.
NOTE: Unlike Angular v1, Angular v2 binds to properties of elements rather than attributes of elements. This is NOTE: Unlike Angular v1, Angular v2 binds to properties of elements rather than attributes of elements. This is
done to better support custom elements, and to allow binding for values other than strings. done to better support custom elements, and to allow binding for values other than strings.
@ -277,7 +281,7 @@ syntax which is just a short hand for the data binding syntax.
is a short hand for: is a short hand for:
``` ```
<span [text|0]=" 'Hello ' + stringify(name) + '!' ">_</span> <span [text|0]=" 'Hello ' + stringify(name) + '!' "></span>
``` ```
The above says to bind the `'Hello ' + stringify(name) + '!'` expression to the zero-th child of the `span`'s `text` The above says to bind the `'Hello ' + stringify(name) + '!'` expression to the zero-th child of the `span`'s `text`
@ -317,25 +321,25 @@ Views than can be inserted and removed as needed to change the DOM structure.
<tr> <tr>
<th>Short form</th> <th>Short form</th>
<td> <td>
``` <pre>
parent template parent template
<element> &lt;element&gt;
<some-element template="instantiating-directive-microsyntax">child template</some-element> &lt;some-element template="instantiating-directive-microsyntax"&gt;child template&lt;/some-element&gt;
</element> &lt;/element&gt;
``` </pre>
</td> </td>
</tr> </tr>
<tr> <tr>
<th>Canonical form</th> <th>Canonical form</th>
<td> <td>
``` <pre>
parent template parent template
<element> &lt;element&gt;
<template instantiating-directive-bindings> &lt;template instantiating-directive-bindings&gt;
<some-element>child template</some-element> &lt;some-element&gt;child template&lt;/some-element&gt;
</template> &lt;/template&gt;
</element> &lt;/element&gt;
``` </pre>
</td> </td>
</tr> </tr>
</table> </table>
@ -448,7 +452,7 @@ microsyntax: ([[key|keyExpression|varExport][;|,]?)*
``` ```
Where Where
* `expression` is an Angular expression as defined in section: Expressions * `expression` is an Angular expression as defined in section: Expressions.
* `local` is a local identifier for local variables. * `local` is a local identifier for local variables.
* `internal` is an internal variable which the directive exports for binding. * `internal` is an internal variable which the directive exports for binding.
* `key` is an attribute name usually only used to trigger a specific directive. * `key` is an attribute name usually only used to trigger a specific directive.
@ -473,11 +477,11 @@ Binding events allows wiring events from DOM (or other components) to the Angula
<table> <table>
<tr> <tr>
<th>Short form</th> <th>Short form</th>
<td>`<some-element (some-event)="statement">`</td> <td><pre>&lt;some-element (some-event)="statement"&gt;</pre></td>
</tr> </tr>
<tr> <tr>
<th>Canonical form</th> <th>Canonical form</th>
<td>`<some-element on-some-event="statement">`</td> <td><pre>&lt;some-element on-some-event="statement"&gt;</pre></td>
</tr> </tr>
</table> </table>
@ -493,11 +497,11 @@ Angular listens to bubbled DOM events (as in the case of clicking on any child),
<table> <table>
<tr> <tr>
<th>Short form</th> <th>Short form</th>
<td>`<some-element (some-event)="statement">`</td> <td><pre>&lt;some-element (some-event)="statement"&gt;</pre></td>
</tr> </tr>
<tr> <tr>
<th>Canonical form</th> <th>Canonical form</th>
<td>`<some-element on-some-event="statement">`</td> <td><pre>&lt;some-element on-some-event="statement"&gt;</pre></td>
</tr> </tr>
</table> </table>
@ -519,7 +523,7 @@ component's controller.
NOTE: Unlike Angular v1, Angular v2 treats event bindings as core constructs not as directives. This means that there NOTE: Unlike Angular v1, Angular v2 treats event bindings as core constructs not as directives. This means that there
is no need to create a event directive for each kind of event. This makes it possible for Angular v2 to easily is no need to create an event directive for each kind of event. This makes it possible for Angular v2 to easily
bind to custom events of Custom Elements, whose event names are not known ahead of time. bind to custom events of Custom Elements, whose event names are not known ahead of time.
@ -534,7 +538,7 @@ have different semantics.
### Expressions ### Expressions
Expressions can be used to bind to properties only. Expressions represent how data should be projected to the View. Expressions can be used to bind to properties only. Expressions represent how data should be projected to the View.
Expressions should not have any side effects and should be idempotent. Examples of where expressions can be used in Expressions should not have any side effect and should be idempotent. Examples of where expressions can be used in
Angular are: Angular are:
``` ```
<div title="{{expression}}">{{expression}}</div> <div title="{{expression}}">{{expression}}</div>