docs(dev guide): attribute-directives - move html excerpt to .html file

Jade can’t parse inlined Angular adorned HTML properly, so it is best
to put such source in a file and include with `makeExample`.

Author: chalin

public/docs/_examples/attribute-directives/dart/lib/app_component_1.html

@@ -1,3 +1,7 @@
 <!-- #docregion -->
 <h1>My First Attribute Directive</h1>
 <p myHighlight>Highlight me!</p>
+<!-- #enddocregion -->
+<!-- #docregion p-style-background -->
+<p [style.background]="'lime'">I am green with envy!</p>
+<!-- #enddocregion p-style-background -->

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

@@ -2,3 +2,6 @@
 <h1>My First Attribute Directive</h1>
 <p myHighlight>Highlight me!</p>
 <!-- #enddocregion -->
+<!-- #docregion p-style-background -->
+<p [style.background]="'lime'">I am green with envy!</p>
+<!-- #enddocregion p-style-background -->

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

@@ -36,8 +36,8 @@ p.
   :marked
     We don't need *any* directive to simply set the background color.
     We can set it with the special [Style Binding](template-syntax.html#style-binding) like this:
-  code-example(language="html" escapse="html").
-    <p [style.background]="'lime'">I am green with envy!</p>
+
+  +makeExample('attribute-directives/ts/app/app.component.1.html','p-style-background')
 
   :marked
     That wouldn't be nearly as much fun as creating our own directive.