docs(*): misc fixes to prose in support of jade2ng (#2266)

Fixes to prose “syntax”. Anomalies detected by jade2ng.
Also updated the main _utils-fn.jade in support of jade2ng as well.

public/_includes/_util-fns.jade

@@ -154,64 +154,66 @@ mixin makeJson( filePath, jsonConfig, title, stylePatterns)
     else
       != styleString(jsonExtract, stylePatterns)
 
-- // Open (and close) an explanation <div>. See QuickStart
+if !jade2ng
-script.
+  //- Open (and close) an explanation <div>. See QuickStart
-  function why(id, backTo) {
+  script.
-    var id = "#"+id;
+    function why(id, backTo) {
-    var el = document.querySelector(id);
+      var id = "#"+id;
-    el.hidden=el.hidden=!el.hidden;
+      var el = document.querySelector(id);
+      el.hidden=el.hidden=!el.hidden;
 
-    if (el.hidden && backTo){
+      if (el.hidden && backTo){
-      // the next line is required to work around a bug in WebKit (Chrome / Safari)
+        // the next line is required to work around a bug in WebKit (Chrome / Safari)
-      location.href = "#";
+        location.href = "#";
-      location.href =  "#" + backTo;
+        location.href =  "#" + backTo;
+      }
     }
-  }
+  script.
-script.
+    function verbose(isVerbose) {
-  function verbose(isVerbose) {
+      isVerbose = !! isVerbose;
-    isVerbose = !! isVerbose;
+      var el = document.querySelector('button.verbose.off');
-    var el = document.querySelector('button.verbose.off');
+      el.style.display = isVerbose ? 'block' : 'none';
-    el.style.display = isVerbose ? 'block' : 'none';
+      var el = document.querySelector('button.verbose.on');
-    var el = document.querySelector('button.verbose.on');
+      el.style.display = isVerbose ? 'none' : 'block';
-    el.style.display = isVerbose ? 'none' : 'block';
 
-    CCSStylesheetRuleStyle('main','.l-verbose-section', 'display',
+      CCSStylesheetRuleStyle('main','.l-verbose-section', 'display',
-      isVerbose ? 'block' : 'none');
+        isVerbose ? 'block' : 'none');
-  }
+    }
 
-script.
+  script.
-  function CCSStylesheetRuleStyle(stylesheet, selectorText, style, value){
+    function CCSStylesheetRuleStyle(stylesheet, selectorText, style, value){
-    /* returns the value of the element style of the rule in the stylesheet
+      /* returns the value of the element style of the rule in the stylesheet
-    *  If no value is given, reads the value
+      *  If no value is given, reads the value
-    *  If value is given, the value is changed and returned
+      *  If value is given, the value is changed and returned
-    *  If '' (empty string) is given, erases the value.
+      *  If '' (empty string) is given, erases the value.
-    *  The browser will apply the default one
+      *  The browser will apply the default one
-    *
+      *
-    * string stylesheet: part of the .css name to be recognized, e.g. 'default'
+      * string stylesheet: part of the .css name to be recognized, e.g. 'default'
-    * string selectorText: css selector, e.g. '#myId', '.myClass', 'thead td'
+      * string selectorText: css selector, e.g. '#myId', '.myClass', 'thead td'
-    * string style: camelCase element style, e.g. 'fontSize'
+      * string style: camelCase element style, e.g. 'fontSize'
-    * string value optional : the new value
+      * string value optional : the new value
-    */
+      */
-    var CCSstyle = undefined, rules, sheet;
+      var CCSstyle = undefined, rules, sheet;
-    for(var m in document.styleSheets){
+      for(var m in document.styleSheets){
-      sheet = document.styleSheets[m];
+        sheet = document.styleSheets[m];
-      if(sheet.href && sheet.href.indexOf(stylesheet) != -1){
+        if(sheet.href && sheet.href.indexOf(stylesheet) != -1){
-      rules = sheet[document.all ? 'rules' : 'cssRules'];
+        rules = sheet[document.all ? 'rules' : 'cssRules'];
-      for(var n in rules){
+        for(var n in rules){
-        console.log(rules[n].selectorText);
+          console.log(rules[n].selectorText);
-        if(rules[n].selectorText == selectorText){
+          if(rules[n].selectorText == selectorText){
-          CCSstyle = rules[n].style;
+            CCSstyle = rules[n].style;
-          break;
+            break;
+          }
+        }
+        break;
         }
       }
-      break;
+      if(value == undefined)
-      }
+        return CCSstyle[style]
+      else
+        return CCSstyle[style] = value
     }
-    if(value == undefined)
+
-      return CCSstyle[style]
-    else
-      return CCSstyle[style] = value
-  }
 //---------------------------------------------------------------------------------------------------------
 //- Converts the given project-relative path (like 'app/main.ts')
 //- to a doc folder relative path (like 'quickstart/ts/app/main.ts')
@@ -298,7 +300,7 @@ script.
 -   } else {
 -     // ``` gets translated to <pre><code>.....</code></pre> and we need
 -     // to remove this from the fragment prefix is 11 long and suffix is 13 long
--     frag = frag.substring(11, frag.length-13);
+-     frag = jade2ng ? frag : frag.substring(11, frag.length-13);
 -     // Uncomment next line for debugging.
 -     // frag = "FileName: " + fullFileName + "   Current path: " + current.path +  " PathToDocs: " + getPathToDocs() + "\n" + frag;
 -     return frag;

public/docs/ts/latest/cookbook/component-communication.jade

@@ -172,9 +172,7 @@ figure.image-display
 :marked
   [Back to top](#top)
 
-parent-to-child-local-var
+.l-main-section#parent-to-child-local-var
-.l-main-section
-<a id="parent-to-child-local-var"></a>
 :marked
   ## Parent interacts with child via *local variable*
   

public/docs/ts/latest/cookbook/visual-studio-2015.jade

@@ -139,7 +139,7 @@ h2#build-and-run Step 7: Build and run the app
   
 .alert.is-important
   :marked
-    Compiler errors such as "*Property ‘map’ does not exist on type ‘Observable<Response>’*" and
+    Compiler errors such as "*Property `map` does not exist on type `Observable<Response>`*" and
     "*Observable cannot be found*" indicate an old release of Visual Studio.
     Exit Visual Studio and follow the [instructions here](https://github.com/Microsoft/TypeScript/issues/8518).
 

public/docs/ts/latest/guide/server-communication.jade

@@ -246,7 +246,7 @@ a#HeroService
   :marked
     Let's return to our study of the `HeroService`.
     
-l-main-section
+.l-main-section
 a#extract-data
 :marked
   ## Process the response object
@@ -410,7 +410,7 @@ block hero-list-comp-add-hero
   h2#promises Fall back to Promises
   :marked
     Although the Angular `http` client API returns an `Observable<Response>` we can turn it into a 
-    [Promise<Response>](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) if we prefer.
+    [`Promise<Response>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) if we prefer.
     It's easy to do and a promise-based version looks much like the observable-based version in simple cases.
   .l-sub-section
     :marked

public/docs/ts/latest/guide/webpack.jade

@@ -431,7 +431,7 @@ code-example(format="").
 p.
   The <code>app.component.html</code> displays this downloadable Angular logo
   <a href="https://raw.githubusercontent.com/angular/angular.io/master/public/resources/images/logos/angular2/angular.png" target="_blank">
-  <img src="https://raw.githubusercontent.com/angular/angular.io/master/public/resources/images/logos/angular2/angular.png" height="40px" title="download Angular logo"></a>.
+  <img src="/resources/images/logos/angular2/angular.png" height="40px" title="download Angular logo"></a>.
 
 
 +makeTabs(

public/docs/ts/latest/quickstart.jade

@@ -26,7 +26,7 @@ h1 Overview
 
 aside.is-right
   :marked
-    The live example link opens the finished application <span if-docs="ts"> in
+    The live example link opens the finished application in
     <a href="http://plnkr.co/" title="Plunker" target="_blank">Plunker</a> so that you can interact
     with the code. You'll find live examples at the start of most sections.
 
@@ -48,7 +48,7 @@ h2 Build this application!
 :marked
   - [Prerequisite](#prereq): Install #{_prereq}.
   - [Step 1](#create-and-configure): Create and configure the project.
-  <li if-docs="ts">[Step 2](#ngmodule): Create your application.</li>
+  <span if-docs="ts"><li>[Step 2](#ngmodule): Create your application.</span>
   - [Step !{step++}](#root-component): Create a component and add it to your application.
   - [Step !{step++}](#main): Start up your application.
   - [Step !{step++}](#index): Define the web page that hosts the application.