honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(toh): update live example links (#1602)

This commit is contained in:
Patrice Chalin 2016-06-07 15:51:25 -07:00 committed by Kathy Walrath
parent afee8dbe7e
commit 7e52648ee7
13 changed files with 40 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/docs/dart/latest/tutorial/index.jade
View File

@ -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
public/docs/dart/latest/tutorial/toh-pt1.jade
View File

@ -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

6
public/docs/dart/latest/tutorial/toh-pt2.jade
View File

@ -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
@ -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

3
public/docs/dart/latest/tutorial/toh-pt3.jade
View File

@ -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

5
public/docs/dart/latest/tutorial/toh-pt4.jade
View File

@ -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
@ -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

7
public/docs/dart/latest/tutorial/toh-pt5.jade
View File

@ -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
@ -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

3
public/docs/ts/latest/tutorial/index.jade
View File

@ -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

12
public/docs/ts/latest/tutorial/toh-pt1.jade
View File

@ -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.
@ -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
@ -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')
@ -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
public/docs/ts/latest/tutorial/toh-pt2.jade
View File

@ -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.
@ -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
@ -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.

4
public/docs/ts/latest/tutorial/toh-pt3.jade
View File

@ -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
@ -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

10
public/docs/ts/latest/tutorial/toh-pt4.jade
View File

@ -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
@ -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
@ -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.

12
public/docs/ts/latest/tutorial/toh-pt5.jade
View File

@ -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
@ -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
@ -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

6
public/docs/ts/latest/tutorial/toh-pt6.jade
View File

@ -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
@ -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