diff --git a/public/docs/js/latest/cookbook/ts-to-js.jade b/public/docs/js/latest/cookbook/ts-to-js.jade index c76fee3207..5a834fb5fb 100644 --- a/public/docs/js/latest/cookbook/ts-to-js.jade +++ b/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 TypeScript and JavaScript + code shown in this cookbook.** a(id="modularity") .l-main-section diff --git a/public/docs/js/latest/guide/forms-deprecated.jade b/public/docs/js/latest/guide/forms-deprecated.jade index e17b9fe46c..5a963272c8 100644 --- a/public/docs/js/latest/guide/forms-deprecated.jade +++ b/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 + .l-main-section :marked ## Template-Driven Forms diff --git a/public/docs/js/latest/guide/forms.jade b/public/docs/js/latest/guide/forms.jade index 2613b7b6b7..09a942b236 100644 --- a/public/docs/js/latest/guide/forms.jade +++ b/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 .l-main-section :marked diff --git a/public/docs/js/latest/quickstart.jade b/public/docs/js/latest/quickstart.jade index 2edd48bb7a..315d687414 100644 --- a/public/docs/js/latest/quickstart.jade +++ b/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 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"), diff --git a/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade b/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade index 980e4ecb84..8860d2bfe9 100644 --- a/public/docs/ts/latest/cookbook/a1-a2-quick-reference.jade +++ b/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 **. ## Contents This chapter covers diff --git a/public/docs/ts/latest/cookbook/component-communication.jade b/public/docs/ts/latest/cookbook/component-communication.jade index 014f5ffd88..da69eb5b15 100644 --- a/public/docs/ts/latest/cookbook/component-communication.jade +++ b/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 **. .l-main-section diff --git a/public/docs/ts/latest/cookbook/component-relative-paths.jade b/public/docs/ts/latest/cookbook/component-relative-paths.jade index 814e790e58..4c274d5563 100644 --- a/public/docs/ts/latest/cookbook/component-relative-paths.jade +++ b/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 ** and download the source code from there or simply read the pertinent source here. +makeTabs( diff --git a/public/docs/ts/latest/cookbook/dependency-injection.jade b/public/docs/ts/latest/cookbook/dependency-injection.jade index 81fdb5c1c2..352ecd3c2b 100644 --- a/public/docs/ts/latest/cookbook/dependency-injection.jade +++ b/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 ** 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 code 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 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 confirms that the `alex` parameter is set. @@ -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 confirms that the `alex` parameter is null. *We cannot inject a parent by its base class.* diff --git a/public/docs/ts/latest/cookbook/dynamic-form-deprecated.jade b/public/docs/ts/latest/cookbook/dynamic-form-deprecated.jade index 2efa5f8197..453b46bc7d 100644 --- a/public/docs/ts/latest/cookbook/dynamic-form-deprecated.jade +++ b/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 **. .l-main-section diff --git a/public/docs/ts/latest/cookbook/dynamic-form.jade b/public/docs/ts/latest/cookbook/dynamic-form.jade index e4eb6af1d4..2c865b64cf 100644 --- a/public/docs/ts/latest/cookbook/dynamic-form.jade +++ b/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 **. .l-main-section diff --git a/public/docs/ts/latest/cookbook/set-document-title.jade b/public/docs/ts/latest/cookbook/set-document-title.jade index 7424b1632c..9c545f5a0d 100644 --- a/public/docs/ts/latest/cookbook/set-document-title.jade +++ b/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 **. .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 diff --git a/public/docs/ts/latest/guide/animations.jade b/public/docs/ts/latest/guide/animations.jade index 6a14d4b0d4..9b198261f9 100644 --- a/public/docs/ts/latest/guide/animations.jade +++ b/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 . a(id="example-transitioning-between-states") .l-main-section diff --git a/public/docs/ts/latest/guide/forms-deprecated.jade b/public/docs/ts/latest/guide/forms-deprecated.jade index 0be1f0bfff..f29cb3087a 100644 --- a/public/docs/ts/latest/guide/forms-deprecated.jade +++ b/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 .l-main-section :marked ## Template-Driven Forms diff --git a/public/docs/ts/latest/guide/forms.jade b/public/docs/ts/latest/guide/forms.jade index 929a7ad0dd..90facf5e1f 100644 --- a/public/docs/ts/latest/guide/forms.jade +++ b/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 .l-main-section :marked diff --git a/public/docs/ts/latest/guide/index.jade b/public/docs/ts/latest/guide/index.jade index 9fc8f82f68..282029cda9 100644 --- a/public/docs/ts/latest/guide/index.jade +++ b/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 from the [Architecture](architecture.html) chapter. The link launches a browser-based code editor where we can inspect, modify, save, and download the code. diff --git a/public/docs/ts/latest/guide/router-deprecated.jade b/public/docs/ts/latest/guide/router-deprecated.jade index 5e758ce887..357ce7c10a 100644 --- a/public/docs/ts/latest/guide/router-deprecated.jade +++ b/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 run live. .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 :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 . 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 *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 and download the source code from there. Our final project folder structure looks like this: .filetree diff --git a/public/docs/ts/latest/guide/router.jade b/public/docs/ts/latest/guide/router.jade index 84cc80ffad..e51f04f4dc 100644 --- a/public/docs/ts/latest/guide/router.jade +++ b/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 run live. .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 . :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 . 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 *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 and where you can download the final source code. .l-main-section diff --git a/public/docs/ts/latest/guide/user-input.jade b/public/docs/ts/latest/guide/user-input.jade index f1fe56fb06..681b8d5e51 100644 --- a/public/docs/ts/latest/guide/user-input.jade +++ b/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) + Run the live example :marked ## Binding to user input events diff --git a/public/resources/js/directives/if-docs.js b/public/resources/js/directives/if-docs.js index d273053512..f403cf1695 100644 --- a/public/resources/js/directives/if-docs.js +++ b/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); } diff --git a/public/resources/js/directives/live-example.js b/public/resources/js/directives/live-example.js index bb7f9c404c..1e6a6c749c 100644 --- a/public/resources/js/directives/live-example.js +++ b/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' }); diff --git a/public/resources/js/directives/ngio-ex-path.js b/public/resources/js/directives/ngio-ex-path.js index 72ee27309f..01b7cd546b 100644 --- a/public/resources/js/directives/ngio-ex-path.js +++ b/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 = '' + examplePath + ''; diff --git a/public/resources/js/util.js b/public/resources/js/util.js index 2582df3f27..87ddeed291 100644 --- a/public/resources/js/util.js +++ b/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.