(review:) Quick starter and TOH, patch up new paragraphs and mis-alignments.

This commit is contained in:
Zhimin YE (Rex) 2016-08-16 10:16:31 +01:00
parent 650a6033a1
commit f26ec0a889
6 changed files with 26 additions and 12 deletions

View File

@ -101,7 +101,7 @@ block download-source
[download the QuickStart source](https://github.com/angular/quickstart/blob/master/README.md)
from github and follow its brief instructions.
如果不想跟着这里的操作指南来一步步可以从github[下载“快速起步”的源码](https://github.com/angular/quickstart/blob/master/README.md),这样只要注意那些操作要点就行了。
如果不想跟着这里的操作指南来一步步可以从github[下载“快速起步”的源码](https://github.com/angular/quickstart/blob/master/README.md),这样只要注意那些操作要点就行了。
.l-main-section
button(class="verbose off md-primary md-button md-ink-ripple", type="button", onclick="verbose(false)").
@ -731,8 +731,6 @@ h2#index 步骤5添加#[code index.html]
在“快速起步”中当应用中的一个TypeScript文件有这样的一个导入语句时
+makeExcerpt('app/main.ts', 'import')
:marked
SystemJS就会开始介入。
:marked
Notice that the module name (after `from`) does not mention a filename extension.
In the configuration we tell SystemJS to default the extension to `js`, a JavaScript file.
@ -865,7 +863,7 @@ block build-app
//- Nothing for ts.
:marked
## Make some changes
### Make some changes
### 做点改变
Try changing the message to "My SECOND Angular 2 app".

View File

@ -251,7 +251,9 @@ code-example(language="bash").
[模板语法](../guide/template-syntax.html#ngModel)两章
:marked
Lets update the template to use the **`ngModel`** built-in directive for two-way binding.
Let's update the template to use the **`ngModel`** built-in directive for two-way binding.
接下来更新模板,加入用于双向绑定的内建指令**`ngModel`**。
Replace the `<input>` with the following HTML

View File

@ -3,12 +3,14 @@ include ../_util-fns
:marked
# It Takes Many Heroes
# 需要多个英雄
# 显示多个英雄
Our story needs more heroes.
Well expand our Tour of Heroes app to display a list of heroes,
allow the user to select a hero, and display the heros details.
我们需要管理多个英雄。让我们来扩展英雄指南应用,让它显示一个英雄列表,并允许用户选择一个英雄,查看该英雄的详细信息。
Run the <live-example></live-example> for this part.
运行这部分的<live-example></live-example>。
@ -18,13 +20,13 @@ include ../_util-fns
so well need a way to do that.
我们来盘点一下显示英雄列表都需要些什么。
首先,我们需要一份英雄列表数据。我们还要把这些英雄显示到一个视图的模板中,所以,我们需要用某种途径来做到这一点。
首先,需要一份英雄列表数据。还要把这些英雄显示到一个视图的模板中,所以,我们需要用某种途径来做到这一点。
.l-main-section
:marked
## Where We Left Off
## 我们在哪儿
## 延续上一步教程
Before we continue with Part 2 of the Tour of Heroes,
lets verify we have the following structure after [Part 1](./toh-pt1.html).

View File

@ -4,17 +4,19 @@ 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></live-example> for this part.
运行这部分的<live-example></live-example>。
p 运行这部分的#[+liveExampleLink2('在线例子', 'toh-3')]。
.l-main-section
:marked
## Where We Left Off
## 我们在哪儿
## 延续上一步教程
Before we continue with our Tour of Heroes, lets verify we have the following structure. If not, well need to go back and follow the previous chapters.
@ -273,11 +275,15 @@ code-example(format=".").
This array contains the list of all components, pipes, and directives that we created
and that belong in our application's module.
接下来,添加`HeroDetailComponent`到`NgModule`装饰器中的`declarations`数组。这个数组包含了所有属于本应用模块的,由我们亲自创建的组件、管道和指令。
+makeExample('toh-3/ts/app/app.module.ts', 'declarations')
.l-main-section
:marked
## Refresh the AppComponent
## 更新AppComponent
:marked
Now that the application knows about our `HeroDetailComponent`,
find the location in the `AppComponent` template where we removed the *Hero Detail* content
@ -398,7 +404,7 @@ code-example(format=".").
* We learned to declare the application directives we need in an Angular module. We
list the directives in the `NgModule` decorator's `declarations` array.
我们学会了在Angular模块中声明该应用所需的指令 —— 只要把这些指令列在`NgModule`装饰器的`declarations`数组中就可以了。
* 我们学会了在Angular模块中声明该应用所需的指令 —— 只要把这些指令列在`NgModule`装饰器的`declarations`数组中就可以了。
* We learned to bind a parent component to a child component.

View File

@ -26,6 +26,8 @@ include ../_util-fns
Because data services are invariably asynchronous,
we'll finish the chapter with a **!{_Promise}**-based version of the data service.
因为数据服务通常都是异步的,我们将在本章创建一个基于**承诺**的数据服务版本。
Run the <live-example></live-example> for this part.
运行这部分的<live-example></live-example>。
@ -34,7 +36,7 @@ include ../_util-fns
:marked
## Where We Left Off
## 我们在哪儿
## 延续上一步教程
Before we continue with our Tour of Heroes, lets verify we have the following structure.
If not, well need to go back and follow the previous chapters.

View File

@ -364,10 +364,14 @@ code-example(language="bash").
:marked
Learn more about defining routes with Routes in the [Routing](../guide/router.html) chapter.
到[路由](../guide/router.html)章节学习更多关于使用路由库来定义路由的知识。
:marked
We'll export the `routing` constant using the **RouterModule.forRoot** method with our array of routes.
This returns a configured router module we'll add to our root NgModule, `AppModule`.
使用**RouterModule.forRoot**方法,导出包含了路由数组的`routing`常量。它返回一个配置好的路由模块它将被加入到根NgModule - `AppModule`中。
+makeExample('toh-5/ts/app/app.routing.1.ts', 'routing-export', 'app/app.routing.ts (routing export)')(format=".")
.l-sub-section
:marked