diff --git a/public/docs/ts/latest/glossary.jade b/public/docs/ts/latest/glossary.jade index b27179e1de..ddf667bb8f 100644 --- a/public/docs/ts/latest/glossary.jade +++ b/public/docs/ts/latest/glossary.jade @@ -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 diff --git a/public/docs/ts/latest/guide/index.jade b/public/docs/ts/latest/guide/index.jade index 0d1b6944d7..b9b402f062 100644 --- a/public/docs/ts/latest/guide/index.jade +++ b/public/docs/ts/latest/guide/index.jade @@ -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 diff --git a/public/docs/ts/latest/guide/testing.jade b/public/docs/ts/latest/guide/testing.jade index b59984fa11..d766bb7f30 100644 --- a/public/docs/ts/latest/guide/testing.jade +++ b/public/docs/ts/latest/guide/testing.jade @@ -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) diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade index ba3a0738b9..ffc6f781c7 100644 --- a/public/docs/ts/latest/quickstart.jade +++ b/public/docs/ts/latest/quickstart.jade @@ -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`加载到浏览器中 这样,当应用的文件发生变化时,它会自动刷新浏览器。 diff --git a/public/docs/ts/latest/tutorial/toh-pt4.jade b/public/docs/ts/latest/tutorial/toh-pt4.jade index 83517091be..3e83712ffe 100644 --- a/public/docs/ts/latest/tutorial/toh-pt4.jade +++ b/public/docs/ts/latest/tutorial/toh-pt4.jade @@ -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: diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade index 497c1da27c..3bd50fa9dd 100644 --- a/public/docs/ts/latest/tutorial/toh-pt5.jade +++ b/public/docs/ts/latest/tutorial/toh-pt5.jade @@ -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