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

Uwaterloo 210J pfryerda edits (#1968)

Browse Source 
* template-syntax - removed word redundancies, consistent bolding rather than italics

* Some (not all) changes from PR.

* remaining changes from pull request
This commit is contained in:
Peter Fryer-Davis 2016-09-06 13:31:25 -04:00 committed by Kathy Walrath
parent 59f6ebe849
commit 32ac619fc7
1 changed files with 22 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
public/docs/ts/latest/guide/template-syntax.jade
View File

@ -711,12 +711,12 @@ block style-property-name-dart-diff
.l-main-section .l-main-section
:marked :marked
## Event Binding ## Event binding
The bindings we’ve met so far flow data in one direction: *from the component to an element*. The bindings we’ve met so far flow data in one direction: **from a component to an element**.
Users don’t just stare at the screen. They enter text into input boxes. They pick items from lists. Users don’t just stare at the screen. They enter text into input boxes. They pick items from lists.
They click buttons. Such user actions may result in a flow of data in the opposite direction: They click buttons. Such user actions may result in a flow of data in the opposite direction:
*from an element to the component*. **from an element to a component**.
The only way to know about a user action is to listen for certain events such as The only way to know about a user action is to listen for certain events such as
keystrokes, mouse movements, clicks, and touches. keystrokes, mouse movements, clicks, and touches.
@ -728,12 +728,12 @@ block style-property-name-dart-diff
the component's `onSave()` method whenever a click occurs: the component's `onSave()` method whenever a click occurs:
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".") +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".")
:marked :marked
### Target Event ### Target event
A **name between enclosing parentheses** — for example, `(click)` — A **name between parentheses** — for example, `(click)` —
identifies the target event. In the following example, the target is the button’s click event. identifies the target event. In the following example, the target is the button’s click event.
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".") +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".")
:marked :marked
Some people prefer the `on-` prefix alternative, known as the *canonical form*: Some people prefer the `on-` prefix alternative, known as the **canonical form**:
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-2')(format=".") +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-2')(format=".")
:marked :marked
Element events may be the more common targets, but Angular looks first to see if the name matches an event property Element events may be the more common targets, but Angular looks first to see if the name matches an event property
@ -742,47 +742,46 @@ block style-property-name-dart-diff
.l-sub-section .l-sub-section
:marked :marked
The `myClick` directive is further described below in the section The `myClick` directive is further described in the section
on [Aliasing input/output properties](#aliasing-io). on [aliasing input/output properties](#aliasing-io).
:marked :marked
If the name fails to match an element event or an output property of a known directive, If the name fails to match element event or output property of a known directive,
Angular reports an “unknown directive” error. Angular reports an “unknown directive” error.
### *$event* and event handling statements ### *$event* and event handling statements
In an event binding, Angular sets up an event handler for the target event. In an event binding, Angular sets up an event handler for the target event.
When the event is raised, the handler executes the template statement. When the event is raised, the handler executes the template statement.
The template statement typically involves a receiver that wants to do something The template statement typically involves a receiver, which performs an action
in response to the event, such as take a value from the HTML control and store it in response to the event, such as storing a value from the HTML control
in a model. into a model.
The binding conveys information about the event, including data values, through The binding conveys information about the event, including data values, through
an **event object named `$event`**. an **event object named `$event`**.
The shape of the event object is determined by the target event itself. The shape of the event object is determined by the target event.
If the target event is a native DOM element event, the `$event` is a If the target event is a native DOM element event, then `$event` is a
[DOM event object]( https://developer.mozilla.org/en-US/docs/Web/Events), [DOM event object]( https://developer.mozilla.org/en-US/docs/Web/Events),
with properties such as `target` and `target.value`. with properties such as `target` and `target.value`.
Consider this example: Consider this example:
+makeExample('template-syntax/ts/app/app.component.html', 'without-NgModel')(format=".") +makeExample('template-syntax/ts/app/app.component.html', 'without-NgModel')(format=".")
:marked :marked
We’re binding the input box `value` to a `firstName` property, and we’re listening for changes by binding to the input box’s `input` event. This code sets the input box `value` property by binding to the `firstName` property. To listen for changes to the value, the code binds to the input box's `input` event.
When the user makes changes, the `input` event is raised, and the binding executes the statement within a context that includes the DOM event object, `$event`. When the user makes changes, the `input` event is raised, and the binding executes the statement within a context that includes the DOM event object, `$event`.
To update the `firstName` property, we must get the changed text by following To update the `firstName` property, the changed text is retrieved by following the path `$event.target.value`.
the path `$event.target.value`.
If the event belongs to a directive (remember: components are directives), `$event` has whatever shape the directive chose to produce. If the event belongs to a directive (recall that components are directives), `$event` has whatever shape the directive decides to produce.
<a id="eventemitter"></a> <a id="eventemitter"></a>
<a id="custom-event"></a> <a id="custom-event"></a>
### Custom Events with EventEmitter ### Custom Events with EventEmitter
Directives typically raise custom events with an Angular [EventEmitter](../api/core/index/EventEmitter-class.html). Directives typically raise custom events with an Angular [EventEmitter](../api/core/index/EventEmitter-class.html).
A directive creates an `EventEmitter` and exposes it as a property. The directive creates an `EventEmitter` and exposes it as a property.
The directive calls `EventEmitter.emit(payload)` to fire an event, passing in a message payload that can be anything. The directives calls `EventEmitter.emit(payload)` to fire an event, passing in a message payload, which can be anything.
Parent directives listen for the event by binding to this property and accessing the payload through the `$event` object. Parent directives listen for the event by binding to this property and accessing the payload through the `$event` object.
Consider a `HeroDetailComponent` that presents hero information and responds to user actions. Consider a `HeroDetailComponent` that presents hero information and responds to user actions.
@ -797,8 +796,8 @@ block style-property-name-dart-diff
:marked :marked
The component defines a `deleteRequest` property that returns an `EventEmitter`. The component defines a `deleteRequest` property that returns an `EventEmitter`.
When the user clicks *delete*, the component invokes the `delete()` method When the user clicks *delete*, the component invokes the `delete()` method,
which tells the `EventEmitter` to emit a `Hero` object. telling the `EventEmitter` to emit a `Hero` object.
Now imagine a hosting parent component that binds to the `HeroDetailComponent`'s `deleteRequest` event. Now imagine a hosting parent component that binds to the `HeroDetailComponent`'s `deleteRequest` event.
@ -810,12 +809,11 @@ block style-property-name-dart-diff
### Template statements have side effects ### Template statements have side effects
The `deleteHero` method has a side effect: it deletes a hero. The `deleteHero` method has a side effect: it deletes a hero.
Template statement side effects are not just OK, they are expected. Template statement side effects are not just OK, but expected.
Deleting the hero updates the model, perhaps triggering other changes Deleting the hero updates the model, perhaps triggering other changes
including queries and saves to a remote server. including queries and saves to a remote server.
These changes percolate through the system and are ultimately displayed in this and other views. These changes percolate through the system and are ultimately displayed in this and other views.
It's all good.
// //
:marked :marked