Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

docs(testing): tech edits #3269

Merged
merged 3 commits into from
Feb 20, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion public/docs/ts/latest/guide/_data.json
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@

"testing": {
"title": "Testing",
"intro": "Techniques and practices for testing an Angular app"
"intro": "Techniques and practices for testing an Angular app."
},

"typescript-configuration": {
Expand Down
42 changes: 21 additions & 21 deletions public/docs/ts/latest/guide/attribute-directives.jade
Original file line number Diff line number Diff line change
Expand Up @@ -24,19 +24,19 @@ a#directive-overview
## Directives overview

There are three kinds of directives in Angular:

1. Components — directives with a template.
1. Structural directives — change the DOM layout by adding and removing DOM elements.
1. Attribute directives — change the appearance or behavior of an element, component, or another directive.

*Components* are the most common of the three directives.
You saw a component for the first time in the [QuickStart](../quickstart.html) example.

*Structural Directives* change the structure of the view.
*Structural Directives* change the structure of the view.
Two examples are [NgFor](template-syntax.html#ngFor) and [NgIf](template-syntax.html#ngIf).
Learn about them in the [Structural Directives](structural-directives.html) guide.

*Attribute directives* are used as attributes of elements.
*Attribute directives* are used as attributes of elements.
The built-in [NgStyle](template-syntax.html#ngStyle) directive in the [Template Syntax](template-syntax.html) guide, for example,
can change several element styles at the same time.

Expand Down Expand Up @@ -151,12 +151,12 @@ figure.image-display

:marked
Angular detects that you're trying to bind to *something* but it can't find this directive
in the module's `declarations` array.
After specifying `HighlightDirective` in the `declarations` array,
in the module's `declarations` array.
After specifying `HighlightDirective` in the `declarations` array,
Angular knows it can apply the directive to components declared in this module.

:marked
To summarize, Angular found the `myHighlight` attribute on the `<p>` element.
To summarize, Angular found the `myHighlight` attribute on the `<p>` element.
It created an instance of the `HighlightDirective` class and
injected a reference to the `<p>` element into the directive's constructor
which sets the `<p>` element's background style to yellow.
Expand Down Expand Up @@ -220,8 +220,8 @@ a#input
### Binding to an _@Input_ property

Notice the `@Input` !{_decorator}. It adds metadata to the class that makes the directive's `highlightColor` property available for binding.
It's called an *input* property because data flows from the binding expression _into_ the directive.

It's called an *input* property because data flows from the binding expression _into_ the directive.
Without that input metadata, Angular rejects the binding; see [below](#why-input "Why add @Input?") for more about that.

Try it by adding the following directive binding variations to the `AppComponent` template:
Expand All @@ -239,7 +239,7 @@ a#input
+makeExample('attribute-directives/ts/src/app/app.component.html','color')

:marked
The `[myHighlight]` attribute binding both applies the highlighting directive to the `<p>` element
The `[myHighlight]` attribute binding both applies the highlighting directive to the `<p>` element
and sets the directive's highlight color with a property binding.
You're re-using the directive's attribute selector (`[myHighlight]`) to do both jobs.
That's a crisp, compact syntax.
Expand All @@ -254,8 +254,8 @@ a#input-alias
### Bind to an _@Input_ alias

Fortunately you can name the directive property whatever you want _and_ **_alias it_** for binding purposes.
Restore the original property name and specify the selector as the alias in the argument to `@Input`.

Restore the original property name and specify the selector as the alias in the argument to `@Input`.

+makeExcerpt('src/app/highlight.directive.ts', 'color', 'src/app/highlight.directive.ts (color property with alias')
:marked
Expand All @@ -266,7 +266,7 @@ a#input-alias
+makeExample('attribute-directives/ts/src/app/app.component.html','color')

:marked
Now that you're binding to `highlightColor`, modify the `onMouseEnter()` method to use it.
Now that you're binding to `highlightColor`, modify the `onMouseEnter()` method to use it.
If someone neglects to bind to `highlightColor`, highlight in "red" by default.

+makeExample('attribute-directives/ts/src/app/highlight.directive.3.ts', 'mouse-enter', 'src/app/highlight.directive.ts (mouse enter)')(format='.')
Expand All @@ -280,7 +280,7 @@ a#input-alias
It may be difficult to imagine how this directive actually works.
In this section, you'll turn `AppComponent` into a harness that
lets you pick the highlight color with a radio button and bind your color choice to the directive.

Update `app.component.html` as follows:

+makeExcerpt('attribute-directives/ts/src/app/app.component.html', 'v2', '')
Expand All @@ -300,7 +300,7 @@ a#second-property
## Bind to a second property
This highlight directive has a single customizable property. In a real app, it may need more.

At the moment, the default color &mdash; the color that prevails until the user picks a highlight color &mdash;
At the moment, the default color &mdash; the color that prevails until the user picks a highlight color &mdash;
is hard-coded as "red". Let the template developer set the default color.

Add a second **input** property to `HighlightDirective` called `defaultColor`:
Expand All @@ -313,11 +313,11 @@ a#second-property
How do you bind to a second property when you're already binding to the `myHighlight` attribute name?

As with components, you can add as many directive property bindings as you need by stringing them along in the template.
The developer should be able to write the following template HTML to both bind to the `AppComponent.color`
The developer should be able to write the following template HTML to both bind to the `AppComponent.color`
and fall back to "violet" as the default color.
+makeExample('attribute-directives/ts/src/app/app.component.html', 'defaultColor')(format=".")
:marked
Angular knows that the `defaultColor` binding belongs to the `HighlightDirective`
Angular knows that the `defaultColor` binding belongs to the `HighlightDirective`
because you made it _public_ with the `@Input` !{_decorator}.

Here's how the harness should work when you're done coding.
Expand Down Expand Up @@ -368,11 +368,11 @@ a#why-input
+makeExample('attribute-directives/ts/src/app/highlight.directive.ts','color')

:marked
Either way, the `@Input` !{_decorator} tells Angular that this property is
Either way, the `@Input` !{_decorator} tells Angular that this property is
_public_ and available for binding by a parent component.
Without `@Input`, Angular refuses to bind to the property.

You've bound template HTML to component properties before and never used `@Input`.
You've bound template HTML to component properties before and never used `@Input`.
What's different?

The difference is a matter of trust.
Expand All @@ -384,9 +384,9 @@ a#why-input
But a component or directive shouldn't blindly trust _other_ components and directives.
The properties of a component or directive are hidden from binding by default.
They are _private_ from an Angular binding perspective.
When adorned with the `@Input` !{_decorator}, the property becomes _public_ from an Angular binding perspective.
When adorned with the `@Input` !{_decorator}, the property becomes _public_ from an Angular binding perspective.
Only then can it be bound by some other component or directive.

You can tell if `@Input` is needed by the position of the property name in a binding.

* When it appears in the template expression to the ***right*** of the equals (=),
Expand All @@ -399,7 +399,7 @@ a#why-input
Now apply that reasoning to the following example:
+makeExample('attribute-directives/ts/src/app/app.component.html','color')(format=".")
:marked
* The `color` property in the expression on the right belongs to the template's component.
* The `color` property in the expression on the right belongs to the template's component.
The template and its component trust each other.
The `color` property doesn't require the `@Input` !{_decorator}.

Expand Down
Loading