chore(examples): Updated live example links to use helper directive
closes #2005
This commit is contained in:
Brandon Roberts
Ward Bell
parent
531d6a8bce
commit
b93fb12fea
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"),
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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.*
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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' });
|
||||
|
|
|
|||
|
|
@ -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>';
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
Loading…
Reference in New Issue