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

Commit 894ff63

Browse files
kapunahelewongwardbell
authored andcommitted
docs(testing): tech edits (#3269)
1 parent c5c4ad0 commit 894ff63

File tree

3 files changed

+622
-518
lines changed

3 files changed

+622
-518
lines changed

public/docs/ts/latest/guide/_data.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@
184184

185185
"testing": {
186186
"title": "Testing",
187-
"intro": "Techniques and practices for testing an Angular app"
187+
"intro": "Techniques and practices for testing an Angular app."
188188
},
189189

190190
"typescript-configuration": {

public/docs/ts/latest/guide/attribute-directives.jade

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -24,19 +24,19 @@ a#directive-overview
2424
## Directives overview
2525

2626
There are three kinds of directives in Angular:
27-
27+
2828
1. Components — directives with a template.
2929
1. Structural directives — change the DOM layout by adding and removing DOM elements.
3030
1. Attribute directives — change the appearance or behavior of an element, component, or another directive.
3131

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

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

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

@@ -151,12 +151,12 @@ figure.image-display
151151

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

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

222222
Notice the `@Input` !{_decorator}. It adds metadata to the class that makes the directive's `highlightColor` property available for binding.
223-
224-
It's called an *input* property because data flows from the binding expression _into_ the directive.
223+
224+
It's called an *input* property because data flows from the binding expression _into_ the directive.
225225
Without that input metadata, Angular rejects the binding; see [below](#why-input "Why add @Input?") for more about that.
226226

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

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

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

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

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

272272
+makeExample('attribute-directives/ts/src/app/highlight.directive.3.ts', 'mouse-enter', 'src/app/highlight.directive.ts (mouse enter)')(format='.')
@@ -280,7 +280,7 @@ a#input-alias
280280
It may be difficult to imagine how this directive actually works.
281281
In this section, you'll turn `AppComponent` into a harness that
282282
lets you pick the highlight color with a radio button and bind your color choice to the directive.
283-
283+
284284
Update `app.component.html` as follows:
285285

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

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

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

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

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

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

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

378378
The difference is a matter of trust.
@@ -384,9 +384,9 @@ a#why-input
384384
But a component or directive shouldn't blindly trust _other_ components and directives.
385385
The properties of a component or directive are hidden from binding by default.
386386
They are _private_ from an Angular binding perspective.
387-
When adorned with the `@Input` !{_decorator}, the property becomes _public_ from an Angular binding perspective.
387+
When adorned with the `@Input` !{_decorator}, the property becomes _public_ from an Angular binding perspective.
388388
Only then can it be bound by some other component or directive.
389-
389+
390390
You can tell if `@Input` is needed by the position of the property name in a binding.
391391

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

0 commit comments

Comments
 (0)