docs(attribute-directives): copy tweaks (#3284)

public/docs/_examples/attribute-directives/ts/src/app/app.component.1.html

@@ -1,6 +1,8 @@
 <!-- #docregion -->
 <h1>My First Attribute Directive</h1>
+<!-- #docregion applied -->
 <p myHighlight>Highlight me!</p>
+<!-- #enddocregion applied -->
 <!-- #enddocregion -->
 
 <!-- #docregion color-1 -->

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

@@ -24,13 +24,13 @@ 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.
+  
+  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.
+  You saw a component for the first time in the [QuickStart](../quickstart.html) guide.
 
   *Structural Directives* change the structure of the view.
   Two examples are [NgFor](template-syntax.html#ngFor) and [NgIf](template-syntax.html#ngIf).
@@ -49,29 +49,19 @@ a#write-directive
   the attribute.
   The controller class implements the desired directive behavior.
 
-  This page demonstrates building a simple attribute
+  This page demonstrates building a simple _myHighlight_ attribute
   directive to set an element's background color
-  when the user hovers over that element.
-.l-sub-section
-  :marked
-    Technically, a directive isn't necessary to simply set the background color. Style binding can set styles as follows:
-
-  +makeExample('attribute-directives/ts/src/app/app.component.1.html','p-style-background')
-
-  :marked
-    Read more about [style binding](template-syntax.html#style-binding) on the [Template Syntax](template-syntax.html) page.
-
-    For a simple example, though, this will demonstrate how attribute directives work.
-
+  when the user hovers over that element. You can apply it like this:
 
++makeExample('attribute-directives/ts/src/app/app.component.1.html','applied')
 
 :marked
   ### Write the directive code
-  Follow the [setup](setup.html) instructions for creating a new project
+  Follow the [setup](setup.html) instructions for creating a new local project
   named <span ngio-ex>attribute-directives</span>.
 
 :marked
-  Create the following source file in the indicated folder with the following code:
+  Create the following source file in `src/app` with the following code:
 +makeExample('src/app/highlight.directive.1.ts')
 
 block highlight-directive-1
@@ -91,14 +81,14 @@ block highlight-directive-1
   The [CSS selector for an attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)
   is the attribute name in square brackets.
   Here, the directive's selector is `[myHighlight]`.
-  Angular will locate all elements in the template that have an attribute named `myHighlight`.
+  Angular locates all elements in the template that have an attribute named `myHighlight`.
 .l-sub-section
   :marked
     ### Why not call it "highlight"?
     Though *highlight* is a more concise name than *myHighlight* and would work,
     a best practice is to prefix selector names to ensure
     they don't conflict with  standard HTML attributes.
-    This also reduces the risk colliding with third-party directive names.
+    This also reduces the risk of colliding with third-party directive names.
 
     Make sure you do **not** prefix the `highlight` directive name with **`ng`** because
     that prefix is reserved for Angular and using it could cause bugs that are difficult to diagnose. For a simple demo, the short prefix, `my`, helps distinguish your custom directive.
@@ -120,7 +110,7 @@ a#apply-directive
   ## Apply the attribute directive
   To use the new `HighlightDirective`, create a template that
   applies the directive as an attribute to a paragraph (`<p>`) element.
-  In Angular terms, the `<p>` element will be the attribute **host**.
+  In Angular terms, the `<p>` element is the attribute **host**.
 p
   | Put the template in its own
   code #[+adjExPath('app.component.html')]
@@ -210,7 +200,7 @@ a#bindings
   ## Pass values into the directive with an _@Input_ data binding
 
   Currently the highlight color is hard-coded _within_ the directive. That's inflexible.
-  Let the user of the directive set the color in the template with a binding.
+  In this section, you give the developer the power to set the highlight color while applying the directive.
 
   Start by adding a `highlightColor` property to the directive class like this:
 +makeExample('attribute-directives/ts/src/app/highlight.directive.2.ts','color', 'src/app/highlight.directive.ts')
@@ -300,8 +290,9 @@ 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;
-  is hard-coded as "red". Let the template developer set the default color.
+  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`:
 +makeExcerpt('attribute-directives/ts/src/app/highlight.directive.ts', 'defaultColor','src/app/highlight.directive.ts (defaultColor)')