From aadbeb3ae9282fc19cdd1325baba2a317201b5c8 Mon Sep 17 00:00:00 2001 From: Zhicheng Wang Date: Thu, 19 May 2016 19:23:01 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E4=B8=80=E4=BA=9B=E5=90=88?= =?UTF-8?q?=E5=B9=B6=E4=B8=AD=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/docs/ts/latest/glossary.jade | 3 ++- public/docs/ts/latest/guide/_data.json | 14 ++++-------- .../ts/latest/guide/attribute-directives.jade | 22 +++++++++---------- public/docs/ts/latest/guide/index.jade | 6 ++--- public/docs/ts/latest/guide/style-guide.jade | 3 ++- public/docs/ts/latest/quickstart.jade | 4 ++-- public/docs/ts/latest/tutorial/toh-pt5.jade | 10 ++++----- 7 files changed, 28 insertions(+), 34 deletions(-) diff --git a/public/docs/ts/latest/glossary.jade b/public/docs/ts/latest/glossary.jade index 09b191e405..bc1c2e2b26 100644 --- a/public/docs/ts/latest/glossary.jade +++ b/public/docs/ts/latest/glossary.jade @@ -992,7 +992,8 @@ include _util-fns [XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) calls to remote servers. - 浏览器DOM和JavaScript之间有一些有限数量的异步活动，比如Dom事件（比如点击）、[契约promises](#promise)、和[XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)查询远程服务等。 + 浏览器DOM和JavaScript之间有一些有限数量的异步活动，比如Dom事件（比如点击）、[承诺promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ + Promise)、和[XHR](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)查询远程服务等。 Zones intercept all of these activities and give a "zone client" the opportunity to take action before and after the async activity completes. diff --git a/public/docs/ts/latest/guide/_data.json b/public/docs/ts/latest/guide/_data.json index 5d4970ae56..eb58a24234 100644 --- a/public/docs/ts/latest/guide/_data.json +++ b/public/docs/ts/latest/guide/_data.json @@ -101,14 +101,8 @@ "router-deprecated": { - "title": "Router (Deprecated Beta)", - "intro": "The deprecated Beta Router." - }, - - "router": { - "title": "路由与导航", - "intro": "揭示通过Angular 2路由在屏幕上导航的基本原理。", - "hide": true + "title": "路由 (Beta版，已废弃)", + "intro": "废弃的Beta版路由" }, "structural-directives": { @@ -132,8 +126,8 @@ }, "webpack": { - "title": "Introduction to Webpack", - "intro": "Create your Angular 2 applications with a Webpack based tooling" + "title": "Webpack简介", + "intro": "使用基于Webpack的工具创建Angular 2应用" }, "glossary": { diff --git a/public/docs/ts/latest/guide/attribute-directives.jade b/public/docs/ts/latest/guide/attribute-directives.jade index f5194ad229..77d5ecbe77 100644 --- a/public/docs/ts/latest/guide/attribute-directives.jade +++ b/public/docs/ts/latest/guide/attribute-directives.jade @@ -20,7 +20,7 @@ block includes * [使用数据绑定把值传到指令中](#bindings) p. - #[+liveExampleLink2('Live example', 'attribute-directives')]. + #[+liveExampleLink2('在线例子', 'attribute-directives')]. :marked ## Directives overview ## 指令概览 @@ -45,14 +45,14 @@ p. [NgFor](template-syntax.html#ngFor) and [NgIf](template-syntax.html#ngIf) are two familiar examples. [*结构型*指令](structural-directives.html)会通过添加/删除DOM元素来更改DOM树布局。 - [NgFor](template-syntax.html#ng-for)和[NgIf](template-syntax.html#ng-if)就是两个最熟悉的例子。 + [NgFor](template-syntax.html#ngFor)和[NgIf](template-syntax.html#ngIf)就是两个最熟悉的例子。 An *Attribute* directive can change the appearance or behavior of an element. The built-in [NgStyle](template-syntax.html#ngStyle) directive, for example, can change several element styles at the same time. *Attribute型*指令改变一个元素的外观或行为。 - 比如，内建的[NgStyle](template-syntax.html#ng-style)指令可以同时修改元素的多种样式。 + 比如，内建的[NgStyle](template-syntax.html#ngStyle)指令可以同时修改元素的多种样式。 We are going to write our own attribute directive to set an element's background color when the user hovers over that element. @@ -116,7 +116,7 @@ block highlight-directive-1 so we can access the DOM element. We don't need `Input` immediately but we will need it later in the chapter. - 我们先从Angular库中导入一些符号。 + 我们先从Angular的`core`库中导入一些符号。 我们要为使用`@Directive`装饰器而导入`Directive`。 我们要为[注入](dependency-injection.html)到指令的构造函数中而导入`ElementRef`，这样我们才能访问DOM元素。 虽然眼下还不需要`Input`，但在稍后的章节中我们很快就会用到它。 @@ -225,7 +225,7 @@ p We run the app and see that our directive highlights the paragraph text. - 运行应用，就会看到我们的指令确实高亮了span中的文本。 + 运行应用，就会看到我们的指令确实高亮了段落中的文本。 figure.image-display img(src="/resources/images/devguide/attribute-directives/first-highlight.png" alt="First Highlight") @@ -284,14 +284,14 @@ a#respond-to-user 1. detect when the user hovers into and out of the element, 1. 检测用户的鼠标啥时候进入和离开这个元素。 1. respond to those actions by setting and clearing the highlight color, respectively. - 1. 通过设置和清除高亮的颜色来响应这些操作。 + 1. 通过设置和清除高亮色来响应这些操作。 Let's start with event detection. Add a `host` property to the directive metadata and give it a configuration object that specifies two mouse events and the directive methods to call when they are raised: 从事件检测开始吧。 - 我们把`host`属性加入指令的元数据中，并给它一个配置对象，用来指定两个鼠标事件，并在它们被触发时，调用指令中的方法。 + 我们把`host`属性加入指令的元数据中，并给它一个配置对象，用来指定两个鼠标事件，并在它们被触发时，调用指令中的方法： +makeExample('attribute-directives/ts/app/highlight.directive.2.ts','host')(format=".") .l-sub-section @@ -303,7 +303,7 @@ a#respond-to-user We could have attached event listeners by manipulating the host DOM element directly, but there are at least three problems with such an approach: - 我们可以通过老旧的JavaScript方式来给这个原生元素(`el.nativeElement`)挂上一个事件监听器。 + 我们可以通过直接操纵DOM元素的方式给宿主DOM元素挂上一个事件监听器。 但这种方法至少有三个问题： 1. We have to write the listeners correctly. 1. 我们必须正确的书写事件监听器。 @@ -337,7 +337,7 @@ a#respond-to-user We run the app and confirm that the background color appears as we move the mouse over the `p` and disappears as we move out. - 运行本应用，我们就可以确认：当把鼠标移到`span`上的时候，背景色就出现了，而移开的时候，它消失了。 + 运行本应用，我们就可以确认：当把鼠标移到`p`上的时候，背景色就出现了，而移开的时候，它消失了。 figure.image-display img(src="/resources/images/devguide/attribute-directives/highlight-directive-anim.gif" alt="Second Highlight") .l-main-section @@ -350,7 +350,7 @@ a#bindings We should set the color externally with a binding like this: 现在的高亮颜色是在指令中硬编码进去的。这样没有弹性。 - 我们应该通过绑定从外部设置这个高亮颜色。就像这样： + 我们应该通过绑定从外部设置这个颜色。就像这样： +makeExample('attribute-directives/ts/app/app.component.html','pHost') :marked We'll extend our directive class with a bindable **input** `highlightColor` property and use it when we highlight text. @@ -376,7 +376,7 @@ a#input We must add this input metadata or Angular will reject the binding. See the [appendix](#why-input) below to learn why. - 这个`@Input`装饰器把元数据添加到了类上，这让`highlightColor`能被以`myHighlight`为别名进行绑定。 + `@Input`把元数据添加到了类上，这让`highlightColor`能被以`myHighlight`为别名进行绑定。 我们必须添加这个input元数据，否则Angular会拒绝绑定。 参见下面的[附录](#why-input)来了解为何如此。 .l-sub-section diff --git a/public/docs/ts/latest/guide/index.jade b/public/docs/ts/latest/guide/index.jade index a910e4b1f2..395df16390 100644 --- a/public/docs/ts/latest/guide/index.jade +++ b/public/docs/ts/latest/guide/index.jade @@ -52,9 +52,7 @@ table(width="100%") A step-by-step, immersive approach to learning Angular that introduces the major features of Angular in an application context. - 一场按部就班、沉浸式的Angular学习之旅。 - 从[“快速起步”](../quickstart.html)开始，本文档中的每一个章节和范例，都基于一个[*英雄指南* 教程](../tutorial)， - 它会在一个假想的应用场景中逐步引出Angular的各个主要特性。 + 一场按部就班、沉浸式的Angular学习之旅，在一个应用场景中介绍了Angular的各个主要特性。 tr(style=top) td p Basics @@ -197,7 +195,7 @@ block example-links The [API Reference](../api/) is the authority on every public-facing member of the Angular libraries. - [API指南](../api/)是关于Angular库中每一个公有成员的权威指南。 + [API参考](../api/)是关于Angular库中每一个公有成员的权威参考资料。 # Feedback # 提供反馈 diff --git a/public/docs/ts/latest/guide/style-guide.jade b/public/docs/ts/latest/guide/style-guide.jade index f533be31f3..c677e62294 100644 --- a/public/docs/ts/latest/guide/style-guide.jade +++ b/public/docs/ts/latest/guide/style-guide.jade @@ -2613,7 +2613,8 @@ a(href="#toc") Back to top .s-why.s-why-last :marked **Why?** We avoid unintentionally not calling the hook if we misspell the method. - + + **为何？**避免在方法名字拼写错误时，造成无意间没有调用钩子的可能。 +makeExample('style-guide/ts/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts', 'example', 'app/heroes/shared/hero-button/hero-button.component.ts')(avoid=1) :marked diff --git a/public/docs/ts/latest/quickstart.jade b/public/docs/ts/latest/quickstart.jade index eabe94d198..272850c072 100644 --- a/public/docs/ts/latest/quickstart.jade +++ b/public/docs/ts/latest/quickstart.jade @@ -856,7 +856,7 @@ block project-files created a simple `index.html`, and launched with a static file server. That's about all we'd expect to do for a "Hello, World" app. - 我们让自己的Angular 2处女航保持简单：我们写一个小的Angular组件，添加一些JavaScript库到`index.html`，并且启动一个静态文件服务器。 + 我们让自己的Angular 2处女航保持简单：我们写了一个小的Angular组件，添加一些JavaScript库到`index.html`，并且启动一个静态文件服务器。 这就是我们想通过“Hello, World”应用去表现的一切。 **We have greater ambitions!** @@ -868,7 +868,7 @@ block what-next-ts-overhead We'll probably only touch the `package.json` to update libraries. We'll likely open `index.html` only if we need to add a library or some css stylesheets. - 好消息是：准备阶段已经结束了。 + 好消息是：准备阶段（几乎）已经结束了。 我们将来可能只是修改`package.json`来升级依赖库。 如果需要添加一些库或一些css样式表，我们可以打开`index.html`。 :marked diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade index 001a06b2f4..7bb08c7a37 100644 --- a/public/docs/ts/latest/tutorial/toh-pt5.jade +++ b/public/docs/ts/latest/tutorial/toh-pt5.jade @@ -29,7 +29,7 @@ figure.image-display The [Routing and Navigation](../guide/router-deprecated.html) chapter covers the router in more detail than we will in this tour. - [路由与导航](../guide/router.html)一章覆盖了比该教程中更详细的路由知识。 + [路由与导航](../guide/router-deprecated.html)一章覆盖了比该教程中更详细的路由知识。 :marked [Run the live example](/resources/live-examples/toh-5/ts/plnkr.html). @@ -525,13 +525,13 @@ code-example(format="." language="bash"). +makeExample('toh-5/ts/app/dashboard.component.2.ts','component', 'app/dashboard.component.ts (类)') :marked We saw this kind of logic before in the `HeroesComponent`. - * create a `heroes` array property - * inject the `HeroService` in the constructor and hold it in a private `heroService` field. - * call the service to get heroes inside the Angular `ngOnInit` lifecycle hook. 在`HeroesComponent`之前，我们也看到过类似的逻辑： + * create a `heroes` array property * 创建一个`heroes`数组属性 - * 把`HeroService`注入构造函数中，并且把它保存在一个私有的`_heroService`字段中。 + * inject the `HeroService` in the constructor and hold it in a private `heroService` field. + * 把`HeroService`注入构造函数中，并且把它保存在一个私有的`heroService`字段中。 + * call the service to get heroes inside the Angular `ngOnInit` lifecycle hook. * 在Angular的`ngOnInit`生命周期钩子中调用这个服务，并且取得英雄列表。 The noteworthy differences: we cherry-pick four heroes (2nd, 3rd, 4th, and 5th) with *slice*