chore(examples): Updated live example links to use helper directive

closes #2005

Author: brandonroberts

public/docs/js/latest/cookbook/ts-to-js.jade

@@ -26,8 +26,8 @@ include ../../../../_includes/_util-fns
 
   [Host and Query Metadata](#other-property-metadata)
 
-  **Run and compare the live [TypeScript](/resources/live-examples/cb-ts-to-js/ts/plnkr.html) and 
-  [JavaScript](/resources/live-examples/cb-ts-to-js/js/plnkr.html) code shown in this cookbook.**
+  **Run and compare the live <live-example name="cb-ts-to-js">TypeScript</live-example> and <live-example name="cb-ts-to-js" lang="js">JavaScript</live-example>
+  code shown in this cookbook.**
 
 a(id="modularity")
 .l-main-section

public/docs/js/latest/guide/forms-deprecated.jade

@@ -35,7 +35,8 @@ include ../_util-fns
 
   - How to share information across controls with template local variables
 
-  [Live Example](/resources/live-examples/forms-deprecated/js/plnkr.html)
+   <live-example>Live Example</live-example>
+   
 .l-main-section
 :marked
   ## Template-Driven Forms

public/docs/js/latest/guide/forms.jade

@@ -35,7 +35,7 @@ include ../_util-fns
 
   - How to share information across controls with template local variables
 
-  [Live Example](/resources/live-examples/forms/js/plnkr.html)
+  <live-example>Live Example</live-example>
 
 .l-main-section
 :marked

public/docs/js/latest/quickstart.jade

@@ -13,7 +13,7 @@ include _util-fns
 :marked
   ## See It Run!
 
-  Running the [live example](/resources/live-examples/quickstart/js/plnkr.html)
+  Running the <live-example></live-example>
   is the quickest way to see an Angular 2 app come to life.
 
   Clicking that link fires up a browser, loads the sample in [plunker](http://plnkr.co/ "Plunker"),

public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade

@@ -6,7 +6,7 @@ a(id="top")
   syntax and its equivalent in Angular 2.
 
 :marked
-  **See the Angular 2 syntax in this [live example](/resources/live-examples/cb-a1-a2-quick-reference/ts/plnkr.html)**.
+  **See the Angular 2 syntax in this <live-example name="cb-a1-a2-quick-reference"></live-example>**.
 
   ## Contents
   This chapter covers

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

@@ -30,7 +30,7 @@ include ../_util-fns
   [Parent and children communicate via a service](#bidirectional-service)
 
 :marked
-  **See the [live example](/resources/live-examples/cb-component-communication/ts/plnkr.html)**.
+  **See the <live-example name="cb-component-communication"></live-example>**.
 
 .l-main-section
 <a id="parent-to-child"></a>

public/docs/ts/latest/cookbook/component-relative-paths.jade

@@ -75,7 +75,7 @@ include ../_util-fns
 :marked
   ## Source
 
-  **We can see the [live example](/resources/live-examples/cb-component-relative-paths/ts/plnkr.html)**
+  **We can see the <live-example name="cb-component-relative-paths"></live-example>**
   and download the source code from there
   or simply read the pertinent source here.
 +makeTabs(

public/docs/ts/latest/cookbook/dependency-injection.jade

@@ -45,7 +45,7 @@ include ../_util-fns
   [Break circularities with a forward class reference (*forwardRef*)](#forwardref)
 
 :marked
-   **See the [live example](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)**
+   **See the <live-example name="cb-dependency-injection"></live-example>**
    of the code supporting this cookbook.        
 
 .l-main-section
@@ -236,7 +236,7 @@ figure.image-display
   The getter for the `hero` property pulls the cached hero from the service.
   And the template displays this data-bound property.
 
-  Find this example in [live code](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)
+  Find this example in <live-example name="cb-dependency-injection">live code</live-example>
   and confirm that the three `HeroBioComponent` instances have their own cached hero data. 
 figure.image-display
   img(src="/resources/images/cookbooks/dependency-injection/hero-bios.png" alt="Bios")    
@@ -535,7 +535,7 @@ a(id='usefactory')
   :marked
     The function retrieves candidate heroes from the `HeroService`, 
     takes `2` of them to be the runners-up, and returns their concatenated names.
-    Look at the [live example](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)
+    Look at the <live-example name="cb-dependency-injection"></live-example>
     for the full source code.
 
 a(id="tokens")
@@ -703,7 +703,7 @@ a(id='alex')
 +makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','cathy','parent-finder.component.ts (CathyComponent)')(format='.')
 :marked
   We added the [@Optional](#optional) qualifier for safety but
-  the [live example](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)
+  the <live-example name="cb-dependency-injection"></live-example>
   confirms that the `alex` parameter is set.
 
   <a id="base-parent"></a>
@@ -737,7 +737,7 @@ a(id='alex')
 +makeExample('cb-dependency-injection/ts/app/parent-finder.component.ts','craig','parent-finder.component.ts (CraigComponent)')(format='.')
 :marked
   Unfortunately, this does not work. 
-  The [live example](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)
+  The <live-example name="cb-dependency-injection"></live-example>
   confirms that the `alex` parameter is null.
   *We cannot inject a parent by its base class.*
 

public/docs/ts/latest/cookbook/dynamic-form-deprecated.jade

@@ -35,7 +35,7 @@ include ../_util-fns
       [Dynamic Template](#dynamic-template)
 
 :marked
-   **See the [live example](/resources/live-examples/cb-dynamic-form-deprecated/ts/plnkr.html)**.
+   **See the <live-example name="cb-dynamic-form-deprecated"></live-example>**.
 
 .l-main-section
 <a id="object-model"></a>

public/docs/ts/latest/cookbook/dynamic-form.jade

@@ -37,7 +37,7 @@ include ../_util-fns
       [Dynamic Template](#dynamic-template)
 
 :marked
-   **See the [live example](/resources/live-examples/cb-dynamic-form/ts/plnkr.html)**.
+   **See the <live-example name="cb-dynamic-form"></live-example>**.
 
 .l-main-section
 <a id="bootstrap"></a>

public/docs/ts/latest/cookbook/set-document-title.jade

@@ -5,7 +5,7 @@ a(id='top')
   Our app should be able to make the browser title bar say whatever we want it to say.
   This cookbook explains how to do it.
 :marked
-  **See the [live example](/resources/live-examples/cb-set-document-title/ts/plnkr.html)**.
+  **See the <live-example name="cb-set-document-title"></live-example>**.
 .l-sub-section
   img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px")
   :marked

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

@@ -37,7 +37,7 @@ include ../_util-fns
 
 .l-sub-section
   :marked
-      The examples referenced in this chapter are available as a [live example](/resources/live-examples/animations/ts/plnkr.html).
+      The examples referenced in this chapter are available as a <live-example></live-example>.
 
 a(id="example-transitioning-between-states")
 .l-main-section

public/docs/ts/latest/guide/forms-deprecated.jade

@@ -35,7 +35,7 @@ include ../_util-fns
 
   - sharing information among controls with template reference variables
 
-  [Live Example](/resources/live-examples/forms-deprecated/ts/plnkr.html)
+  <live-example>Live Example</live-example>
 .l-main-section
 :marked
   ## Template-Driven Forms

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

@@ -37,7 +37,7 @@ include ../_util-fns
 
   - sharing information among controls with template reference variables
 
-  [Live Example](/resources/live-examples/forms/ts/plnkr.html)
+  <live-example>Live Example</live-example>
 
 .l-main-section
 :marked

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

@@ -100,7 +100,7 @@ table(width="100%")
 block example-links
   :marked
     Look for a link to a running version of that sample near the top of each page,
-    such as this [live example](/resources/live-examples/architecture/ts/plnkr.html) from the [Architecture](architecture.html) chapter.
+    such as this <live-example></live-example> from the [Architecture](architecture.html) chapter.
 
     The link launches a browser-based code editor where we can inspect, modify, save, and download the code.
 

public/docs/ts/latest/guide/router-deprecated.jade

@@ -10,7 +10,7 @@ include ../_util-fns
   as users perform application tasks.
 
   We cover the router's primary features in this chapter, illustrating them through the evolution
-  of a small application that we can [run live](/resources/live-examples/router-deprecated/ts/plnkr.html).
+  of a small application that we can <live-example>run live</live-example>.
 .l-sub-section
   img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px")
   :marked
@@ -207,7 +207,7 @@ table
     We discuss code and design decisions pertinent to routing and application design.
     We gloss over everything in between.
 
-    The full source is available in the [live example](/resources/live-examples/router-deprecated/ts/plnkr.html).
+    The full source is available in the <live-example></live-example>
 :marked
   Our client is the Hero Employment Agency.
   Heroes need work and The Agency finds Crises for them to solve.
@@ -216,7 +216,7 @@ table
   1. A *Crisis Center* where we maintain the list of crises for assignment to heroes.
   1. A *Heroes* area where we maintain the list of heroes employed by The Agency.
 
-  Run the [live example](/resources/live-examples/router-deprecated/ts/plnkr.html).
+  Run the <live-example></live-example>.
   It opens in the *Crisis Center*.  We'll come back to that.
 
   Click the *Heroes* link. We're presented with a list of Heroes.
@@ -1110,7 +1110,7 @@ code-example(format="." language="bash").
 
 .l-sub-section
   :marked
-    The [live example](/resources/live-examples/router-deprecated/ts/plnkr.html) *does* highlight the selected
+    The <live-example></live-example> *does* highlight the selected
     row because it demonstrates the final state of the application which includes the steps we're *about* to cover.
     At the moment we're describing the state of affairs *prior* to those steps.
 :marked
@@ -1202,7 +1202,7 @@ code-example(format="." language="bash").
   As we end our chapter, we take a parting look at
   the entire application.
 
-  We can always try the [live example](/resources/live-examples/router-deprecated/ts/plnkr.html) and download the source code from there.
+  We can always try the <live-example></live-example> and download the source code from there.
 
   Our final project folder structure looks like this:
 .filetree

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

@@ -10,7 +10,7 @@ include ../_util-fns
   as users perform application tasks.
 
   We cover the router's primary features in this chapter, illustrating them through the evolution
-  of a small application that we can [run live](/resources/live-examples/router/ts/plnkr.html).
+  of a small application that we can <live-example>run live</live-example>.
 .l-sub-section
   img(src='/resources/images/devguide/plunker-separate-window-button.png' alt="pop out the window" align="right" style="margin-right:-20px")
   :marked
@@ -250,7 +250,7 @@ table
     We discuss code and design decisions pertinent to routing and application design.
     We gloss over everything in between.
 
-    The full source is available in the [live example](/resources/live-examples/router/ts/plnkr.html).
+    The full source is available in the <live-example></live-example>.
 :marked
   Our client is the Hero Employment Agency.
   Heroes need work and The Agency finds Crises for them to solve.
@@ -259,7 +259,7 @@ table
   1. A *Crisis Center* where we maintain the list of crises for assignment to heroes.
   1. A *Heroes* area where we maintain the list of heroes employed by The Agency.
 
-  Run the [live example](/resources/live-examples/router/ts/plnkr.html).
+  Run the <live-example></live-example>.
   It opens in the *Crisis Center*.  We'll come back to that.
 
   Click the *Heroes* link. We're presented with a list of Heroes.
@@ -1442,7 +1442,7 @@ code-example(format="." language="bash").
 
 .l-sub-section
   :marked
-    The [live example](/resources/live-examples/router/ts/plnkr.html) *does* highlight the selected
+    The <live-example></live-example> *does* highlight the selected
     row because it demonstrates the final state of the application which includes the steps we're *about* to cover.
     At the moment we're describing the state of affairs *prior* to those steps.
 :marked
@@ -1529,7 +1529,7 @@ figure.image-display
 :marked
   ## Wrap Up
   We've covered a lot of ground in this chapter and the application is too big to reprint here.
-  Please visit the [live example](/resources/live-examples/router/ts/plnkr.html) and
+  Please visit the <live-example></live-example> and
   where you can download the final source code.
 
 .l-main-section

public/docs/ts/latest/guide/user-input.jade

@@ -6,7 +6,7 @@ include ../_util-fns
   In this chapter we learn to bind to those events using the Angular
   event binding syntax.
 
-  [Run the live example](/resources/live-examples/user-input/ts/plnkr.html)
+  <live-example>Run the live example</live-example>
 
 :marked
   ## Binding to user input events

public/resources/js/directives/if-docs.js

@@ -17,7 +17,7 @@ angularIO.directive('ifDocs', ['ngIfDirective', '$location', function (ngIfDirec
     terminal: ngIf.terminal,
     restrict: ngIf.restrict,
     link: function (scope, element, attrs) {
-      var ngIfCond =  (attrs.ifDocs === 'dart') == !NgIoUtil.isDartDoc($location);
+      var ngIfCond =  (attrs.ifDocs === 'dart') == !NgIoUtil.isDoc($location, 'dart');
       attrs.ngIf = function () { return !ngIfCond; }
       ngIf.link.apply(ngIf, arguments);
     }

public/resources/js/directives/live-example.js

@@ -28,10 +28,12 @@ angularIO.directive('liveExample', ['$location', function ($location) {
       var ex = attrs.name || NgIoUtil.getExampleName($location);
       var href, template;
 
-      var isForDart = attrs.lang === 'dart' || NgIoUtil.isDartDoc($location);
+      var isForDart = attrs.lang === 'dart' || NgIoUtil.isDoc($location, 'dart');
+      var isForJs = attrs.lang === 'js' || NgIoUtil.isDoc($location, 'js');
+      var exLang = isForDart ? 'dart' : isForJs ? 'js' : 'ts';
       var href = isForDart
         ? 'http://angular-examples.github.io/' + ex
-        : '/resources/live-examples/' + ex + '/ts/plnkr.html';
+        : '/resources/live-examples/' + ex + '/' + exLang + '/plnkr.html';
 
       // Link to live example.
       var template = a(text, { href: href, target: '_blank' });

public/resources/js/directives/ngio-ex-path.js

@@ -23,7 +23,7 @@ angularIO.directive('ngioEx', ['$location', function ($location) {
 
     compile: function (tElement, attrs) {
       var examplePath = attrs.path || tElement.text();
-      if (NgIoUtil.isDartDoc($location) || attrs.lang === 'dart') {
+      if (NgIoUtil.isDoc($location, 'dart') || attrs.lang === 'dart') {
         examplePath = NgIoUtil.adjustTsExamplePathForDart(examplePath);
       }
       var template = '<code>' + examplePath + '</code>';

public/resources/js/util.js

@@ -4,9 +4,9 @@ var NgIoUtil = (function () {
 
     function NgIoUtil() { }
 
-    NgIoUtil.isDartDoc = function ($location) {
+    NgIoUtil.isDoc = function ($location, lang) {
         var loc = $location.absUrl();
-        return loc.includes('/docs/dart/');
+        return loc.includes('/docs/' + lang + '/');
     };
 
     // The following util functions are adapted from _utils-fn.jade.