完成了指南首页

处理了排列不规范的列表翻译,以便将来可以统一实现对照翻译
This commit is contained in:
Zhicheng Wang 2016-04-20 20:07:39 +08:00
parent da8bf0efb9
commit d21325fa55
6 changed files with 63 additions and 45 deletions

View File

@ -450,17 +450,17 @@ include _util-fns
render application [views]. Components are usually represented as HTML elements.
They are the building blocks of an Angular application and the
developer can expect to write a lot of them.
[组件](#component): 结合了程序逻辑和一个用来渲染试图的HTML模板[views]。组件一般由HTML元素代表。它们是用来组建Angular应用程序的基本单元所以可以预料到开发人员会写很多很多组件。
1. [组件](#component): 结合了程序逻辑和一个用来渲染试图的HTML模板[views]。组件一般由HTML元素代表。它们是用来组建Angular应用程序的基本单元所以可以预料到开发人员会写很多很多组件。
1. [Attribute Directives](#attribute-directive) that can listen to and modify the behavior of
other HTML elements, attributes, properties, and components. They are usually represented
as HTML attributes, hence the name.
[特征指令](#attribute-directive)可以监控和修改HTML元素、元素特征、属性和组件等的行为。它们一般有HTML元素特征来体现。
1. [特征指令](#attribute-directive)可以监控和修改HTML元素、元素特征、属性和组件等的行为。它们一般有HTML元素特征来体现。
1. [Structural Directives](#structural-directive), a directive responsible for
shaping or re-shaping HTML layout, typically by adding, removing, or manipulating
elements and their children.
[结构型指令](#structural-directive)负责塑造或重塑HTML布局。一般都是通过添加、删除或者操作HTML元素和他的子级元素来实现的。
1. [结构型指令](#structural-directive)负责塑造或重塑HTML布局。一般都是通过添加、删除或者操作HTML元素和他的子级元素来实现的。
// #enddocregion d2
// #docregion e1

View File

@ -152,32 +152,55 @@ table(width="100%")
These snippets are excerpts from a sample application that accompanies the chapter.
每个章节中都包含一些能在我们自己的应用中复用的代码片段。
这些片段摘抄自本章附带的范例应用。
这些片段节选自该章节附带的范例应用。
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.
在每页靠近顶部的地方可以看到一个链接,指向这个范例的运行版本,比如[架构](architecture.html)一章中的[鲜活范例](/resources/live-examples/architecture/ts/plnkr.html)。
The link launches a browser-based code editor where we can inspect, modify, save, and download the code.
这个链接启动一个基于浏览器的代码编辑器,在这里,我们可以调试、修改、保存和下载这些代码。
A few early chapters are written as tutorials and are clearly marked as such.
Most chapters are *not* tutorials.
They highlight key points in code rather than explain each step necessary to build the sample.
We can always get the full source by way of the live link.
少量早期的章节是作为教程来写的,并且被清晰地标注出来。
但大部分章节都不是教程。
他们的目的是展示代码中的关键点,而不是解释构建这个范例所需的每一个步骤。
我们总能从鲜活范例的链接找到完整的源代码。
## References
## 参考资料
The [Cheat Sheet](cheatsheet.html) lists Angular syntax for common scenarios.
[小抄](cheatsheet.html)列出了Angular在常见场景下的语法。
The [Glossary](glossary.html) defines terms that Angular developers should know.
[词汇表](glossary.html)定义了Angular开发者所需要知道的词汇。
The [API Guide](../api/) is the authority on every public-facing member of the Angular libraries.
[API指南](../api/)是关于Angular库中每一个公开成员的权威指南。
# Feedback
# 提供反馈
We welcome feedback! Leave a comment by clicking the icon in upper right corner of the banner.
我们欢迎您的反馈请点击Banner右上角的图标给我们留言。
Post *documentation* issues and pull requests on the
[angular.io](https://github.com/angular/angular.io) github repository.
要发 *文档方面* 的问题和Pull Requests请来Github上的[angular.io](https://github.com/angular/angular.io)仓库。
Post issues with *Angular 2 itself* to the [angular](https://github.com/angular/angular) github repository.
要发 *Angular 2本身* 的问题请来Github上的[angular](https://github.com/angular/angular)仓库。
// #enddocregion the-rest

View File

@ -18,15 +18,14 @@ a(id="top")
# Table of Contents
# 目录
1. [Jasmine Testing 101](#jasmine-101)
- setup to run Jasmine tests in the browser
- basic Jasmine testing skills
- write simple Jasmine tests in TypeScript
- debug a test in the browser
1. [Jasmine测试101](#jasmine-101)
- setup to run Jasmine tests in the browser
- 设置浏览器来运行Jasmine测试
- basic Jasmine testing skills
- 基础Jasmine测试技能
- write simple Jasmine tests in TypeScript
- 实用TypeScript来编写简单的Jasmine测试
- debug a test in the browser
- 在浏览器里调试测试
1. [The Application Under Test](#aut)
@ -34,25 +33,23 @@ a(id="top")
1. [被测试的应用程序](#aut)
1. [First app test](#first-app-tests)
- test a simple application interface outside of Angular
- where to put the test file
- load a test file with systemJS
1. [第一个应用程序测试](#first-app-tests)
- test a simple application interface outside of Angular
- 在Angular之外测试一个简单的应用程序接口
- where to put the test file
- 测试文件存放到哪儿
- load a test file with systemJS
- 使用systemJS调用一个测试文件
1. [Pipe driven development](#pipe-testing)
- create a test before creating a class
- load multiple test files in our test harness, using system.js
- add the Angular 2 library to our test harness
- watch the new test fail, and fix it
1. [测试驱动开发一个管道](#pipe-testing)
- create a test before creating a class
- 在新建类之前,新建一个测试
- load multiple test files in our test harness, using system.js
- 使用system.js加载多个测试文件到我们的测试套装里
- add the Angular 2 library to our test harness
- 添加Angular 2的类库到我们的测试套装里
- watch the new test fail, and fix it
- 看着新测试失败,然后修复它
1. Test an Asynchronous Service (forthcoming)

View File

@ -728,12 +728,13 @@ code-example(format="").
npm start
:marked
That command runs two parallel node processes
1. The TypeScript compiler in watch mode
1. A static server called **lite-server** that loads `index.html` in a browser
and refreshes the browser when application files change
此命令会运行两个并行的node进程
1. The TypeScript compiler in watch mode
1. TypeScript编译器运行在监视watch模式
1. A static server called **lite-server** that loads `index.html` in a browser
and refreshes the browser when application files change
1. 一个名叫 **lite-server** 的静态服务器,它把`index.html`加载到浏览器中
这样,当应用的文件发生变化时,它会自动刷新浏览器。

View File

@ -90,9 +90,7 @@ code-example(format="." language="bash").
Second, we can't easily share that list of heroes with other components and views.
目前,`AppComponent`显示的是自己定义的一个mock英雄数据。
我们的改进点至少有两个:
1. 定义英雄数据不应该是这个组件的任务。
2. 要想把这个英雄列表数据共享给其它组件和视图可不容易。
我们的改进点至少有两个1. 定义英雄数据不应该是这个组件的任务。2. 要想把这个英雄列表数据共享给其它组件和视图可不容易。
We can refactor this hero data acquisition business to a single service that provides heroes and
share that service with all components that need heroes.
@ -270,11 +268,11 @@ code-example(format="." language="bash").
### 注入 *HeroService*
Two lines replace the one line of *new*:
1. we add a constructor.
1. we add to the component's `providers` metadata
用两行代码代替用`new`时的一行:
1. we add a constructor.
1. 添加一个构造函数
1. we add to the component's `providers` metadata
1. 添加组件的`providers`元数据
Here's the constructor:

View File

@ -558,13 +558,13 @@ code-example(format="." language="bash").
Although we display the details of a selected hero at the bottom of the `HeroesComponent`,
we don't yet *navigate* to the `HeroDetailComponent` in the three ways specified in our requirements:
1. from the *Dashboard* to a selected hero.
1. from the *Heroes* list to a selected hero.
1. from a "deep link" URL pasted into the browser address bar.
虽然我们在`HeroesComponent`组件的底部显示了所选英雄的详情,但我们还从没有 *导航* 到`HeroDetailComponent`组件,不管用我们需求中指定的三种方式中的哪一种:
1. from the *Dashboard* to a selected hero.
1. 从 *仪表盘(Dashboard)* 导航到一个选定的英雄。
1. from the *Heroes* list to a selected hero.
1. 从 *英雄列表(Heroes)* 导航到一个选定的英雄。
1. from a "deep link" URL pasted into the browser address bar.
1. 把一个指向他的"深链接"URL粘贴到浏览器的地址栏。
Adding a `'HeroDetail'` route seem an obvious place to start.
@ -802,11 +802,11 @@ code-example(format='').
+makeExample('toh-5/ts/app/dashboard.component.ts','goto-detail', 'app/dashboard.component.ts (gotoDetail)')(format=".")
:marked
The `gotoDetail` method navigates in two steps:
1. set a route *link parameters array*
1. pass the array to the router's navigate method.
`gotoDetail`方法分两步完成导航:
1. set a route *link parameters array*
1. 生成路由的 *链接参数数组*
1. pass the array to the router's navigate method.
1. 把这个数组传给路由器的navigate方法。
We wrote *link parameters arrays* in the `AppComponent` for the navigation links.
@ -916,13 +916,13 @@ figure.image-display
要想在HTML和CSS的噪音中找出组件的工作逻辑太难了。
Let's migrate the template and the styles to their own files before we make any more changes:
1. *Cut-and-paste* the template contents into a new `heroes.component.html` file.
1. *Cut-and-paste* the styles contents into a new `heroes.component.css` file.
1. *Set* the component metadata's `templateUrl` and `styleUrls` properties to refer to both files.
在做更多修改之前,我们先把模板和样式移到它们自己的文件中去:
1. *Cut-and-paste* the template contents into a new `heroes.component.html` file.
1. *剪切并粘贴* 模板内容到新的`heroes.component.html`文件。
1. *Cut-and-paste* the styles contents into a new `heroes.component.css` file.
1. *剪切并粘贴* 样式内容到新的`heroes.component.css`文件。
1. *Set* the component metadata's `templateUrl` and `styleUrls` properties to refer to both files.
1. *设置* 组件元数据的`templateUrl`和`styleUrls`属性,来分别引用这两个文件。
The revised component data looks like this:
@ -931,14 +931,14 @@ figure.image-display
+makeExample('toh-5/ts/app/heroes.component.ts', 'metadata', 'app/heroes.component.ts (修改过的元数据)')(format=".")
:marked
Now we can see what's going on as we update the component class along the same lines as the dashboard:
1. Import the `router`
1. Inject the `router` in the constructor (along with the `HeroService`)
1. Implement the `gotoDetail` method by calling the `router.navigate` method
with a two-part 'HeroDetail' *link parameters array*.
现在,我们一下就明白该怎么像仪表盘中那样更新组件类了:
1. Import the `router`
1. 导入`router`
1. Inject the `router` in the constructor (along with the `HeroService`)
1. 把`router`注入到构造函数中(就像`HeroService`那样)
1. Implement the `gotoDetail` method by calling the `router.navigate` method
with a two-part 'HeroDetail' *link parameters array*.
1. 实现`gotoDetail`方法:以`HeroDetail`和 *链接参数数组* 为参数调用`router.navigate`方法。
Here's the revised component class:
@ -1130,19 +1130,18 @@ figure.image-display
### The Road Behind
### 走过的路
We travelled a great distance in this chapter.
- We added the Angular *Component Router* to navigate among different components.
- We learned how to create router links to represent navigation menu items
- We used router parameters to navigate to the details of user selected hero
- We shared the `HeroService` among multiple components
- We moved HTML and CSS out of the component file and into their own files.
- We added the `uppercase` pipe to format data
在本章中,我们往前走了很远:
- We added the Angular *Component Router* to navigate among different components.
- 我们添加了Angular *组件路由器* 在各个不同的组件之间导航。
- We learned how to create router links to represent navigation menu items
- 我们学会了如何创建路由链接来表示导航栏的菜单项。
- We used router parameters to navigate to the details of user selected hero
- 我们使用路由参数来导航到用户所选的英雄详情。
- We shared the `HeroService` among multiple components
- 我们在多个组件之间共享了`HeroService`服务。
- We moved HTML and CSS out of the component file and into their own files.
- 我们把HTML和CSS从组件中移出来放到它们自己的文件中去。
- We added the `uppercase` pipe to format data
- 我们添加了一个`uppercase`管道,来格式化数据。
### The Road Ahead