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

(docs) pipes: typos, grammar, parameter examples of real pipes currency and slice

This commit is contained in:
Ward Bell 2015-10-23 09:31:51 -07:00 committed by Naomi Black
parent 021819d1c1
commit 703b854d0f
1 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
public/docs/ts/latest/guide/pipes.jade
View File

@ -70,10 +70,10 @@ code-example(format="linenums" escape="html").
A pipe may accept any number of optional parameters to fine-tune its output.
We add parameters to a pipe by following the pipe name with a colon ( : ) and then the parameter value
(e.g., `maxSize:1`). If our pipe accepts multiple parameters, we separate the values with colons (e.g. `between:1:5`)
(e.g., `currency:'EUR'`). If our pipe accepts multiple parameters, we separate the values with colons (e.g. `slice:1:5`)
Let's modify our birthday example to give the date pipe a format parameter.
The formatted date will display as **<span style="font-family:courier">04/15/88</span>**.
We'll modify our birthday example to give the date pipe a format parameter.
The formatted date should display as **<span style="font-family:courier">04/15/88</span>**.
code-example(format="linenums" escape="html").
<p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }} </p>
@ -208,7 +208,7 @@ code-example(format="linenums" escape="html").
bootstrap(PowerBooster);
:markdown
Two things to note here:
Two things to note:
1. We use the pipe in the template expression exactly as we described in the pipe's comments.
We pass the value to transform from the left and give our pipe an exponent parameter of `10`.
@ -219,7 +219,7 @@ code-example(format="linenums" escape="html").
:markdown
Angular reports an error if we neglect to list our custom pipe.
We didn't list the `DatePipe` in our previous example because all
Angular built-in pipes are pre-registered by default.
Angular built-in pipes are pre-registered.
Custom pipes must be registered manually.
:markdown
If we are inclined to try this in a live-coding tool (such a [plunker](http://plnkr.co/)),
@ -264,7 +264,9 @@ code-example(format="linenums" ).
Most pipes are stateless. The `DatePipe` in our first example is a stateless pipe. So is our custom `ExponentialStrengthPipe`.
Stateful pipes are conceptually similar to classes in object-oriented programming. They can manage the data they transform. An example would be a Pipe that creates an HTTP request, stores the response and displays the output. Pipes that actually retrieve or request data should be used cautiously, since working with network data tends to introduce error conditions which are better handled in JavaScript instead of template. This risk could be mitigated by creating custom pipe for a particular backend, which can bake in common error-handling strategies.
Stateful pipes are conceptually similar to classes in object-oriented programming. They can manage the data they transform. A pipe that creates an HTTP request, stores the response and displays the output, is a stateful pipe.
Pipes that retrieve or request data should be used cautiously, since working with network data tends to introduce error conditions that are better handled in JavaScript than in a template.
We can mitigate this risk by creating a custom pipe for a particular backend and bake-in the essential error-handling.
## The stateful `AsyncPipe`
The Angular Async pipe is a remarkable example of a stateful pipe.
@ -273,7 +275,7 @@ code-example(format="linenums" ).
It is stateful because the pipe maintains a subscription to the input and its returned values depend on that subscription.
Here is an example of binding a simple promise to a view, using the async pipe.
In the next example, we bind a simple promise to a view with the async pipe.
code-example(format="linenums").
@Component({
@ -292,7 +294,7 @@ code-example(format="linenums").
:markdown
The Async pipe saves boilerplate in the component code.
The component doesn't have to subscribe to the async data source,
it doesn't have to extract the resolved values and expose them for binding,
it doesn't extract the resolved values and expose them for binding,
and (in the case of Obsevable stream sources like `EventEmitter`)
the component doesn't have to unsubscribe when it is destroyed
(a potent source of memory leaks).
@ -315,7 +317,7 @@ code-example(format="linenums").
```
Immediately below we have the finished pipe. It's input value is an url to an endpoint that returns a JSON file.
Immediately below we have the finished pipe. Its input value is an url to an endpoint that returns a JSON file.
The pipe makes a one-time async request to the server and eventually receives the JSON response.
```
@ -353,8 +355,18 @@ code-example(format="linenums" escape="html").
`,
pipes: [FetchJsonPipe]
})
class HeroesList implements AfterViewInit {
}
class HeroesList { /* I've got nothing to do ;-) */ }
bootstrap(HeroesList);
```
.l-main-section
:markdown
## Next Steps
Pipes are a great way to encapsulate and share common display-value
transformations. We use them like styles, dropping them
into our templates expressions to enrich the appeal and usability
of our views.
Explore Angular's inventory of built-in pipes in the [API Reference](../api/).
Try writing a custom pipe and perhaps contributing it to the community.