Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

docs(toh): update live example links #1602

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions public/docs/dart/latest/tutorial/index.jade
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@ include ../_util-fns

+includeShared('{ts}', 'intro')

:marked
[View the source code](https://github.com/angular/angular.io/tree/master/public/docs/_examples/toh-5/dart)
p Run the #[+liveExampleLink2('', 'toh-5')].

+includeShared('{ts}', 'main')

6 changes: 2 additions & 4 deletions public/docs/dart/latest/tutorial/toh-pt1.jade
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,13 @@ include ../_util-fns

.callout.is-helpful
header Source code
:marked
The complete source code for the example app in this chapter is
[in GitHub](https://github.com/angular/angular.io/tree/master/public/docs/_examples/toh-1/dart).
p Run the #[+liveExampleLink2('', 'toh-1')] for this part.

:marked
## Keep the app compiling and running
We want to start the Dart compiler, have it watch for changes, and start our server. We'll do this by typing

code-example(format="" language="bash").
code-example(language="bash").
pub serve

:marked
Expand Down
6 changes: 2 additions & 4 deletions public/docs/dart/latest/tutorial/toh-pt2.jade
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,7 @@ include ../_util-fns

.callout.is-helpful
header Source code
:marked
The complete source code for the example app in this chapter is
[in GitHub](https://github.com/angular/angular.io/tree/master/public/docs/_examples/toh-2/dart).
p Run the #[+liveExampleLink2('', 'toh-2')] for this part.

.l-main-section
:marked
Expand All @@ -38,7 +36,7 @@ include ../_util-fns
### Keep the app compiling and running
We want to start the Dart compiler, have it watch for changes, and start our server. We'll do this by typing

code-example(format="." language="bash").
code-example(language="bash").
pub serve

:marked
Expand Down
3 changes: 1 addition & 2 deletions public/docs/dart/latest/tutorial/toh-pt3.jade
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@ include ../_util-fns
Our app is growing.
Use cases are flowing in for reusing components, passing data to components, and creating more reusable assets. Let's separate the heroes list from the hero details and make the details component reusable.

The complete source code for the example app in this chapter is
[in GitHub](https://github.com/angular/angular.io/tree/master/public/docs/_examples/toh-3/dart).
p Run the #[+liveExampleLink2('', 'toh-3')] for this part.

.l-main-section
:marked
Expand Down
5 changes: 2 additions & 3 deletions public/docs/dart/latest/tutorial/toh-pt4.jade
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@ include ../_util-fns
Because data services are invariably asynchronous,
we'll finish the chapter with a promise-based version of the data service.

The complete source code for the example app in this chapter is
[in GitHub](https://github.com/angular/angular.io/tree/master/public/docs/_examples/toh-4/dart).
p Run the #[+liveExampleLink2('', 'toh-4')] for this part.

.l-main-section
:marked
Expand All @@ -42,7 +41,7 @@ include ../_util-fns
Open a terminal/console window.
Start the Dart compiler, watch for changes, and start our server by entering the command:

code-example(format="." language="bash").
code-example(language="bash").
pub serve

:marked
Expand Down
7 changes: 3 additions & 4 deletions public/docs/dart/latest/tutorial/toh-pt5.jade
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,8 @@ figure.image-display
:marked
The [Routing and Navigation](../guide/router.html) chapter covers the router in more detail
than we will in this tour.
:marked
The complete source code for the example app in this chapter is
[in GitHub](https://github.com/angular/angular.io/tree/master/public/docs/_examples/toh-5/dart).

p Run the #[+liveExampleLink2('', 'toh-5')] for this part.

.l-main-section
:marked
Expand Down Expand Up @@ -48,7 +47,7 @@ figure.image-display
Open a terminal/console window.
Start the Dart compiler, watch for changes, and start our server by entering the command:

code-example(format="." language="bash").
code-example(language="bash").
pub serve

:marked
Expand Down
3 changes: 1 addition & 2 deletions public/docs/ts/latest/tutorial/index.jade
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,7 @@ include ../_util-fns
to chapters with greater depth.
// #enddocregion intro

:marked
[Run the live example](/resources/live-examples/toh-6/ts/plnkr.html)
p Run the #[+liveExampleLink2('', 'toh-6')].

// #docregion main
.l-main-section
Expand Down
12 changes: 6 additions & 6 deletions public/docs/ts/latest/tutorial/toh-pt1.jade
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ include ../_util-fns

Every story starts somewhere. Our story starts where the [QuickStart](../quickstart.html) ends.

[Run the live example for part 1](/resources/live-examples/toh-1/ts/plnkr.html)

p Run the #[+liveExampleLink2('', 'toh-1')] for this part.
:marked
Create a folder called `angular2-tour-of-heroes` and follow the [QuickStart](../quickstart.html) steps
which provide the prerequisites, the folder structure, and the core files for our Tour of Heroes.

Expand All @@ -33,7 +33,7 @@ include ../_quickstart_repo
## Keep the app transpiling and running
We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing

code-example(format="" language="bash").
code-example(language="bash").
npm start

:marked
Expand Down Expand Up @@ -170,8 +170,8 @@ code-example(language="html").
using the built-in `ngModel` directive.
* The `ngModel` directive also propagates changes to every other binding of the `hero.name`.

[Run the live example for part 1](/resources/live-examples/toh-1/ts/plnkr.html)

p Run the #[+liveExampleLink2('', 'toh-1')] for this part.
:marked
Here's the complete `app.component.ts` as it stands now:

+makeExample('toh-1/ts/app/app.component.ts', 'pt1', 'app.component.ts')
Expand All @@ -183,4 +183,4 @@ code-example(language="html").
We also want to allow the user to select a hero and display their details.
We’ll learn more about how to retrieve lists, bind them to the
template, and allow a user to select it in the
[next tutorial chapter](./toh-pt2.html).
[next tutorial chapter](./toh-pt2.html).
10 changes: 5 additions & 5 deletions public/docs/ts/latest/tutorial/toh-pt2.jade
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ include ../_util-fns
We’ll expand our Tour of Heroes app to display a list of heroes,
allow the user to select a hero, and display the hero’s details.

[Run the live example for part 2](/resources/live-examples/toh-2/ts/plnkr.html)

p Run the #[+liveExampleLink2('', 'toh-2')] for this part.
:marked
Let’s take stock of what we’ll need to display a list of heroes.
First, we need a list of heroes. We want to display those heroes in the view’s template,
so we’ll need a way to do that.
Expand Down Expand Up @@ -38,7 +38,7 @@ include ../_util-fns
### Keep the app transpiling and running
We want to start the TypeScript compiler, have it watch for changes, and start our server. We'll do this by typing

code-example(format="." language="bash").
code-example(language="bash").
npm start

:marked
Expand Down Expand Up @@ -301,8 +301,8 @@ code-example(format="." language="bash").
* We added the ability to select a hero and show the hero’s details
* We learned how to use the built-in directives `ngIf` and `ngFor` in a component’s template

[Run the live example for part 2](/resources/live-examples/toh-2/ts/plnkr.html)

p Run the #[+liveExampleLink2('', 'toh-2')] for this part.
:marked
### The Road Ahead
Our Tour of Heroes has grown, but it’s far from complete.
We can't put the entire app into a single component.
Expand Down
4 changes: 2 additions & 2 deletions public/docs/ts/latest/tutorial/toh-pt3.jade
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ include ../_util-fns
Our app is growing.
Use cases are flowing in for reusing components, passing data to components, and creating more reusable assets. Let's separate the heroes list from the hero details and make the details component reusable.

[Run the live example for part 3](/resources/live-examples/toh-3/ts/plnkr.html)
p Run the #[+liveExampleLink2('', 'toh-3')] for this part.

.l-main-section
:marked
Expand Down Expand Up @@ -242,7 +242,7 @@ code-example(format=".")
* We learned to bind a parent component to a child component.
* We learned to declare the application directives we need in a `directives` array.

[Run the live example for part 3](/resources/live-examples/toh-3/ts/plnkr.html).
p Run the #[+liveExampleLink2('', 'toh-3')] for this part.

.l-main-section
:marked
Expand Down
10 changes: 5 additions & 5 deletions public/docs/ts/latest/tutorial/toh-pt4.jade
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@ include ../_util-fns
Because data services are invariably asynchronous,
we'll finish the chapter with a promise-based version of the data service.

:marked
[Run the live example for part 4](/resources/live-examples/toh-4/ts/plnkr.html)
p Run the #[+liveExampleLink2('', 'toh-4')] for this part.

.l-main-section
:marked
Expand All @@ -41,12 +40,13 @@ include ../_util-fns
.file systemjs.config.js
.file tsconfig.json
.file typings.json

:marked
### Keep the app transpiling and running
Open a terminal/console window.
Start the TypeScript compiler, watch for changes, and start our server by entering the command:

code-example(format="." language="bash").
code-example(language="bash").
npm start

:marked
Expand Down Expand Up @@ -340,8 +340,8 @@ a#child-component
* We created mock hero data and imported them into our service
* We designed our service to return a promise and our component to get our data from the promise

[Run the live example for part 4](/resources/live-examples/toh-4/ts/plnkr.html)

p Run the #[+liveExampleLink2('', 'toh-4')] for this part.
:marked
### The Road Ahead
Our Tour of Heroes has become more reusable using shared components and services.
We want to create a dashboard, add menu links that route between the views, and format data in a template.
Expand Down
12 changes: 7 additions & 5 deletions public/docs/ts/latest/tutorial/toh-pt5.jade
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,9 @@ figure.image-display
:marked
The [Routing and Navigation](../guide/router-deprecated.html) chapter covers the router in more detail
than we will in this tour.
:marked
[Run the live example](/resources/live-examples/toh-5/ts/plnkr.html).

p Run the #[+liveExampleLink2('', 'toh-5')] for this part.

.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
Expand Down Expand Up @@ -55,7 +56,7 @@ figure.image-display
Open a terminal/console window and enter the following command to
start the TypeScript compiler, start the server, and watch for changes:

code-example(format="." language="bash").
code-example(language="bash").
npm start

:marked
Expand Down Expand Up @@ -646,10 +647,11 @@ figure.image-display
.l-main-section
:marked
## Application structure and code
Review the sample source code [in the live example for this chapter](/resources/live-examples/toh-5/ts/plnkr.html).
p.
Review the sample source code in the #[+liveExampleLink2('', 'toh-5')] for this part.
Verify that we have the following structure:

:marked
.filetree
.file angular2-tour-of-heroes
.children
Expand Down
6 changes: 3 additions & 3 deletions public/docs/ts/latest/tutorial/toh-pt6.jade
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ include ../_util-fns
and save these changes back to the server.

In this chapter we teach our application to make the corresponding http calls to a remote server's web api.
:marked
[Run the live example](/resources/live-examples/toh-6/ts/plnkr.html).

p Run the #[+liveExampleLink2('', 'toh-6')] for this part.

.l-main-section
:marked
Expand All @@ -21,7 +21,7 @@ include ../_util-fns
Open a terminal/console window and enter the following command to
start the TypeScript compiler, start the server, and watch for changes:

code-example(format="." language="bash").
code-example(language="bash").
npm start

:marked
Expand Down