iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: many of broken links

Browse Source
This commit is contained in:
Zhicheng Wang 2017-07-30 12:32:56 +08:00
parent f2059b445c
commit c002fddabe
34 changed files with 213 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
aio/content/guide/ajs-quick-reference.md
View File

@ -488,7 +488,7 @@ AngularJS 为模板提供了七十多个内置指令。
For more information, see [Architecture Overview](guide/architecture#components). For more information, see [Architecture Overview](guide/architecture#components).
要了解更多，请参见[架构概览](guide/architecture#component)。 要了解更多，请参见[架构概览](guide/architecture#components)。
</td> </td>
@ -1104,7 +1104,7 @@ AngularJS中的很多内置过滤器在Angular中都有对应的管道。
The Angular `date` pipe is similar. The Angular `date` pipe is similar.
Angular的`date`管道和·中很相似。参见[备注](guide/ajs-quick-reference#string-dates)来了解字符串日期值。 Angular的`date`管道和它很相似。
</td> </td>

3
aio/content/guide/aot-compiler.md
View File

@ -321,7 +321,8 @@ Here is AOT bootstrap in `main.ts` next to the original JIT version:
Be sure to [recompile](guide/aot-compiler#compile) with `ngc`! Be sure to [recompile](guide/aot-compiler#compile) with `ngc`!
确保用`ngc`进行[重新编译](guide/aot-compiler#compiling-aot)！
确保用`ngc`进行[重新编译](guide/aot-compiler#compile)！
{@a tree-shaking} {@a tree-shaking}

6
aio/content/guide/architecture.md
View File

@ -71,7 +71,7 @@ _Angular 模块_很重要。这里只是简单介绍，在 [Angular 模块](guid
Every Angular app has at least one NgModule class, [the _root module_](guide/bootstrapping "Bootstrapping"), Every Angular app has at least one NgModule class, [the _root module_](guide/bootstrapping "Bootstrapping"),
conventionally named `AppModule`. conventionally named `AppModule`.
每个 Angular 应用至少有一个模块（[_根模块_](guide/appmodule "AppModule: 根模块")），习惯上命名为`AppModule`。 每个 Angular 应用至少有一个模块（[_根模块_](guide/bootstrapping "引导启动")），习惯上命名为`AppModule`。
While the _root module_ may be the only module in a small application, most apps have many more While the _root module_ may be the only module in a small application, most apps have many more
_feature modules_, each a cohesive block of code dedicated to an application domain, _feature modules_, each a cohesive block of code dedicated to an application domain,
@ -790,7 +790,7 @@ In general, add providers to the [root module](guide/architecture#modules) so th
the same instance of a service is available everywhere. the same instance of a service is available everywhere.
但通常会把提供商添加到[根模块](guide/architecture#module)上，以便在任何地方都使用服务的同一个实例。<code-example path="architecture/src/app/app.module.ts" linenums="false" title="src/app/app.module.ts (module providers)" region="providers"> 但通常会把提供商添加到[根模块](guide/architecture#modules)上，以便在任何地方都使用服务的同一个实例。<code-example path="architecture/src/app/app.module.ts" linenums="false" title="src/app/app.module.ts (module providers)" region="providers">
</code-example> </code-example>
@ -920,7 +920,7 @@ publishing and subscribing to events.
> [**HTTP**](guide/http): Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client. > [**HTTP**](guide/http): Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client.
> [**HTTP**](guide/server-communication)：通过 HTTP 客户端，可以与服务器通讯，以获得数据、保存数据和触发服务端动作。 > [**HTTP**](guide/http)：通过 HTTP 客户端，可以与服务器通讯，以获得数据、保存数据和触发服务端动作。
> [**Lifecycle hooks**](guide/lifecycle-hooks): Tap into key moments in the lifetime of a component, from its creation to its destruction, > [**Lifecycle hooks**](guide/lifecycle-hooks): Tap into key moments in the lifetime of a component, from its creation to its destruction,
by implementing the lifecycle hook interfaces. by implementing the lifecycle hook interfaces.

2
aio/content/guide/attribute-directives.md
View File

@ -34,7 +34,7 @@ There are three kinds of directives in Angular:
You saw a component for the first time in the [QuickStart](guide/quickstart) guide. You saw a component for the first time in the [QuickStart](guide/quickstart) guide.
*组件*是这三种指令中最常用的。 *组件*是这三种指令中最常用的。
你在[快速起步](quickstart#root-component)例子中第一次见到组件。 你在[快速起步](guide/quickstart)例子中第一次见到组件。
*Structural Directives* change the structure of the view. *Structural Directives* change the structure of the view.
Two examples are [NgFor](guide/template-syntax#ngFor) and [NgIf](guide/template-syntax#ngIf). Two examples are [NgFor](guide/template-syntax#ngFor) and [NgIf](guide/template-syntax#ngIf).

4
aio/content/guide/bootstrapping.md
View File

@ -8,7 +8,7 @@ that you [bootstrap](#main) to launch the application.
You can call it anything you want. The conventional name is `AppModule`. You can call it anything you want. The conventional name is `AppModule`.
Angular 模块类描述应用的部件是如何组合在一起的。 Angular 模块类描述应用的部件是如何组合在一起的。
每个应用都至少有一个 Angular 模块，也就是*根*模块，用来[引导](guide/appmodule#main)并运行应用。 每个应用都至少有一个 Angular 模块，也就是*根*模块，用来[引导](#main)并运行应用。
你可以为它取任何名字。常规名字是`AppModule`。 你可以为它取任何名字。常规名字是`AppModule`。
The [setup](guide/setup) instructions produce a new project with the following minimal `AppModule`. The [setup](guide/setup) instructions produce a new project with the following minimal `AppModule`.
@ -179,7 +179,7 @@ You launch the application by [_bootstrapping_](#main) the root `AppModule`.
Among other things, the _bootstrapping_ process creates the component(s) listed in the `bootstrap` array Among other things, the _bootstrapping_ process creates the component(s) listed in the `bootstrap` array
and inserts each one into the browser DOM. and inserts each one into the browser DOM.
通过[_引导_](guide/appmodule#main)根`AppModule`来启动应用。 通过[_引导_](#main)根`AppModule`来启动应用。
在启动过程中，其中一步是创建列在`bootstrap`数组的组件， 在启动过程中，其中一步是创建列在`bootstrap`数组的组件，
并将它们每一个都插入到浏览器的DOM中。 并将它们每一个都插入到浏览器的DOM中。

14
aio/content/guide/change-log.md
View File

@ -149,7 +149,7 @@ added (optional) instructions on how to remove _non-essential_ files. [环境搭
* [Style Guide](guide/styleguide): copy edits and revised rules. * [Style Guide](guide/styleguide): copy edits and revised rules.
[风格指南](guide/style-guide)：复制了编辑过的和修改过的规则。 [风格指南](guide/styleguide)：复制了编辑过的和修改过的规则。
## Router: more detail (2016-12-21) ## Router: more detail (2016-12-21)
@ -167,7 +167,7 @@ including sections named outlets, wildcard routes, and preload strategies.
Added section on how to set default request headers (and other request options) to Added section on how to set default request headers (and other request options) to
HTTP guide. HTTP guide.
往[Http指南](guide/server-communication#override-default-request-options)中添加了一节“如何设置默认的请求头（以及其它配置项）” 添加了一节“如何设置默认的请求头（以及其它配置项）”
## Testing: added component test plunkers (2016-12-02) ## Testing: added component test plunkers (2016-12-02)
@ -247,7 +247,7 @@ The documentation for the version prior to v.2.2.0 has been removed.
The updated [TypeScript to JavaScript](guide/ts-to-js) guide The updated [TypeScript to JavaScript](guide/ts-to-js) guide
now explains how to write apps in ES6/7 now explains how to write apps in ES6/7
更新了“[从TypeScript到JavaScript](cookbook/ts-to-js)”烹饪宝典，解释如何使用ES6/7编写应用 更新了“[从TypeScript到JavaScript](guide/ts-to-js)”烹饪宝典，解释如何使用ES6/7编写应用
by translating the common idioms in the TypeScript documentation examples by translating the common idioms in the TypeScript documentation examples
(and elsewhere on the web) to ES6/7 and ES5. (and elsewhere on the web) to ES6/7 and ES5.
@ -332,7 +332,7 @@ explains what AOT compilation is and why you'd want it.
It demonstrates the basics with a QuickStart app It demonstrates the basics with a QuickStart app
followed by the more advanced considerations of compiling and bundling the Tour of Heroes. followed by the more advanced considerations of compiling and bundling the Tour of Heroes.
全新[预编译(AoT)](cookbook/aot-compiler)烹饪书介绍了什么是AoT编译和为何你需要它。 全新[预编译(AoT)](guide/aot-compiler)烹饪书介绍了什么是AoT编译和为何你需要它。
它以**快速起步**应用程序开始讲解，接着介绍了编译和构建**英雄指南**的更高级的注意事项。 它以**快速起步**应用程序开始讲解，接着介绍了编译和构建**英雄指南**的更高级的注意事项。
## Sync with Angular v.2.0.2 (2016-10-6) ## Sync with Angular v.2.0.2 (2016-10-6)
@ -362,7 +362,7 @@ All guided samples with routing use the _Routing Module_ and prose content has b
most conspicuously in the most conspicuously in the
[NgModule](guide/ngmodule) guide and [NgModule FAQ](guide/ngmodule-faq) guide. [NgModule](guide/ngmodule) guide and [NgModule FAQ](guide/ngmodule-faq) guide.
所有使用路由的例子都使用**路由模块**，相关内容也被更新。更新最多的是[Angular模块（NgModule）](guide/ngmodule)章和[Angular模块常见问题](cookbook/ngmodule-faq)烹饪书。 所有使用路由的例子都使用**路由模块**，相关内容也被更新。更新最多的是[Angular模块（NgModule）](guide/ngmodule)章和[Angular模块常见问题](guide/ngmodule-faq)烹饪书。
## New "Internationalization" guide (2016-09-30) ## New "Internationalization" guide (2016-09-30)
@ -371,7 +371,7 @@ most conspicuously in the
Added a new [Internationalization (i18n)](guide/i18n) guide that shows how Added a new [Internationalization (i18n)](guide/i18n) guide that shows how
to use Angular "i18n" facilities to translate template text into multiple languages. to use Angular "i18n" facilities to translate template text into multiple languages.
添加了新的[国际化(i18n)](cookbook/i18n)烹饪书，展示了如何使用Angular的“i18n”工具来讲模板文本翻译到多种语言。 添加了新的[国际化(i18n)](guide/i18n)烹饪书，展示了如何使用Angular的“i18n”工具来讲模板文本翻译到多种语言。
## "angular-in-memory-web-api" package rename (2016-09-27) ## "angular-in-memory-web-api" package rename (2016-09-27)
@ -397,7 +397,7 @@ The new "angular-in-memory-web-api" has new features.
[StyleGuide](guide/styleguide) explains recommended conventions for NgModules. [StyleGuide](guide/styleguide) explains recommended conventions for NgModules.
[StyleGuide](guide/style-guide)解释了我们为Angular模块（NgModule）而推荐的约定。 [StyleGuide](guide/styleguide)解释了我们为Angular模块（NgModule）而推荐的约定。
Barrels now are far less useful and have been removed from the style guide; Barrels now are far less useful and have been removed from the style guide;
they remain valuable but are not a matter of Angular style. they remain valuable but are not a matter of Angular style.
Also relaxed the rule that discouraged use of the `@Component.host` property. Also relaxed the rule that discouraged use of the `@Component.host` property.

30
aio/content/guide/component-interaction.md
View File

@ -32,29 +32,29 @@ samples in the [Component Communication]() document.
* [Pass data from parent to child with input binding](guide/component-interaction#parent-to-child) * [Pass data from parent to child with input binding](guide/component-interaction#parent-to-child)
[使用输入绑定把数据从父组件传给子组件](guide/component-communication#parent-to-child) [使用输入绑定把数据从父组件传给子组件](guide/component-interaction#parent-to-child)
* [Intercept input property changes with a setter](guide/component-interaction#parent-to-child-setter) * [Intercept input property changes with a setter](guide/component-interaction#parent-to-child-setter)
[使用赋值器（setter）拦截输入属性的变化](guide/component-communication#parent-to-child-setter) [使用赋值器（setter）拦截输入属性的变化](guide/component-interaction#parent-to-child-setter)
* [Intercept input property changes with `ngOnChanges()`](guide/component-interaction#parent-to-child-on-changes) * [Intercept input property changes with `ngOnChanges()`](guide/component-interaction#parent-to-child-on-changes)
[使用`ngOnChanges()`拦截输入属性的变化](guide/component-communication#parent-to-child-on-changes) [使用`ngOnChanges()`拦截输入属性的变化](guide/component-interaction#parent-to-child-on-changes)
* [Parent calls an `@ViewChild()`](guide/component-interaction#parent-to-view-child) * [Parent calls an `@ViewChild()`](guide/component-interaction#parent-to-view-child)
[在父组件中调用`@ViewChild()`](guide/component-communication#parent-to-view-child) [在父组件中调用`@ViewChild()`](guide/component-interaction#parent-to-view-child)
* [Parent and children communicate via a service](guide/component-interaction#bidirectional-service) * [Parent and children communicate via a service](guide/component-interaction#bidirectional-service)
[通过服务进行父子通讯](guide/component-communication#bidirectional-service) [通过服务进行父子通讯](guide/component-interaction#bidirectional-service)
--> -->
**See the <live-example name="component-interaction"></live-example>**. **See the <live-example name="component-interaction"></live-example>**.
**参见<live-example name="cb-component-communication"></live-example>**。 **参见<live-example name="cb-component-interaction"></live-example>**。
{@a parent-to-child} {@a parent-to-child}
@ -118,7 +118,7 @@ E2E test that all children were instantiated and displayed as expected:
[Back to top](guide/component-interaction#top) [Back to top](guide/component-interaction#top)
[回到顶部](guide/component-communication#top) [回到顶部](guide/component-interaction#top)
{@a parent-to-child-setter} {@a parent-to-child-setter}
@ -176,7 +176,7 @@ E2E tests of input property setter with empty and non-empty names:
[Back to top](guide/component-interaction#top) [Back to top](guide/component-interaction#top)
[回到顶部](guide/component-communication#top) [回到顶部](guide/component-interaction#top)
{@a parent-to-child-on-changes} {@a parent-to-child-on-changes}
@ -257,7 +257,7 @@ the expected `ngOnChanges` calls and values:
[Back to top](guide/component-interaction#top) [Back to top](guide/component-interaction#top)
[回到顶部](guide/component-communication#top) [回到顶部](guide/component-interaction#top)
{@a child-to-parent} {@a child-to-parent}
@ -328,7 +328,7 @@ Test that clicking the *Agree* and *Disagree* buttons update the appropriate cou
[Back to top](guide/component-interaction#top) [Back to top](guide/component-interaction#top)
[回到顶部](guide/component-communication#top) [回到顶部](guide/component-interaction#top)
@ -416,7 +416,7 @@ Test also that clicking the *Stop* button pauses the countdown timer:
[Back to top](guide/component-interaction#top) [Back to top](guide/component-interaction#top)
[回到顶部](guide/component-communication#top) [回到顶部](guide/component-interaction#top)
{@a parent-to-view-child} {@a parent-to-view-child}
@ -445,8 +445,8 @@ The following example illustrates this technique with the same
Neither its appearance nor its behavior will change. Neither its appearance nor its behavior will change.
The child [CountdownTimerComponent](guide/component-interaction#countdown-timer-example) is the same as well. The child [CountdownTimerComponent](guide/component-interaction#countdown-timer-example) is the same as well.
下面的例子用与[倒计时](guide/component-communication#countdown-timer-example)相同的范例来解释这种技术。 下面的例子用与[倒计时](guide/component-interaction#countdown-timer-example)相同的范例来解释这种技术。
我们没有改变它的外观或行为。子组件[CountdownTimerComponent](guide/component-communication#countdown-timer-example)也和原来一样。 我们没有改变它的外观或行为。子组件[CountdownTimerComponent](guide/component-interaction#countdown-timer-example)也和原来一样。
<div class="l-sub-section"> <div class="l-sub-section">
@ -526,7 +526,7 @@ Use [the same countdown timer tests](guide/component-interaction#countdown-tests
[Back to top](guide/component-interaction#top) [Back to top](guide/component-interaction#top)
[回到顶部](guide/'#top') [回到顶部](guide/component-interaction#top)
{@a bidirectional-service} {@a bidirectional-service}
@ -629,4 +629,4 @@ and verify that the history meets expectations:
[Back to top](guide/component-interaction#top)[回到顶部](guide/component-communication#top) [Back to top](guide/component-interaction#top)[回到顶部](guide/component-interaction#top)

93
aio/content/guide/dependency-injection-in-action.md
View File

@ -17,118 +17,118 @@ This cookbook explores many of the features of Dependency Injection (DI) in Angu
* [Application-wide dependencies](guide/dependency-injection-in-action#app-wide-dependencies) * [Application-wide dependencies](guide/dependency-injection-in-action#app-wide-dependencies)
[应用程序全局依赖](guide/cb-dependency-injection#app-wide-dependencies) [应用程序全局依赖](guide/dependency-injection-in-action#app-wide-dependencies)
* [External module configuration](guide/dependency-injection-in-action#external-module-configuration) * [External module configuration](guide/dependency-injection-in-action#external-module-configuration)
[外部模块配置](guide/cb-dependency-injection#external-module-configuration) [外部模块配置](guide/dependency-injection-in-action#external-module-configuration)
* [`@Injectable()` and nested service dependencies](guide/dependency-injection-in-action#nested-dependencies) * [`@Injectable()` and nested service dependencies](guide/dependency-injection-in-action#nested-dependencies)
[`@Injectable()`与嵌套服务的依赖](guide/cb-dependency-injection#nested-dependencies) [`@Injectable()`与嵌套服务的依赖](guide/dependency-injection-in-action#nested-dependencies)
* [`@Injectable()`](guide/dependency-injection-in-action#injectable-1) * [`@Injectable()`](guide/dependency-injection-in-action#injectable-1)
* [Limit service scope to a component subtree](guide/dependency-injection-in-action#service-scope) * [Limit service scope to a component subtree](guide/dependency-injection-in-action#service-scope)
[把服务作用域限制到一个子组件树](guide/cb-dependency-injection#service-scope) [把服务作用域限制到一个子组件树](guide/dependency-injection-in-action#service-scope)
* [Multiple service instances (sandboxing)](guide/dependency-injection-in-action#multiple-service-instances) * [Multiple service instances (sandboxing)](guide/dependency-injection-in-action#multiple-service-instances)
[多个服务实例(沙箱)](guide/cb-dependency-injection#multiple-service-instances) [多个服务实例(沙箱)](guide/dependency-injection-in-action#multiple-service-instances)
* [Qualify dependency lookup with `@Optional()` and `@Host()`](guide/dependency-injection-in-action#qualify-dependency-lookup) * [Qualify dependency lookup with `@Optional()` and `@Host()`](guide/dependency-injection-in-action#qualify-dependency-lookup)
[使用`@Optional()`和`@Host()`装饰器来限定依赖查找方式](guide/cb-dependency-injection#qualify-dependency-lookup) [使用`@Optional()`和`@Host()`装饰器来限定依赖查找方式](guide/dependency-injection-in-action#qualify-dependency-lookup)
* [Demonstration](guide/dependency-injection-in-action#demonstration) * [Demonstration](guide/dependency-injection-in-action#demonstration)
[演示](guide/cb-dependency-injection#demonstration) [演示](guide/dependency-injection-in-action#demonstration)
* [Inject the component's DOM element](guide/dependency-injection-in-action#component-element) * [Inject the component's DOM element](guide/dependency-injection-in-action#component-element)
[注入组件的DOM元素](guide/cb-dependency-injection#component-element) [注入组件的DOM元素](guide/dependency-injection-in-action#component-element)
* [Define dependencies with providers](guide/dependency-injection-in-action#providers) * [Define dependencies with providers](guide/dependency-injection-in-action#providers)
[使用提供商定义依赖](guide/cb-dependency-injection#providers) [使用提供商定义依赖](guide/dependency-injection-in-action#providers)
* [Defining providers](guide/dependency-injection-in-action#defining-providers) * [Defining providers](guide/dependency-injection-in-action#defining-providers)
[定义提供商](guide/cb-dependency-injection#defining-providers) [定义提供商](guide/dependency-injection-in-action#defining-providers)
* [The *provide* object literal](guide/dependency-injection-in-action#provide) * [The *provide* object literal](guide/dependency-injection-in-action#provide)
[*provide* 字面量](guide/cb-dependency-injection#provide) [*provide* 字面量](guide/dependency-injection-in-action#provide)
* [`useValue`&mdash;the *value provider*](guide/dependency-injection-in-action#usevalue) * [`useValue`&mdash;the *value provider*](guide/dependency-injection-in-action#usevalue)
[`useValue` - *值提供商*](guide/cb-dependency-injection#usevalue) [`useValue` - *值提供商*](guide/dependency-injection-in-action#usevalue)
* [`useClass`&mdash;the *class provider*](guide/dependency-injection-in-action#useclass) * [`useClass`&mdash;the *class provider*](guide/dependency-injection-in-action#useclass)
[`useClass` - *类提供商*](guide/cb-dependency-injection#useclass) [`useClass` - *类提供商*](guide/dependency-injection-in-action#useclass)
* [`useExisting`&mdash;the *alias provider*](guide/dependency-injection-in-action#useexisting) * [`useExisting`&mdash;the *alias provider*](guide/dependency-injection-in-action#useexisting)
[`useExisting` - *别名提供商*](guide/cb-dependency-injection#useexisting) [`useExisting` - *别名提供商*](guide/dependency-injection-in-action#useexisting)
* [`useFactory`&mdash;the *factory provider*](guide/dependency-injection-in-action#usefactory) * [`useFactory`&mdash;the *factory provider*](guide/dependency-injection-in-action#usefactory)
[`useFactory` - *工厂提供商*](guide/cb-dependency-injection#usefactory) [`useFactory` - *工厂提供商*](guide/dependency-injection-in-action#usefactory)
* [Provider token alternatives: the class-interface and `InjectionToken`](guide/dependency-injection-in-action#tokens) * [Provider token alternatives: the class-interface and `InjectionToken`](guide/dependency-injection-in-action#tokens)
[提供商可选令牌：类接口与`InjectionToken`](guide/cb-dependency-injection#tokens) [提供商可选令牌：类接口与`InjectionToken`](guide/dependency-injection-in-action#tokens)
* [class-interface](guide/dependency-injection-in-action#class-interface) * [class-interface](guide/dependency-injection-in-action#class-interface)
[类-接口](guide/cb-dependency-injection#class-interface) [类-接口](guide/dependency-injection-in-action#class-interface)
* [`InjectionToken`](guide/dependency-injection-in-action#injection-token) * [`InjectionToken`](guide/dependency-injection-in-action#injection-token)
* [Inject into a derived class](guide/dependency-injection-in-action#di-inheritance) * [Inject into a derived class](guide/dependency-injection-in-action#di-inheritance)
[注入到一个派生类](guide/cb-dependency-injection#di-inheritance) [注入到一个派生类](guide/dependency-injection-in-action#di-inheritance)
* [Find a parent component by injection](guide/dependency-injection-in-action#find-parent) * [Find a parent component by injection](guide/dependency-injection-in-action#find-parent)
[通过注入来查找父组件](guide/cb-dependency-injection#find-parent) [通过注入来查找父组件](guide/dependency-injection-in-action#find-parent)
* [Find parent with a known component type](guide/dependency-injection-in-action#known-parent) * [Find parent with a known component type](guide/dependency-injection-in-action#known-parent)
[通过已知组件类型查找父组件](guide/cb-dependency-injection#known-parent) [通过已知组件类型查找父组件](guide/dependency-injection-in-action#known-parent)
* [Cannot find a parent by its base class](guide/dependency-injection-in-action#base-parent) * [Cannot find a parent by its base class](guide/dependency-injection-in-action#base-parent)
[无法通过自己的基类查找父组件](guide/cb-dependency-injection#base-parent) [无法通过自己的基类查找父组件](guide/dependency-injection-in-action#base-parent)
* [Find a parent by its class-interface](guide/dependency-injection-in-action#class-interface-parent) * [Find a parent by its class-interface](guide/dependency-injection-in-action#class-interface-parent)
[通过类-接口查找父组件](guide/cb-dependency-injection#class-interface-parent) [通过类-接口查找父组件](guide/dependency-injection-in-action#class-interface-parent)
* [Find a parent in a tree of parents with `@SkipSelf()`](guide/dependency-injection-in-action#parent-tree) * [Find a parent in a tree of parents with `@SkipSelf()`](guide/dependency-injection-in-action#parent-tree)
[在父组件树里查找一个父组件(*@SkipSelf*)](guide/cb-dependency-injection#parent-tree) [在父组件树里查找一个父组件(*@SkipSelf*)](guide/dependency-injection-in-action#parent-tree)
* [The `Parent` class-interface](guide/dependency-injection-in-action#parent-token) * [The `Parent` class-interface](guide/dependency-injection-in-action#parent-token)
[`Parent`类接口](guide/cb-dependency-injection#parent-token) [`Parent`类接口](guide/dependency-injection-in-action#parent-token)
* [A `provideParent()` helper function](guide/dependency-injection-in-action#provideparent) * [A `provideParent()` helper function](guide/dependency-injection-in-action#provideparent)
[`provideParent()`助手函数](guide/cb-dependency-injection#provideparent) [`provideParent()`助手函数](guide/dependency-injection-in-action#provideparent)
* [Break circularities with a forward class reference (*forwardRef*)](guide/dependency-injection-in-action#forwardref) * [Break circularities with a forward class reference (*forwardRef*)](guide/dependency-injection-in-action#forwardref)
* [使用类的前向引用(*forwardRef*)打破循环依赖](guide/cb-dependency-injection#forwardref) * [使用类的前向引用(*forwardRef*)打破循环依赖](guide/dependency-injection-in-action#forwardref)
--> -->
See the <live-example name="dependency-injection-in-action"></live-example> See the <live-example name="dependency-injection-in-action"></live-example>
of the code in this cookbook. of the code in this cookbook.
要获取本“烹饪宝典”的代码，**参见<live-example name="cb-dependency-injection"></live-example>**。 要获取本“烹饪宝典”的代码，**参见<live-example name="dependency-injection-in-action"></live-example>**。
{@a app-wide-dependencies} {@a app-wide-dependencies}
@ -171,7 +171,7 @@ guide.
*提供商*是用来新建或者交付服务的。 *提供商*是用来新建或者交付服务的。
Angular拿到“类提供商”之后，会通过`new`操作来新建服务实例。 Angular拿到“类提供商”之后，会通过`new`操作来新建服务实例。
从[依赖注入](guide/dependency-injection#!)一章可以学到关于提供商的更多知识。 从[依赖注入](guide/dependency-injection#injector-providers)一章可以学到关于提供商的更多知识。
</div> </div>
@ -527,7 +527,7 @@ And the template displays this data-bound property.
Find this example in <live-example name="dependency-injection-in-action">live code</live-example> Find this example in <live-example name="dependency-injection-in-action">live code</live-example>
and confirm that the three `HeroBioComponent` instances have their own cached hero data. and confirm that the three `HeroBioComponent` instances have their own cached hero data.
到<live-example name="cb-dependency-injection">在线例子</live-example>中找到这个例子，确认三个`HeroBioComponent`实例拥有自己独立的英雄数据缓存。 到<live-example name="dependency-injection-in-action">在线例子</live-example>中找到这个例子，确认三个`HeroBioComponent`实例拥有自己独立的英雄数据缓存。
<figure> <figure>
@ -591,7 +591,7 @@ The next example covers this second case.
The `HeroBiosAndContactsComponent` is a revision of the `HeroBiosComponent` that you looked at [above](guide/dependency-injection-in-action#hero-bios-component). The `HeroBiosAndContactsComponent` is a revision of the `HeroBiosComponent` that you looked at [above](guide/dependency-injection-in-action#hero-bios-component).
`HeroBiosAndContactsComponent`是[前面](guide/cb-dependency-injection#hero-bios-component)见过的`HeroBiosComponent`的修改版。 `HeroBiosAndContactsComponent`是[前面](guide/dependency-injection-in-action#hero-bios-component)见过的`HeroBiosComponent`的修改版。
<code-example path="dependency-injection-in-action/src/app/hero-bios.component.ts" region="hero-bios-and-contacts" title="src/app/hero-bios.component.ts (HeroBiosAndContactsComponent)"> <code-example path="dependency-injection-in-action/src/app/hero-bios.component.ts" region="hero-bios-and-contacts" title="src/app/hero-bios.component.ts (HeroBiosAndContactsComponent)">
@ -819,7 +819,7 @@ to its parent injector, where the process repeats until there are no more inject
If the search is futile, the injector throws an error&mdash;unless the request was [optional](guide/dependency-injection-in-action#optional). If the search is futile, the injector throws an error&mdash;unless the request was [optional](guide/dependency-injection-in-action#optional).
如果注入器无法根据令牌在自己内部找到对应的提供商，它便将请求移交给它的父级注入器，这个过程不断重复，直到没有更多注入器为止。 如果注入器无法根据令牌在自己内部找到对应的提供商，它便将请求移交给它的父级注入器，这个过程不断重复，直到没有更多注入器为止。
如果没找到，注入器就抛出一个错误...除非这个请求是[可选的](guide/cb-dependency-injection#optional)。 如果没找到，注入器就抛出一个错误...除非这个请求是[可选的](guide/dependency-injection-in-action#optional)。
</div> </div>
@ -902,7 +902,7 @@ The code behind it gives you plenty to think about.
The `provide` object literal takes a *token* and a *definition object*. The `provide` object literal takes a *token* and a *definition object*.
The *token* is usually a class but [it doesn't have to be](guide/dependency-injection-in-action#tokens). The *token* is usually a class but [it doesn't have to be](guide/dependency-injection-in-action#tokens).
该`provide`对象需要一个*令牌*和一个*定义对象*。该*令牌*通常是一个类，但[并非一定是](guide/cb-dependency-injection#tokens) 该`provide`对象需要一个*令牌*和一个*定义对象*。该*令牌*通常是一个类，但[并非一定是](guide/dependency-injection-in-action#tokens)
The *definition* object has a required property that specifies how to create the singleton instance of the service. In this case, the property. The *definition* object has a required property that specifies how to create the singleton instance of the service. In this case, the property.
@ -951,7 +951,7 @@ It's a special kind of provider lookup key called an [InjectionToken](guide/depe
You can use an `InjectionToken` for any kind of provider but it's particular You can use an `InjectionToken` for any kind of provider but it's particular
helpful when the dependency is a simple value like a string, a number, or a function. helpful when the dependency is a simple value like a string, a number, or a function.
`TITLE` 提供商的令牌*不是一个类*。它是一个特别类型的提供商查询键，名叫[InjectionToken](guide/cb-dependency-injection#injection-token). `TITLE` 提供商的令牌*不是一个类*。它是一个特别类型的提供商查询键，名叫[InjectionToken](guide/dependency-injection-in-action#injection-token).
你可以把`InjectionToken`用作任何类型的提供商的令牌，但是它在依赖是简单类型（比如字符串、数字、函数）时会特别有帮助。 你可以把`InjectionToken`用作任何类型的提供商的令牌，但是它在依赖是简单类型（比如字符串、数字、函数）时会特别有帮助。
The value of a *value provider* must be defined *now*. You can't create the value later. The value of a *value provider* must be defined *now*. You can't create the value later.
@ -1071,7 +1071,7 @@ Imagine that the `LoggerService` had a large API, much larger than the actual th
You might want to shrink that API surface to just the members you actually need. You might want to shrink that API surface to just the members you actually need.
Here the `MinimalLogger` [*class-interface*](guide/dependency-injection-in-action#class-interface) reduces the API to two members: Here the `MinimalLogger` [*class-interface*](guide/dependency-injection-in-action#class-interface) reduces the API to two members:
想象一下如果`LoggerService`有个很大的API接口(虽然它其实只有三个方法，一个属性)，通过使用`MinimalLogger`[*类-接口*](guide/cb-dependency-injection#class-interface)别名，就能成功的把这个API接口缩小到只暴露两个成员： 想象一下如果`LoggerService`有个很大的API接口(虽然它其实只有三个方法，一个属性)，通过使用`MinimalLogger`[*类-接口*](guide/dependency-injection-in-action#class-interface)别名，就能成功的把这个API接口缩小到只暴露两个成员：
<code-example path="dependency-injection-in-action/src/app/minimal-logger.service.ts" title="src/app/minimal-logger.service.ts" linenums="false"> <code-example path="dependency-injection-in-action/src/app/minimal-logger.service.ts" title="src/app/minimal-logger.service.ts" linenums="false">
@ -1202,7 +1202,7 @@ takes `2` of them to be the runners-up, and returns their concatenated names.
Look at the <live-example name="dependency-injection-in-action"></live-example> Look at the <live-example name="dependency-injection-in-action"></live-example>
for the full source code. for the full source code.
该函数从`HeroService`获取英雄参赛者，从中取`2`个作为亚军，并把它们的名字拼接起来。请到<live-example name="cb-dependency-injection"></live-example>查看全部原代码。 该函数从`HeroService`获取英雄参赛者，从中取`2`个作为亚军，并把它们的名字拼接起来。请到<live-example name="dependency-injection-in-action"></live-example>查看全部原代码。
</div> </div>
@ -1508,7 +1508,8 @@ you can use Angular dependency injection to reach a parent component.
This section describes some techniques for doing that. This section describes some techniques for doing that.
本章节描述了这项技术。 本章节描述了这项技术。
<a>#known-parent</a>
{@a known-parent}
### Find a parent component of known type ### Find a parent component of known type
@ -1549,7 +1550,7 @@ is there for safety,
the <live-example name="dependency-injection-in-action"></live-example> the <live-example name="dependency-injection-in-action"></live-example>
confirms that the `alex` parameter is set. confirms that the `alex` parameter is set.
安全起见，我们添加了[@Optional](guide/cb-dependency-injection#optional)装饰器，但是<live-example name="cb-dependency-injection"></live-example>显示`alex`参数确实被设置了。 安全起见，我们添加了[@Optional](guide/dependency-injection-in-action#optional)装饰器，但是<live-example name="dependency-injection-in-action"></live-example>显示`alex`参数确实被设置了。
{@a base-parent} {@a base-parent}
@ -1625,7 +1626,7 @@ The <live-example name="dependency-injection-in-action"></live-example>
confirms that the `alex` parameter is null. confirms that the `alex` parameter is null.
*You cannot inject a parent by its base class.* *You cannot inject a parent by its base class.*
可惜这样不行。<live-example name="cb-dependency-injection"></live-example>显示`alex`参数是null。 可惜这样不行。<live-example name="dependency-injection-in-action"></live-example>显示`alex`参数是null。
*不能通过基类注入父组件*。 *不能通过基类注入父组件*。
@ -1638,7 +1639,7 @@ confirms that the `alex` parameter is null.
You can find a parent component with a [class-interface](guide/dependency-injection-in-action#class-interface). You can find a parent component with a [class-interface](guide/dependency-injection-in-action#class-interface).
可以通过[类-接口](guide/cb-dependency-injection#class-interface)找到一个父组件。 可以通过[类-接口](guide/dependency-injection-in-action#class-interface)找到一个父组件。
The parent must cooperate by providing an *alias* to itself in the name of a *class-interface* token. The parent must cooperate by providing an *alias* to itself in the name of a *class-interface* token.
@ -1647,13 +1648,13 @@ The parent must cooperate by providing an *alias* to itself in the name of a *cl
Recall that Angular always adds a component instance to its own injector; Recall that Angular always adds a component instance to its own injector;
that's why you could inject *Alex* into *Cathy* [earlier](guide/dependency-injection-in-action#known-parent). that's why you could inject *Alex* into *Cathy* [earlier](guide/dependency-injection-in-action#known-parent).
请记住Angular总是从它自己的注入器添加一个组件实例；这就是为什么在[之前](guide/cb-dependency-injection#known-parent)可以*Alex*注入到*Carol*。 请记住Angular总是从它自己的注入器添加一个组件实例；这就是为什么在[之前](guide/dependency-injection-in-action#known-parent)可以*Alex*注入到*Carol*。
Write an [*alias provider*](guide/dependency-injection-in-action#useexisting)&mdash;a `provide` object literal with a `useExisting` Write an [*alias provider*](guide/dependency-injection-in-action#useexisting)&mdash;a `provide` object literal with a `useExisting`
definition&mdash;that creates an *alternative* way to inject the same component instance definition&mdash;that creates an *alternative* way to inject the same component instance
and add that provider to the `providers` array of the `@Component` metadata for the `AlexComponent`: and add that provider to the `providers` array of the `@Component` metadata for the `AlexComponent`:
我们编写一个[*别名提供商*](guide/cb-dependency-injection#useexisting) &mdash；一个拥有`useExisting`定义的`provide`函数 &mdash; 我们编写一个[*别名提供商*](guide/dependency-injection-in-action#useexisting) &mdash；一个拥有`useExisting`定义的`provide`函数 &mdash;
它新建一个*备选的*方式来注入同一个组件实例，并把这个提供商添加到`AlexComponent`的`@Component`元数据里的`providers`数组。 它新建一个*备选的*方式来注入同一个组件实例，并把这个提供商添加到`AlexComponent`的`@Component`元数据里的`providers`数组。
@ -1669,7 +1670,7 @@ and add that provider to the `providers` array of the `@Component` metadata for
[Parent](guide/dependency-injection-in-action#parent-token) is the provider's *class-interface* token. [Parent](guide/dependency-injection-in-action#parent-token) is the provider's *class-interface* token.
The [*forwardRef*](guide/dependency-injection-in-action#forwardref) breaks the circular reference you just created by having the `AlexComponent` refer to itself. The [*forwardRef*](guide/dependency-injection-in-action#forwardref) breaks the circular reference you just created by having the `AlexComponent` refer to itself.
[Parent](guide/cb-dependency-injection#parent-token)是该提供商的*类-接口*令牌。`AlexComponent`引用了自身，造成循环引用，使用[*forwardRef*](guide/cb-dependency-injection#forwardRef)打破了该循环。 [Parent](guide/dependency-injection-in-action#parent-token)是该提供商的*类-接口*令牌。`AlexComponent`引用了自身，造成循环引用，使用[*forwardRef*](guide/dependency-injection-in-action#forwardref)打破了该循环。
*Carol*, the third of *Alex*'s child components, injects the parent into its `parent` parameter, *Carol*, the third of *Alex*'s child components, injects the parent into its `parent` parameter,
the same way you've done it before: the same way you've done it before:
@ -1728,8 +1729,8 @@ Here's *Barry*:
*Barry*'s `providers` array looks just like [*Alex*'s](guide/dependency-injection-in-action#alex-providers). *Barry*'s `providers` array looks just like [*Alex*'s](guide/dependency-injection-in-action#alex-providers).
If you're going to keep writing [*alias providers*](guide/dependency-injection-in-action#useexisting) like this you should create a [helper function](guide/dependency-injection-in-action#provideparent). If you're going to keep writing [*alias providers*](guide/dependency-injection-in-action#useexisting) like this you should create a [helper function](guide/dependency-injection-in-action#provideparent).
*Barry*的`providers`数组看起来很像[*Alex*的那个](guide/cb-dependency-injection#alex-providers). *Barry*的`providers`数组看起来很像[*Alex*的那个](guide/dependency-injection-in-action#alex-providers).
如果准备一直像这样编写[*别名提供商*](guide/cb-dependency-injection#useexisting)的话，我们应该建立一个[帮助函数](guide/cb-dependency-injection#provideparent)。 如果准备一直像这样编写[*别名提供商*](guide/dependency-injection-in-action#useexisting)的话，我们应该建立一个[帮助函数](guide/dependency-injection-in-action#provideparent)。
For now, focus on *Barry*'s constructor: For now, focus on *Barry*'s constructor:
@ -1793,7 +1794,7 @@ Here's *Alice*, *Barry* and family in action:
You [learned earlier](guide/dependency-injection-in-action#class-interface) that a *class-interface* is an abstract class used as an interface rather than as a base class. You [learned earlier](guide/dependency-injection-in-action#class-interface) that a *class-interface* is an abstract class used as an interface rather than as a base class.
我们[以前学过](guide/cb-dependency-injection#class-interface)：*类-接口*是一个抽象类，被当成一个接口使用，而非基类。 我们[以前学过](guide/dependency-injection-in-action#class-interface)：*类-接口*是一个抽象类，被当成一个接口使用，而非基类。
The example defines a `Parent` *class-interface*. The example defines a `Parent` *class-interface*.
@ -1861,7 +1862,7 @@ It doesn't in this example *only* to demonstrate that the code will compile and
Writing variations of the same parent *alias provider* gets old quickly, Writing variations of the same parent *alias provider* gets old quickly,
especially this awful mouthful with a [*forwardRef*](guide/dependency-injection-in-action#forwardref): especially this awful mouthful with a [*forwardRef*](guide/dependency-injection-in-action#forwardref):
编写父组件相同的各种*别名提供商*很快就会变得啰嗦，在用[*forwardRef](guide/cb-dependency-injection#forwardRef)的时候尤其绕口： 编写父组件相同的各种*别名提供商*很快就会变得啰嗦，在用[*forwardRef](guide/dependency-injection-in-action#forwardref)的时候尤其绕口：
<code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="alex-providers" title="dependency-injection-in-action/src/app/parent-finder.component.ts" linenums="false"> <code-example path="dependency-injection-in-action/src/app/parent-finder.component.ts" region="alex-providers" title="dependency-injection-in-action/src/app/parent-finder.component.ts" linenums="false">

12
aio/content/guide/dependency-injection.md
View File

@ -566,7 +566,7 @@ the `HeroesComponent`.
Also see *"Should I add app-wide providers to the root `AppModule` or the root `AppComponent`?"* in the [NgModule FAQ](guide/ngmodule-faq#q-root-component-or-module). Also see *"Should I add app-wide providers to the root `AppModule` or the root `AppComponent`?"* in the [NgModule FAQ](guide/ngmodule-faq#q-root-component-or-module).
参见 [NgModule FAQ](cookbook/ngmodule-faq#q-root-component-or-module) 一章的 参见 [NgModule FAQ](guide/ngmodule-faq#q-root-component-or-module) 一章的
**我该把“全应用级”提供商加到根模块`AppModule`还是根组件`AppComponent`？** **我该把“全应用级”提供商加到根模块`AppModule`还是根组件`AppComponent`？**
@ -732,7 +732,7 @@ under test:
Learn more in [Testing](guide/testing). Learn more in [Testing](guide/testing).
要学习更多知识，参见[测试](testing/index)。 要学习更多知识，参见[测试](guide/testing)。
</div> </div>
@ -794,7 +794,7 @@ injector for instantiation. Generally speaking, an injector reports an
error when trying to instantiate a class that is not marked as error when trying to instantiate a class that is not marked as
`@Injectable()`. `@Injectable()`.
**<a href="../api/core/index/Injectable-decorator.html">@Injectable()</a>** 标识一个类可以被注入器实例化。 **<a href="../api/core/Injectable">@Injectable()</a>** 标识一个类可以被注入器实例化。
通常，在试图实例化没有被标识为`@Injectable()`的类时，注入器会报错。 通常，在试图实例化没有被标识为`@Injectable()`的类时，注入器会报错。
@ -887,7 +887,7 @@ fact `@Injectable()` decorators that
identify a class as a target for instantiation by an injector. identify a class as a target for instantiation by an injector.
我们**可以**添加它。但是没有必要，因为`HerosComponent`已经有`@Component`装饰器了， 我们**可以**添加它。但是没有必要，因为`HerosComponent`已经有`@Component`装饰器了，
`@Component`（和随后将会学到的`@Directive`和`@Pipe`一样）是 <a href="../api/core/index/Injectable-decorator.html">Injectable</a> 的子类型。 `@Component`（和随后将会学到的`@Directive`和`@Pipe`一样）是 <a href="../api/core/Injectable">Injectable</a> 的子类型。
实际上，正是这些`@Injectable()`装饰器是把一个类标识为注入器实例化的目标。 实际上，正是这些`@Injectable()`装饰器是把一个类标识为注入器实例化的目标。
@ -918,7 +918,7 @@ While any decorator will trigger this effect, mark the service class with the
[@Injectable()](api/core/Injectable) decorator [@Injectable()](api/core/Injectable) decorator
to make the intent clear. to make the intent clear.
当然，任何装饰器都会触发这个效果，用 <a href="../api/core/index/Injectable-decorator.html">@Injectable()</a> 来标识服务 当然，任何装饰器都会触发这个效果，用 <a href="../api/core/Injectable">@Injectable()</a> 来标识服务
只是为了让这一意图更明显。 只是为了让这一意图更明显。
@ -1573,7 +1573,7 @@ One solution to choosing a provider token for non-class dependencies is
to define and use an [*InjectionToken*](api/core/InjectionToken). to define and use an [*InjectionToken*](api/core/InjectionToken).
The definition of such a token looks like this: The definition of such a token looks like this:
解决方案是为非类依赖定义和使用<a href="../api/core/index/InjectionToken-class.html"><b>InjectionToken</b></a>作为提供商令牌。 解决方案是为非类依赖定义和使用<a href="../api/core/InjectionToken"><b>InjectionToken</b></a>作为提供商令牌。
定义方式是这样的： 定义方式是这样的：

10
aio/content/guide/deployment.md
View File

@ -31,7 +31,7 @@ The techniques progress from _easy but suboptimal_ to _more optimal and more inv
You'll also want to read the [detailed instructions in the AOT Cookbook](guide/aot-compiler "AOT Cookbook"). You'll also want to read the [detailed instructions in the AOT Cookbook](guide/aot-compiler "AOT Cookbook").
[*预编译*(AOT)](guide/deployment#aot "AOT Compilation")是第一种[优化策略](guide/deployment#optimize)。 [*预编译*(AOT)](guide/deployment#aot "AOT Compilation")是第一种[优化策略](guide/deployment#optimize)。
详情参见[烹饪宝典中的AOT章节](cookbook/aot-compiler "AOT Cookbook")。 详情参见[烹饪宝典中的AOT章节](guide/aot-compiler "AOT Cookbook")。
* [Webpack](guide/deployment#webpack "Webpack Optimization") is a popular general purpose packaging tool with a rich ecosystem, including plugins for AOT. * [Webpack](guide/deployment#webpack "Webpack Optimization") is a popular general purpose packaging tool with a rich ecosystem, including plugins for AOT.
The Angular [webpack guide](guide/webpack "Webpack: an introduction") can get you started and The Angular [webpack guide](guide/webpack "Webpack: an introduction") can get you started and
@ -411,7 +411,7 @@ Learn more about AOT Compilation in the [AOT Cookbook](guide/aot-compiler "AOT C
which describes running the AOT compiler from the command line which describes running the AOT compiler from the command line
and using [_rollup_](guide/deployment#rollup) for bundling, minification, uglification and tree shaking. and using [_rollup_](guide/deployment#rollup) for bundling, minification, uglification and tree shaking.
要了解AOT编译器的更多知识，参见[烹饪宝典中的AOT一章](cookbook/aot-compiler "AOT Cookbook")， 要了解AOT编译器的更多知识，参见[烹饪宝典中的AOT一章](guide/aot-compiler "AOT Cookbook")，
它描述了如何在命令行中执行AOT编译器，并使用[_rollup_](guide/deployment#rollup)进行构建、最小化、混淆和摇树优化。 它描述了如何在命令行中执行AOT编译器，并使用[_rollup_](guide/deployment#rollup)进行构建、最小化、混淆和摇树优化。
@ -565,7 +565,7 @@ HTML中的[_&lt;base href="..."/&gt;_](https://angular.io/docs/ts/latest/guide/r
See also the [*APP_BASE_HREF*](api/common/APP_BASE_HREF "API: APP_BASE_HREF") alternative. See also the [*APP_BASE_HREF*](api/common/APP_BASE_HREF "API: APP_BASE_HREF") alternative.
参见另一种备选方案[*APP_BASE_HREF*](api/common/index/APP_BASE_HREF-let "API: APP_BASE_HREF")。 参见另一种备选方案[*APP_BASE_HREF*](api/common/APP_BASE_HREF "API: APP_BASE_HREF")。
</div> </div>
@ -618,7 +618,7 @@ Switching to production mode can make it run faster by disabling development spe
To enable [production mode](api/core/enableProdMode) when running remotely, add the following code to the `main.ts`. To enable [production mode](api/core/enableProdMode) when running remotely, add the following code to the `main.ts`.
要在远程运行时启用[生产模式](api/core/index/enableProdMode-function)，请把下列代码添加到`main.ts`中。 要在远程运行时启用[生产模式](api/core/enableProdMode)，请把下列代码添加到`main.ts`中。
<code-example path="deployment/src/main.ts" region="enableProdMode" title="src/main.ts (enableProdMode)" linenums="false"> <code-example path="deployment/src/main.ts" region="enableProdMode" title="src/main.ts (enableProdMode)" linenums="false">
@ -914,4 +914,4 @@ Read about how to enable CORS for specific servers at
## Next steps ## Next steps
## 下一步If you want to go beyond the [simple _copy-deploy_](guide/deployment#dev-deploy "Simplest deployment possible") approach, ## 下一步If you want to go beyond the [simple _copy-deploy_](guide/deployment#dev-deploy "Simplest deployment possible") approach,
read the [AOT Cookbook](guide/aot-compiler "AOT Cookbook") next.如果我们准备超越[简单*复制*部署](guide/deployment#dev-deploy "Simplest deployment possible")的方式，请参阅[烹饪宝典中的AOT部分](cookbook/aot-compiler "AOT Cookbook")。 read the [AOT Cookbook](guide/aot-compiler "AOT Cookbook") next.如果我们准备超越[简单*复制*部署](guide/deployment#dev-deploy "Simplest deployment possible")的方式，请参阅[烹饪宝典中的AOT部分](guide/aot-compiler "AOT Cookbook")。

2
aio/content/guide/form-validation.md
View File

@ -504,7 +504,7 @@ This allows you to do the following:
* [Test](guide/form-validation#testing-considerations) validation and control logic with isolated unit tests. * [Test](guide/form-validation#testing-considerations) validation and control logic with isolated unit tests.
使用孤立单元测试来[测试](guide/form-validation#testing)验证和控制器逻辑 使用孤立单元测试来[测试](guide/form-validation#testing-considerations)验证和控制器逻辑
The following sample re-writes the hero form in Reactive Forms style. The following sample re-writes the hero form in Reactive Forms style.

8
aio/content/guide/forms.md
View File

@ -671,7 +671,7 @@ What `NgForm` directive?
You didn't add an [NgForm](api/forms/NgForm) directive. You didn't add an [NgForm](api/forms/NgForm) directive.
什么是`NgForm`指令？ 什么是`NgForm`指令？
但我们明明没有添加过[NgForm](api/forms/index/NgForm-directive)指令啊！ 但我们明明没有添加过[NgForm](api/forms/NgForm)指令啊！
Angular did. Angular automatically creates and attaches an `NgForm` directive to the `<form>` tag. Angular did. Angular automatically creates and attaches an `NgForm` directive to the `<form>` tag.
@ -952,7 +952,7 @@ You can leverage those class names to change the appearance of the control.
Temporarily add a [template reference variable](guide/template-syntax#ref-vars) named `spy` Temporarily add a [template reference variable](guide/template-syntax#ref-vars) named `spy`
to the _Name_ `<input>` tag and use it to display the input's CSS classes. to the _Name_ `<input>` tag and use it to display the input's CSS classes.
往姓名`<input>`标签上添加名叫 **spy** 的临时[模板引用变量](guide/template-syntax#local-vars)， 往姓名`<input>`标签上添加名叫 **spy** 的临时[模板引用变量](guide/template-syntax#ref-vars)，
然后用这个 spy 来显示它上面的所有 CSS 类。 然后用这个 spy 来显示它上面的所有 CSS 类。
@ -1121,7 +1121,7 @@ tells Angular how to link the reference variable to the directive.
You set `name` to `ngModel` because the `ngModel` directive's `exportAs` property happens to be "ngModel". You set `name` to `ngModel` because the `ngModel` directive's `exportAs` property happens to be "ngModel".
为什么是 “ngModel”？ 为什么是 “ngModel”？
指令的 [exportAs](api/core/index/DirectiveMetadata-class#!) 属性告诉 Angular 如何链接模板引用变量到指令。 指令的 [exportAs](api/core/Directive) 属性告诉 Angular 如何链接模板引用变量到指令。
这里把`name`设置为`ngModel`是因为`ngModel`指令的`exportAs`属性设置成了 “ngModel”。 这里把`name`设置为`ngModel`是因为`ngModel`指令的`exportAs`属性设置成了 “ngModel”。
@ -1162,7 +1162,7 @@ You'll see the significance of this choice when you add a new hero to the form.
有些人会为这种行为感到不安。它们希望只有在用户做出无效的更改时才显示这个消息。 有些人会为这种行为感到不安。它们希望只有在用户做出无效的更改时才显示这个消息。
如果当控件是“全新”状态时也隐藏消息，就能达到这个目的。 如果当控件是“全新”状态时也隐藏消息，就能达到这个目的。
在往表单中[添加新英雄](guide/forms#new-hero)时，将看到这种选择的重要性。 在往表单中添加新英雄时，将看到这种选择的重要性。
The hero *Alter Ego* is optional so you can leave that be. The hero *Alter Ego* is optional so you can leave that be.

20
aio/content/guide/glossary.md
View File

@ -154,7 +154,7 @@ Angular 的每个[范围化包 (scoped package)](guide/glossary#scoped-package)
You can often achieve the same result using [NgModules](guide/glossary#ngmodule) instead. You can often achieve the same result using [NgModules](guide/glossary#ngmodule) instead.
注意，你可以利用 [Angular 模块](guide/glossary#angular-module)达到同样的目的。 注意，你可以利用 [Angular 模块](guide/glossary#ngmodule)达到同样的目的。
</div> </div>
@ -293,7 +293,7 @@ Angular 有一个非常强大的数据绑定框架，具有各种数据绑定操
Read about the following forms of binding in the [Template Syntax](guide/template-syntax) page: Read about the following forms of binding in the [Template Syntax](guide/template-syntax) page:
更多的绑定形式，见[模板语法](guide/template-syntax#data-binding)： 更多的绑定形式，见[模板语法](guide/template-syntax)：
* [Interpolation](guide/template-syntax#interpolation) * [Interpolation](guide/template-syntax#interpolation)
@ -549,7 +549,7 @@ in ES8 or a dialect that strives to be
compatible with it, such as [TypeScript](guide/glossary#typescript). compatible with it, such as [TypeScript](guide/glossary#typescript).
最新批准的 JavaScript 版本是[ECMAScript 2016](http://www.ecma-international.org/ecma-262/7.0/)（也称“ES2016”或“ES7”）。 最新批准的 JavaScript 版本是[ECMAScript 2016](http://www.ecma-international.org/ecma-262/7.0/)（也称“ES2016”或“ES7”）。
Angular 的开发人员要么使用这个版本的语言，要么使用与之兼容的方言，例如 [TypeScript](guide/glossary#typesScript)。 Angular 的开发人员要么使用这个版本的语言，要么使用与之兼容的方言，例如 [TypeScript](guide/glossary#typescript)。
Most modern browsers only support the much older "ECMAScript 5" (also known as "ES5") standard. Most modern browsers only support the much older "ECMAScript 5" (also known as "ES5") standard.
Applications written in ES2017, ES2016, ES2015, or one of their dialects must be [transpiled](guide/glossary#transpile) Applications written in ES2017, ES2016, ES2015, or one of their dialects must be [transpiled](guide/glossary#transpile)
@ -751,7 +751,7 @@ Angular有下列模块类型：
* [NgModules](guide/glossary#ngmodule). * [NgModules](guide/glossary#ngmodule).
For details and examples, see the [NgModules](guide/ngmodule) page. For details and examples, see the [NgModules](guide/ngmodule) page.
[Angular 模块](guide/glossary#angular-module)，见[Angular 模块](guide/ngmodule)。 [Angular 模块](guide/glossary#ngmodule)，见[Angular 模块](guide/ngmodule)。
* ES2015 modules, as described in this section. * ES2015 modules, as described in this section.
本节描述的 ES2015 模块。 本节描述的 ES2015 模块。
@ -858,12 +858,12 @@ section of the [Template Syntax](guide/template-syntax) page).
Events stream *out* of this property to the receiver identified Events stream *out* of this property to the receiver identified
in the template expression to the right of the equal sign. in the template expression to the right of the equal sign.
输出属性是一个指令属性，可作为[事件绑定](/docs/ts/latest/guide/template-syntax.html#property-binding)的 **目标** 。 输出属性是一个指令属性，可作为[事件绑定](guide/template-syntax.html#event-binding)的 **目标** 。
事件流从这个属性流*出*到模板表达式等号的右边的接收者。 事件流从这个属性流*出*到模板表达式等号的右边的接收者。
See the [Input and output properties](guide/template-syntax#inputs-outputs) section of the [Template Syntax](guide/template-syntax) page. See the [Input and output properties](guide/template-syntax#inputs-outputs) section of the [Template Syntax](guide/template-syntax) page.
参见[模板语法](/docs/ts/latest/guide/template-syntax.html)中的[输入与输出属性](guide/template-syntax#inputs-outputs)部分。 参见[模板语法](guide/template-syntax)中的[输入与输出属性](guide/template-syntax#inputs-outputs)部分。
{@a P} {@a P}
@ -881,7 +881,7 @@ Pascal 命名法是书写单词、复合词或短语的一种形式，每个单
This form is also known as *upper camel case* to distinguish it from *lower camel case* or simply [camelCase](guide/glossary#camelcase). This form is also known as *upper camel case* to distinguish it from *lower camel case* or simply [camelCase](guide/glossary#camelcase).
In this documentation, "PascalCase" means *upper camel case* and "camelCase" means *lower camel case*. In this documentation, "PascalCase" means *upper camel case* and "camelCase" means *lower camel case*.
这种形式也称**大写驼峰式命名法**，以区别于**小写驼峰式命名法”或[驼峰式命名法 (camelCase)](guide/glossary#camelCase)** 。 这种形式也称**大写驼峰式命名法**，以区别于**小写驼峰式命名法”或[驼峰式命名法 (camelCase)](guide/glossary#camelcase)** 。
在本文档中，“Pascal 命名法”都是指的*大写驼峰式命名法*，“驼峰式命名法”指的都是*小写驼峰式命名法*。 在本文档中，“Pascal 命名法”都是指的*大写驼峰式命名法*，“驼峰式命名法”指的都是*小写驼峰式命名法*。
@ -1009,7 +1009,7 @@ For more information, see the [Routing & Navigation](guide/router) page.
A separate [NgModule](guide/glossary#ngmodule) that provides the necessary service providers and directives for navigating through application views. A separate [NgModule](guide/glossary#ngmodule) that provides the necessary service providers and directives for navigating through application views.
一个独立的 [Angular 模块](guide/glossary#angular-module)，用来提供导航所需的服务提供商和指令。 一个独立的 [Angular 模块](guide/glossary#ngmodule)，用来提供导航所需的服务提供商和指令。
For more information, see the [Routing & Navigation](guide/router) page. For more information, see the [Routing & Navigation](guide/router) page.
@ -1189,7 +1189,7 @@ Read about how to write template expressions
in the [Template expressions](guide/template-syntax#template-expressions) section in the [Template expressions](guide/template-syntax#template-expressions) section
of the [Template Syntax](guide/template-syntax) page. of the [Template Syntax](guide/template-syntax) page.
到[模板语法](guide/template-syntax)一章的[模板表达式](guide/guide/template-syntax#template-expressions)部分了解更多模板表达式的知识。 到[模板语法](guide/template-syntax)一章的[模板表达式](guide/template-syntax#template-expressions)部分了解更多模板表达式的知识。
## Transpile ## Transpile
@ -1207,7 +1207,7 @@ The process of transforming code written in one form of JavaScript
A version of JavaScript that supports most [ECMAScript 2015](guide/glossary#es2015) A version of JavaScript that supports most [ECMAScript 2015](guide/glossary#es2015)
language features such as [decorators](guide/glossary#decorator). language features such as [decorators](guide/glossary#decorator).
JavaScript 的一个版本，支持了几乎所有 [ECMAScript 2015](guide/glossary#ecmascript=2015) 语言特性，例如[装饰器 (decorator)](guide/glossary#decorator))。 JavaScript 的一个版本，支持了几乎所有 [ECMAScript 2015](guide/glossary#es2015) 语言特性，例如[装饰器 (decorator)](guide/glossary#decorator))。
TypeScript is also notable for its optional typing system, which provides TypeScript is also notable for its optional typing system, which provides
compile-time type checking and strong tooling support (such as "intellisense," compile-time type checking and strong tooling support (such as "intellisense,"

8
aio/content/guide/lifecycle-hooks.md
View File

@ -639,7 +639,7 @@ Constructors should do no more than set the initial local variables to simple va
An `ngOnInit()` is a good place for a component to fetch its initial data. The An `ngOnInit()` is a good place for a component to fetch its initial data. The
[Tour of Heroes Tutorial](tutorial/toh-pt4#oninit) guideshows how. [Tour of Heroes Tutorial](tutorial/toh-pt4#oninit) guideshows how.
`ngOnInit()`是组件获取初始数据的好地方。[指南](tutorial/toh-pt4#oninit)和[HTTP](guide/server-communication#oninit)章讲解了如何这样做。 `ngOnInit()`是组件获取初始数据的好地方。[指南](tutorial/toh-pt4#oninit)中讲解了如何这样做。
Remember also that a directive's data-bound input properties are not set until _after construction_. Remember also that a directive's data-bound input properties are not set until _after construction_.
That's a problem if you need to initialize the directive based on those properties. That's a problem if you need to initialize the directive based on those properties.
@ -712,7 +712,7 @@ The `ngOnChanges()` method takes an object that maps each changed property name
[SimpleChange](api/core/SimpleChange) object holding the current and previous property values. [SimpleChange](api/core/SimpleChange) object holding the current and previous property values.
This hook iterates over the changed properties and logs them. This hook iterates over the changed properties and logs them.
`ngOnChanges()`方法获取了一个对象，它把每个发生变化的属性名都映射到了一个[SimpleChange](api/core/index/SimpleChange-class)对象， `ngOnChanges()`方法获取了一个对象，它把每个发生变化的属性名都映射到了一个[SimpleChange](api/core/SimpleChange)对象，
该对象中有属性的当前值和前一个值。我们在这些发生了变化的属性上进行迭代，并记录它们。 该对象中有属性的当前值和前一个值。我们在这些发生了变化的属性上进行迭代，并记录它们。
The example component, `OnChangesComponent`, has two input properties: `hero` and `power`. The example component, `OnChangesComponent`, has two input properties: `hero` and `power`.
@ -839,7 +839,7 @@ The following hooks take action based on changing values *within the child view*
which can only be reached by querying for the child view via the property decorated with which can only be reached by querying for the child view via the property decorated with
[@ViewChild](api/core/ViewChild). [@ViewChild](api/core/ViewChild).
下列钩子基于*子视图中*的每一次数据变更采取行动，我们只能通过带[@ViewChild](api/core/index/ViewChild-decorator)装饰器的属性来访问子视图。 下列钩子基于*子视图中*的每一次数据变更采取行动，我们只能通过带[@ViewChild](api/core/ViewChild)装饰器的属性来访问子视图。
<code-example path="lifecycle-hooks/src/app/after-view.component.ts" region="hooks" title="AfterViewComponent (class excerpts)" linenums="false"></code-example> <code-example path="lifecycle-hooks/src/app/after-view.component.ts" region="hooks" title="AfterViewComponent (class excerpts)" linenums="false"></code-example>
@ -1004,7 +1004,7 @@ which can only be reached by querying for them via the property decorated with
[@ContentChild](api/core/ContentChild). [@ContentChild](api/core/ContentChild).
下列*AfterContent*钩子基于*子级内容*中值的变化而采取相应的行动，这里我们只能通过带有[@ContentChild](api/core/index/ContentChild-decorator)装饰器的属性来查询到“子级内容”。<code-example path="lifecycle-hooks/src/app/after-content.component.ts" region="hooks" title="AfterContentComponent (class excerpts)" linenums="false"> 下列*AfterContent*钩子基于*子级内容*中值的变化而采取相应的行动，这里我们只能通过带有[@ContentChild](api/core/ContentChild)装饰器的属性来查询到“子级内容”。<code-example path="lifecycle-hooks/src/app/after.component.ts" region="hooks" title="AfterContentComponent (class excerpts)" linenums="false">
</code-example> </code-example>

2
aio/content/guide/ngmodule-faq.md
View File

@ -460,7 +460,7 @@ You add that result to the `imports` list of the root `AppModule`.
`RouterModule.forRoot`就是一个很好的例子。 `RouterModule.forRoot`就是一个很好的例子。
应用把一个`Routes`对象传给`RouterModule.forRoot`，为的就是使用路由配置全应用级的`Router`服务。 应用把一个`Routes`对象传给`RouterModule.forRoot`，为的就是使用路由配置全应用级的`Router`服务。
`RouterModule.forRoot`返回一个[ModuleWithProviders](api/core/index/ModuleWithProviders-interface)对象。 `RouterModule.forRoot`返回一个[ModuleWithProviders](api/core/ModuleWithProviders)对象。
我们把这个结果添加到根模块`AppModule`的`imports`列表中。 我们把这个结果添加到根模块`AppModule`的`imports`列表中。

26
aio/content/guide/ngmodule.md
View File

@ -26,7 +26,7 @@ Before reading this page, read the
[The Root Module](guide/bootstrapping) page, which introduces NgModules and the essentials [The Root Module](guide/bootstrapping) page, which introduces NgModules and the essentials
of creating and maintaining a single root `AppModule` for the entire application. of creating and maintaining a single root `AppModule` for the entire application.
请先阅读[根模块](guide/appmodule)一章，那里介绍过 Angular 模块，以及如何为整个应用创建和维护单一的*根*`AppModule`类。 请先阅读[根模块](guide/bootstrapping)一章，那里介绍过 Angular 模块，以及如何为整个应用创建和维护单一的*根*`AppModule`类。
This page covers NgModules in greater depth. This page covers NgModules in greater depth.
@ -91,7 +91,9 @@ This page covers NgModules in greater depth.
CF: This link goes to the top of this page. I would expect it to go to an "NgModule metadata properties" CF: This link goes to the top of this page. I would expect it to go to an "NgModule metadata properties"
section at the end of this page, but that section doesn't exist. --> section at the end of this page, but that section doesn't exist. -->
<!--
[NgModule 元数据的属性](guide/ngmodule#ngmodule-properties "对@NgModule元数据属性的技术性总结") [NgModule 元数据的属性](guide/ngmodule#ngmodule-properties "对@NgModule元数据属性的技术性总结")
-->
#### Live examples #### Live examples
@ -133,7 +135,7 @@ The companion [NgModule FAQs](guide/ngmodule-faq "NgModule FAQs") guide
offers answers to specific design and implementation questions. offers answers to specific design and implementation questions.
Read this page before reading those FAQs. Read this page before reading those FAQs.
烹饪宝典中的 [Angular 模块常见问题](cookbook/ngmodule-faq "Angular 模块常见问题")为一些与设计和实现有关的问题提供了答案。 烹饪宝典中的 [Angular 模块常见问题](guide/ngmodule-faq "Angular 模块常见问题")为一些与设计和实现有关的问题提供了答案。
不过在阅读常见问题之前，要先阅读本章。 不过在阅读常见问题之前，要先阅读本章。
@ -617,7 +619,7 @@ More accurately, `NgIf` is declared in `CommonModule` from `@angular/common`.
`BrowserModule` imports `CommonModule` and [re-exports](guide/ngmodule-faq#q-re-export) it. `BrowserModule` imports `CommonModule` and [re-exports](guide/ngmodule-faq#q-re-export) it.
The net effect is that an importer of `BrowserModule` gets `CommonModule` directives automatically. The net effect is that an importer of `BrowserModule` gets `CommonModule` directives automatically.
`BrowserModule`导入了`CommonModule`并且[_重新导出_](cookbook/ngmodule-faq#q-re-export)了它。 `BrowserModule`导入了`CommonModule`并且[_重新导出_](guide/ngmodule-faq#q-re-export)了它。
最终的效果是：只要导入`BrowserModule`就自动获得了`CommonModule`中的指令。 最终的效果是：只要导入`BrowserModule`就自动获得了`CommonModule`中的指令。
@ -666,7 +668,7 @@ template-driven or
<!-- CF: this link goes to a page titled "Dynamic Forms". Should the link text be "dynamic" instead of "reactive"? --> <!-- CF: this link goes to a page titled "Dynamic Forms". Should the link text be "dynamic" instead of "reactive"? -->
我们写 Angular 表单组件时，可以使用[_模板驱动式表单_](guide/forms)， 我们写 Angular 表单组件时，可以使用[_模板驱动式表单_](guide/forms)，
也可以使用[_响应式表单_](cookbook/dynamic-form)。 也可以使用[_响应式表单_](guide/dynamic-form)。
The following sample imports the `FormsModule` from `@angular/forms` because The following sample imports the `FormsModule` from `@angular/forms` because
the `ContactComponent` is written in _template-driven_ style. the `ContactComponent` is written in _template-driven_ style.
@ -699,7 +701,7 @@ and [custom pipe](guide/pipes#custom-pipes) (called `Awesome`),
and an alternative version of the `HighlightDirective`. and an alternative version of the `HighlightDirective`.
`ContactComponent`还有很多事要做。 `ContactComponent`还有很多事要做。
表单组件通常都是很复杂的。本组件具有它自己的`ContactService`和[自定义管道](guide/ngmodule#pipes.html) `Awesome`， 表单组件通常都是很复杂的。本组件具有它自己的`ContactService`和[自定义管道](guide/pipes#custom-pipes) `Awesome`，
以及`HighlightDirective`的另一个版本。 以及`HighlightDirective`的另一个版本。
To make it manageable, place all contact-related material in an `src/app/contact` folder To make it manageable, place all contact-related material in an `src/app/contact` folder
@ -949,7 +951,7 @@ Only Contact components should import the `ContactService` type.
Read more in the [How do I restrict service scope to a module?](guide/ngmodule-faq#q-component-scoped-providers) section Read more in the [How do I restrict service scope to a module?](guide/ngmodule-faq#q-component-scoped-providers) section
of the [NgModule FAQs](guide/ngmodule-faq) page. of the [NgModule FAQs](guide/ngmodule-faq) page.
在[NgModule常见问题](cookbook/ngmodule-faq)页的[如何把服务的范围限制在一个模块中](cookbook/ngmodule-faq#q-component-scoped-providers)一节中可以了解更多。 在[NgModule常见问题](guide/ngmodule-faq)页的[如何把服务的范围限制在一个模块中](guide/ngmodule-faq#q-component-scoped-providers)一节中可以了解更多。
</div> </div>
@ -1288,7 +1290,7 @@ You also replaced `BrowserModule` by `CommonModule`, for reasons explained in th
[Should I import BrowserModule or CommonModule?](guide/ngmodule-faq#q-browser-vs-common-module) [Should I import BrowserModule or CommonModule?](guide/ngmodule-faq#q-browser-vs-common-module)
section of the [NgModule FAQs](guide/ngmodule-faq) page. section of the [NgModule FAQs](guide/ngmodule-faq) page.
我们还用`CommonModule`替换了`BrowserModule`，其中缘由参见[这条常见问题](cookbook/ngmodule-faq#q-browser-vs-common-module)。 我们还用`CommonModule`替换了`BrowserModule`，其中缘由参见[这条常见问题](guide/ngmodule-faq#q-browser-vs-common-module)。
You _declare_ the contact component, directive, and pipe in the module `declarations`. You _declare_ the contact component, directive, and pipe in the module `declarations`.
@ -1686,7 +1688,7 @@ Angular doesn't recognize them but Angular developers do.
[Follow this convention](guide/ngmodule-faq#q-for-root) if you write a similar module [Follow this convention](guide/ngmodule-faq#q-for-root) if you write a similar module
that has both shared [declarables](guide/ngmodule-faq#q-declarable) and services. that has both shared [declarables](guide/ngmodule-faq#q-declarable) and services.
当你要写类似的模块，来为根模块和特性模块分别导出一些[_声明_](cookbook/ngmodule-faq#q-declarable)和服务时，请[遵循这个约定](cookbook/ngmodule-faq#q-for-root)。 当你要写类似的模块，来为根模块和特性模块分别导出一些[_声明_](guide/ngmodule-faq#q-declarable)和服务时，请[遵循这个约定](guide/ngmodule-faq#q-for-root)。
</div> </div>
@ -1971,7 +1973,7 @@ if the `SharedModule` provides the `UserService`.
`UserService`是全应用级单例。 `UserService`是全应用级单例。
我们不希望每个模块都各自有它的实例。 我们不希望每个模块都各自有它的实例。
而如果由`SharedModule`提供`UserService`，就会导致[铁板钉钉的危险](cookbook/ngmodule-faq#q-why-it-is-bad)。 而如果由`SharedModule`提供`UserService`，就会导致[铁板钉钉的危险](guide/ngmodule-faq#q-why-bad)。
<div class="alert is-critical"> <div class="alert is-critical">
@ -2245,7 +2247,7 @@ a simple object with the following properties:
按照约定，模块的静态方法***forRoot***可以同时提供并配置服务。 按照约定，模块的静态方法***forRoot***可以同时提供并配置服务。
它接收一个服务配置对象，并返回一个[ModuleWithProviders](api/core/index/ModuleWithProviders-interface)。这个简单对象具有两个属性： 它接收一个服务配置对象，并返回一个[ModuleWithProviders](api/core/ModuleWithProviders)。这个简单对象具有两个属性：
* `ngModule`: the `CoreModule` class * `ngModule`: the `CoreModule` class
@ -2358,7 +2360,7 @@ Only the root `AppModule` should import the `CoreModule`.
It looks like it is supposed to go to a specific question/section within the page. --> It looks like it is supposed to go to a specific question/section within the page. -->
只有根模块`AppModule`才能导入`CoreModule`。 只有根模块`AppModule`才能导入`CoreModule`。
如果惰性加载模块导入了它，就会[出问题](cookbook/ngmodule-faq#q-why-it-is-bad)。 如果惰性加载模块导入了它，就会[出问题](guide/ngmodule-faq#q-why-bad)。
You could hope that no developer makes that mistake. You could hope that no developer makes that mistake.
Or you can guard against it and fail fast by adding the following `CoreModule` constructor. Or you can guard against it and fail fast by adding the following `CoreModule` constructor.
@ -2434,5 +2436,5 @@ in the companion [NgModule FAQs](guide/ngmodule-faq "NgModule FAQs") page
with its ready answers to specific design and implementation questions. with its ready answers to specific design and implementation questions.
现在，你已经理解了 Angular 的模块。可能你还会对烹饪宝典中的 现在，你已经理解了 Angular 的模块。可能你还会对烹饪宝典中的
[Angular 模块常见问题](cookbook/ngmodule-faq "Angular 模块常见问题")感兴趣， [Angular 模块常见问题](guide/ngmodule-faq "Angular 模块常见问题")感兴趣，
它解答了很多关于设计和实现方面的问题。 它解答了很多关于设计和实现方面的问题。

3
aio/content/guide/npm-packages.md
View File

@ -160,7 +160,7 @@ This package also includes the `bootstrapStatic()` method for bootstrapping appl
compile templates on the client. Don’t use offline compilation. compile templates on the client. Don’t use offline compilation.
Use this package for bootstrapping during development and for bootstrapping plunker samples. Use this package for bootstrapping during development and for bootstrapping plunker samples.
***@angular/platform-browser-dynamic*** - 为应用程序提供一些[提供商](api/core/index/Provider-type-alias)和[bootstrap](guide/ngmodule#bootstrap)方法，以便在客户端编译模板。不要用于离线编译。 ***@angular/platform-browser-dynamic*** - 为应用程序提供一些[提供商](api/core/Provider)和[bootstrap](guide/ngmodule#bootstrap)方法，以便在客户端编译模板。不要用于离线编译。
我们使用这个包在开发期间引导应用，以及引导plunker中的范例。 我们使用这个包在开发期间引导应用，以及引导plunker中的范例。
***@angular/http*** : Angular's HTTP client. ***@angular/http*** : Angular's HTTP client.
@ -263,7 +263,6 @@ Good for demos, samples, and early stage development (before you even have a ser
***angular-in-memory-web-api*** - 一个Angular的支持库，它能模拟一个远端服务器的Web API，而不需要依赖一个真实的服务器或发起真实的HTTP调用。 ***angular-in-memory-web-api*** - 一个Angular的支持库，它能模拟一个远端服务器的Web API，而不需要依赖一个真实的服务器或发起真实的HTTP调用。
对演示、文档范例和开发的早期阶段(那时候我们可能还没有服务器呢)非常有用。 对演示、文档范例和开发的早期阶段(那时候我们可能还没有服务器呢)非常有用。
请到[Http客户端](guide/server-communication#appendix-tour-of-heroes-in-memory-server)一章中了解更多知识。
***bootstrap*** : [Bootstrap](http://getbootstrap.com/) is a popular HTML and CSS framework for designing responsive web apps. ***bootstrap*** : [Bootstrap](http://getbootstrap.com/) is a popular HTML and CSS framework for designing responsive web apps.
Some of the samples improve their appearance with *bootstrap*. Some of the samples improve their appearance with *bootstrap*.

12
aio/content/guide/pipes.md
View File

@ -69,7 +69,7 @@ Inside the interpolation expression, you flow the component's `birthday` value t
function on the right. All pipes work this way. function on the right. All pipes work this way.
在这个插值表达式中，我们让组件的`birthday`值通过[管道操作符](guide/template-syntax#pipe)( | )流动到 在这个插值表达式中，我们让组件的`birthday`值通过[管道操作符](guide/template-syntax#pipe)( | )流动到
右侧的[Date管道](api/common/index/DatePipe-class)函数中。所有管道都会用这种方式工作。 右侧的[Date管道](api/common/DatePipe)函数中。所有管道都会用这种方式工作。
<div class="l-sub-section"> <div class="l-sub-section">
@ -113,7 +113,7 @@ Angular内置了一些管道，比如`DatePipe`、`UpperCasePipe`、`LowerCasePi
Read more about these and many other built-in pipes in the [pipes topics](api?type=pipe) of the Read more about these and many other built-in pipes in the [pipes topics](api?type=pipe) of the
[API Reference](api); filter for entries that include the word "pipe". [API Reference](api); filter for entries that include the word "pipe".
要学习更多内置管道的知识，参见[API参考手册](api/#!?apiFilter=pipe)，并用“pipe”为关键词对结果进行过滤。 要学习更多内置管道的知识，参见[API参考手册](api?type=pipe)，并用“pipe”为关键词对结果进行过滤。
Angular doesn't have a `FilterPipe` or an `OrderByPipe` for reasons explained in the [Appendix](guide/pipes#no-filter-pipe) of this page. Angular doesn't have a `FilterPipe` or an `OrderByPipe` for reasons explained in the [Appendix](guide/pipes#no-filter-pipe) of this page.
@ -205,7 +205,7 @@ As you click the button, the displayed date alternates between
Read more about the `DatePipe` format options in the [Date Pipe](api/common/DatePipe) Read more about the `DatePipe` format options in the [Date Pipe](api/common/DatePipe)
API Reference page. API Reference page.
要了解更多`DatePipes`的格式选项，请参阅[API文档](api/common/index/DatePipe-class)。 要了解更多`DatePipes`的格式选项，请参阅[API文档](api/common/DatePipe)。
</div> </div>
@ -769,7 +769,7 @@ The code uses the [Angular http](guide/http) client to retrieve data</span>:
我们确实得小心点。 我们确实得小心点。
这个管道只有当所请求的URL发生变化时才会向服务器发起请求。它会缓存服务器的响应。 这个管道只有当所请求的URL发生变化时才会向服务器发起请求。它会缓存服务器的响应。
代码如下，它使用[Angular http](guide/server-communication)客户端来接收数据 代码如下，它使用[Angular http](guide/http)客户端来接收数据
<code-example path="pipes/src/app/fetch-json.pipe.ts" title="src/app/fetch-json.pipe.ts"> <code-example path="pipes/src/app/fetch-json.pipe.ts" title="src/app/fetch-json.pipe.ts">
@ -846,7 +846,7 @@ The [JsonPipe](api/common/JsonPipe)
provides an easy way to diagnosis a mysteriously failing data binding or provides an easy way to diagnosis a mysteriously failing data binding or
inspect an object for future binding. inspect an object for future binding.
[JsonPipe](api/common/index/JsonPipe-class)为你诊断数据绑定的某些神秘错误或为做进一步绑定而探查数据时，提供了一个简单途径。 [JsonPipe](api/common/JsonPipe)为你诊断数据绑定的某些神秘错误或为做进一步绑定而探查数据时，提供了一个简单途径。
</div> </div>
@ -900,7 +900,7 @@ of your views.
Explore Angular's inventory of built-in pipes in the [API Reference](api?type=pipe). Explore Angular's inventory of built-in pipes in the [API Reference](api?type=pipe).
Try writing a custom pipe and perhaps contributing it to the community. Try writing a custom pipe and perhaps contributing it to the community.
要浏览Angular的所有内置管道，请到[API参考手册](api/#!?query=pipe)。 要浏览Angular的所有内置管道，请到[API参考手册](api?type=pipe)。
学着写写自定义管道，并贡献给开发社区。 学着写写自定义管道，并贡献给开发社区。

22
aio/content/guide/reactive-forms.md
View File

@ -321,7 +321,7 @@ In real apps, most form controls have both.
This guide touches only briefly on `Validators`. For an in-depth look at them, This guide touches only briefly on `Validators`. For an in-depth look at them,
read the [Form Validation](guide/form-validation) guide. read the [Form Validation](guide/form-validation) guide.
本章中只会接触`Validators`中的一点点，要想更深入的了解它们，请阅读烹饪宝典中的[表单验证](cookbook/form-validation)一章。 本章中只会接触`Validators`中的一点点，要想更深入的了解它们，请阅读烹饪宝典中的[表单验证](guide/form-validation)一章。
</div> </div>
@ -444,14 +444,14 @@ is the abstract base class for the three concrete form control classes:
`FormControl`, `FormGroup`, and `FormArray`. `FormControl`, `FormGroup`, and `FormArray`.
It provides their common behaviors and properties, some of which are _observable_. It provides their common behaviors and properties, some of which are _observable_.
[`AbstractControl`](api/forms/index/AbstractControl-class "API Reference: AbstractControl")是三个具体表单类的抽象基类。 [`AbstractControl`](api/forms/AbstractControl "API Reference: AbstractControl")是三个具体表单类的抽象基类。
并为它们提供了一些共同的行为和属性，其中有些是*可观察对象（Observable）*。 并为它们提供了一些共同的行为和属性，其中有些是*可观察对象（Observable）*。
* [_FormControl_](api/forms/FormControl "API Reference: FormControl") * [_FormControl_](api/forms/FormControl "API Reference: FormControl")
tracks the value and validity status of an _individual_ form control. tracks the value and validity status of an _individual_ form control.
It corresponds to an HTML form control such as an input box or selector. It corresponds to an HTML form control such as an input box or selector.
[_FormControl_](api/forms/index/FormControl-class "API Reference: FormControl") [_FormControl_](api/forms/FormControl "API Reference: FormControl")
用于跟踪一个*单独的*表单控件的值和有效性状态。它对应于一个HTML表单控件，比如输入框和下拉框。 用于跟踪一个*单独的*表单控件的值和有效性状态。它对应于一个HTML表单控件，比如输入框和下拉框。
* [_FormGroup_](api/forms/FormGroup "API Reference: FormGroup") * [_FormGroup_](api/forms/FormGroup "API Reference: FormGroup")
@ -459,7 +459,7 @@ tracks the value and validity state of a _group_ of `AbstractControl` instances.
The group's properties include its child controls. The group's properties include its child controls.
The top-level form in your component is a `FormGroup`. The top-level form in your component is a `FormGroup`.
[_FormGroup_](api/forms/index/FormGroup-class "API Reference: FormGroup")用于 [_FormGroup_](api/forms/FormGroup "API Reference: FormGroup")用于
跟踪*一组*`AbstractControl`的实例的值和有效性状态。 跟踪*一组*`AbstractControl`的实例的值和有效性状态。
该组的属性中包含了它的子控件。 该组的属性中包含了它的子控件。
组件中的顶级表单就是一个`FormGroup`。 组件中的顶级表单就是一个`FormGroup`。
@ -467,7 +467,7 @@ The top-level form in your component is a `FormGroup`.
* [_FormArray_](api/forms/FormArray "API Reference: FormArray") * [_FormArray_](api/forms/FormArray "API Reference: FormArray")
tracks the value and validity state of a numerically indexed _array_ of `AbstractControl` instances. tracks the value and validity state of a numerically indexed _array_ of `AbstractControl` instances.
[_FormArray_](api/forms/index/FormArray-class "API Reference: FormArray")用于跟踪`AbstractControl`实例组成的有序数组的值和有效性状态。 [_FormArray_](api/forms/FormArray "API Reference: FormArray")用于跟踪`AbstractControl`实例组成的有序数组的值和有效性状态。
You'll learn more about these classes as you work through this guide. You'll learn more about these classes as you work through this guide.
@ -820,7 +820,7 @@ It remains in each of the following examples with the same configuration.
For more on validating Angular forms, see the For more on validating Angular forms, see the
[Form Validation](guide/form-validation) guide. [Form Validation](guide/form-validation) guide.
要了解Angular表单验证器的更多知识，参见[表单验证器](cookbook/form-validation)一章。 要了解Angular表单验证器的更多知识，参见[表单验证器](guide/form-validation)一章。
### More FormControls ### More FormControls
@ -912,9 +912,9 @@ See the API reference for more information about
[selects](api/forms/SelectControlValueAccessor "API: SelectControlValueAccessor"), and [selects](api/forms/SelectControlValueAccessor "API: SelectControlValueAccessor"), and
[checkboxes](api/forms/CheckboxControlValueAccessor "API: CheckboxControlValueAccessor"). [checkboxes](api/forms/CheckboxControlValueAccessor "API: CheckboxControlValueAccessor").
参见API参考手册中的[radio buttons](api/forms/index/RadioControlValueAccessor-directive "API: RadioControlValueAccessor")、 参见API参考手册中的[radio buttons](api/forms/RadioControlValueAccessor "API: RadioControlValueAccessor")、
[selects](api/forms/index/SelectControlValueAccessor-directive "API: SelectControlValueAccessor")和 [selects](api/forms/SelectControlValueAccessor "API: SelectControlValueAccessor")和
[checkboxes](api/forms/index/CheckboxControlValueAccessor-directive "API: CheckboxControlValueAccessor") [checkboxes](api/forms/CheckboxControlValueAccessor "API: CheckboxControlValueAccessor")
@ -1159,7 +1159,7 @@ such as one of the following:
Learn about other `FormControl` properties in the Learn about other `FormControl` properties in the
[_AbstractControl_](api/forms/AbstractControl) API reference. [_AbstractControl_](api/forms/AbstractControl) API reference.
要了解`FormControl`的更多属性，参见API参考手册的[_AbstractControl_](api/forms/index/AbstractControl-class)部分。 要了解`FormControl`的更多属性，参见API参考手册的[_AbstractControl_](api/forms/AbstractControl)部分。
One common reason for inspecting `FormControl` properties is to One common reason for inspecting `FormControl` properties is to
make sure the user entered valid values. make sure the user entered valid values.
@ -1167,7 +1167,7 @@ Read more about validating Angular forms in the
[Form Validation](guide/form-validation) guide. [Form Validation](guide/form-validation) guide.
检查`FormControl`属性的另一个原因是确保用户输入了有效的值。 检查`FormControl`属性的另一个原因是确保用户输入了有效的值。
要了解更多关于Angular表单验证的知识，参见[表单验证](cookbook/form-validation)一章。 要了解更多关于Angular表单验证的知识，参见[表单验证](guide/form-validation)一章。

6
aio/content/guide/router.md
View File

@ -1129,7 +1129,7 @@ Each definition translates to a [Route](api/router/Route) object which has two t
`path`, the URL path segment for this route; and a `path`, the URL path segment for this route; and a
`component`, the component associated with this route. `component`, the component associated with this route.
每个定义都被翻译成了一个[Route](api/router/index/Route-interface)对象。该对象有一个`path`字段，表示该路由中的URL路径部分，和一个`component`字段，表示与该路由相关联的组件。 每个定义都被翻译成了一个[Route](api/router/Route)对象。该对象有一个`path`字段，表示该路由中的URL路径部分，和一个`component`字段，表示与该路由相关联的组件。
The router draws upon its registry of definitions when the browser URL changes The router draws upon its registry of definitions when the browser URL changes
or when application code tells the router to navigate along a route path. or when application code tells the router to navigate along a route path.
@ -1732,7 +1732,7 @@ The **Routing Module** has several characteristics:
* Does **not** [declare components](guide/ngmodule-faq#routing-module). * Does **not** [declare components](guide/ngmodule-faq#routing-module).
**不要**[声明组件](cookbook/ngmodule-faq#routing-module) **不要**[声明组件](guide/ngmodule-faq#routing-module)
{@a routing-refactor} {@a routing-refactor}
@ -2484,7 +2484,7 @@ The route path and parameters are available through an injected router service c
[ActivatedRoute](api/router/ActivatedRoute). [ActivatedRoute](api/router/ActivatedRoute).
It has a great deal of useful information including: It has a great deal of useful information including:
该路由的路径和参数可以通过注入进来的一个名叫[ActivatedRoute](api/router/index/ActivatedRoute-interface)的路由服务来获取。 该路由的路径和参数可以通过注入进来的一个名叫[ActivatedRoute](api/router/ActivatedRoute)的路由服务来获取。
它有一大堆有用的信息，包括： 它有一大堆有用的信息，包括：
<table> <table>

4
aio/content/guide/security.md
View File

@ -35,7 +35,7 @@ You can run the <live-example></live-example> in Plunker and download the code f
To report vulnerabilities in Angular itself, email us at [security@angular.io](mailto:security@angular.io). To report vulnerabilities in Angular itself, email us at [security@angular.io](mailto:security@angular.io).
给我们（[security@angular.io](guide/mailto:security@angular)）发邮件，报告Angular本身的漏洞。 给我们（[security@angular.io](mailto:security@angular.io)）发邮件，报告Angular本身的漏洞。
For more information about how Google handles security issues, see [Google's security For more information about how Google handles security issues, see [Google's security
philosophy](https://www.google.com/about/appsecurity/). philosophy](https://www.google.com/about/appsecurity/).
@ -264,7 +264,7 @@ For information about dynamically constructing forms in a safe way, see the
离线模板编译器阻止了一整套被称为“模板注入”的漏洞，并能显著增强应用程序的性能。尽量在产品发布时使用离线模板编译器， 离线模板编译器阻止了一整套被称为“模板注入”的漏洞，并能显著增强应用程序的性能。尽量在产品发布时使用离线模板编译器，
而不要动态生成模板（比如在代码中拼接字符串生成模板）。由于Angular会信任模板本身的代码，所以，动态生成的模板 —— 特别是包含用户数据的模板 —— 会绕过Angular自带的保护机制。 而不要动态生成模板（比如在代码中拼接字符串生成模板）。由于Angular会信任模板本身的代码，所以，动态生成的模板 —— 特别是包含用户数据的模板 —— 会绕过Angular自带的保护机制。
要了解如何用安全的方式动态创建表单，请参见[动态表单烹饪宝典](cookbook/dynamic-form)一章。 要了解如何用安全的方式动态创建表单，请参见[动态表单烹饪宝典](guide/dynamic-form)一章。
### Server-side XSS protection ### Server-side XSS protection

2
aio/content/guide/set-document-title.md
View File

@ -74,7 +74,7 @@ The [Title](api/platform-browser/Title) service is a simple class that provides
for getting and setting the current HTML document title: for getting and setting the current HTML document title:
幸运的是，Angular在*浏览器平台*的包中，提供了一个`Title`服务，弥补了这种差异。 幸运的是，Angular在*浏览器平台*的包中，提供了一个`Title`服务，弥补了这种差异。
[Title](api/platform/browser/Title-class)服务是一个简单的类，提供了一个API，用来获取和设置当前HTML文档的标题。 [Title](api/platform-browser/Title)服务是一个简单的类，提供了一个API，用来获取和设置当前HTML文档的标题。
* `getTitle() : string`&mdash;Gets the title of the current HTML document. * `getTitle() : string`&mdash;Gets the title of the current HTML document.

2
aio/content/guide/setup-systemjs-anatomy.md
View File

@ -447,7 +447,7 @@ If you do, this page can help you understand their purpose.
This file defines linting rules favored by the This file defines linting rules favored by the
[Angular style guide](guide/styleguide) and by the authors of the documentation. [Angular style guide](guide/styleguide) and by the authors of the documentation.
该文件定义了 [Angular 风格指南](guide/style-guide)与本文档站作者喜爱的语法检查规则。 该文件定义了 [Angular 风格指南](guide/styleguide)与本文档站作者喜爱的语法检查规则。
</td> </td>
</tr> </tr>

8
aio/content/guide/setup.md
View File

@ -325,7 +325,7 @@ The following are all in `src/`
Right now it declares only the `AppComponent`. Right now it declares only the `AppComponent`.
Soon there will be more components to declare. Soon there will be more components to declare.
定义`AppModule`，[根模块](guide/appmodule "AppModule: 根模块")为 Angular 描述如何组装应用。 定义`AppModule`，[根模块](guide/bootstrapping "AppModule: 根模块")为 Angular 描述如何组装应用。
目前，它只声明了`AppComponent`。 目前，它只声明了`AppComponent`。
不久，它将声明更多组件。 不久，它将声明更多组件。
</td> </td>
@ -348,7 +348,7 @@ The following are all in `src/`
it's the only viable choice for a sample running in a _live-coding_ environment like Plunker. it's the only viable choice for a sample running in a _live-coding_ environment like Plunker.
You'll learn about alternative compiling and [deployment](guide/deployment) options later in the documentation. You'll learn about alternative compiling and [deployment](guide/deployment) options later in the documentation.
使[即时 (JiT) 编译器](glossary#jit)用编译应用并且在浏览器中[启动](guide/appmodule#main "启动应用")并运行应用。 使[即时 (JiT) 编译器](guide/glossary#jit)用编译应用并且在浏览器中[启动](guide/bootstrapping#main "启动应用")并运行应用。
对于大多数项目的开发，这都是合理的选择。而且它是在像 Plunker 这样的*在线编程*环境中运行例子的唯一选择。 对于大多数项目的开发，这都是合理的选择。而且它是在像 Plunker 这样的*在线编程*环境中运行例子的唯一选择。
你将在本文档中学习其他编译和开发选择。 你将在本文档中学习其他编译和开发选择。
@ -370,7 +370,7 @@ The following are all in `src/`
If you're new to Angular, we recommend you follow the [tutorial](tutorial "Tour of Heroes tutorial"). If you're new to Angular, we recommend you follow the [tutorial](tutorial "Tour of Heroes tutorial").
如果你是 Angular 初学者，建议根据[学习路径](guide/learning-angular "Angular学习路径")学习。 如果你是 Angular 初学者，建议跟着[教程](tutorial "《英雄指南》教程")学习。
</div> </div>
@ -439,7 +439,7 @@ It creates the equivalent of `app.module.ts` and `main.ts` internally _for the p
so the reader can discover Angular without distraction. so the reader can discover Angular without distraction.
The other samples are based on the QuickStart seed. The other samples are based on the QuickStart seed.
[快速起步](quickstart "Angular 快速起步游乐场")仅仅展示了`AppComponent`文件。 [快速起步](guide/quickstart "Angular 快速起步游乐场")仅仅展示了`AppComponent`文件。
它在内部创建了只为*游乐场*而准备的等价`app.module.ts`和`main.ts`。 它在内部创建了只为*游乐场*而准备的等价`app.module.ts`和`main.ts`。
所以读者可以在零干扰的情况下探索 Angular。 所以读者可以在零干扰的情况下探索 Angular。
其他例子是基于 《快速起步》种子的。 其他例子是基于 《快速起步》种子的。

17
aio/content/guide/structural-directives.md
View File

@ -460,7 +460,7 @@ which `NgFor` has initialized with the hero for the current iteration.
* The [API guide](api/common/NgFor "API: NgFor") * The [API guide](api/common/NgFor "API: NgFor")
describes additional `NgFor` directive properties and context properties. describes additional `NgFor` directive properties and context properties.
[API参考手册](api/common/index/NgFor-directive "API: NgFor")中描述了`NgFor`指令的其它属性和上下文属性。 [API参考手册](api/common/NgFor "API: NgFor")中描述了`NgFor`指令的其它属性和上下文属性。
These microsyntax mechanisms are available to you when you write your own structural directives. These microsyntax mechanisms are available to you when you write your own structural directives.
Studying the Studying the
@ -561,6 +561,7 @@ The `NgSwitchDefault` displays its host element when no sibling `NgSwitchCase` m
*Design thought*: minimize initialization effort and consider caching state in a *Design thought*: minimize initialization effort and consider caching state in a
companion service. companion service.
*设计思路*：要最小化初始化的成本，并考虑把状态缓存在一个伴生的服务中。 *设计思路*：要最小化初始化的成本，并考虑把状态缓存在一个伴生的服务中。
@ -590,20 +591,6 @@ We toggle the second into and out of the DOM with `ngIf`.
我们将显示该组件的两个实例。我们使用CSS切换第一个实例的可见性，用`ngIf`把第二个实例添加到DOM和将其移除。 我们将显示该组件的两个实例。我们使用CSS切换第一个实例的可见性，用`ngIf`把第二个实例添加到DOM和将其移除。
<code-tabs>
<code-pane title="template (excerpt)" path="structural-directives/src/app/structural-directives.component.html" region="message-log">
</code-pane>
<code-pane title="heavy-loader.component.ts" path="structural-directives/src/app/heavy-loader.component.ts">
</code-pane>
</code-tabs>
That, in turn, can be desugared into the `<ng-template>` element form. That, in turn, can be desugared into the `<ng-template>` element form.

53
aio/content/guide/template-syntax.md
View File

@ -55,7 +55,12 @@ In the following sections, you'll learn how to get and set DOM (Document Object
可以通过组件和指令来扩展模板中的 HTML 词汇。它们看上去就是新元素和属性。接下来将学习如何通过数据绑定来动态获取/设置 DOM（文档对象模型）的值。 可以通过组件和指令来扩展模板中的 HTML 词汇。它们看上去就是新元素和属性。接下来将学习如何通过数据绑定来动态获取/设置 DOM（文档对象模型）的值。
Begin with the first form of data binding&mdash;interpolation&mdash;to see how much richer template HTML can be. Begin with the first form of data binding&mdash;interpolation&mdash;to see how much richer template HTML can be.
我们首先看看数据绑定的第一种形式 —— 插值表达式，它展示了模板的 HTML 可以有多丰富。<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a>
我们首先看看数据绑定的第一种形式 —— 插值表达式，它展示了模板的 HTML 可以有多丰富。
<a href="#top-of-page">back to top</a>
<a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -120,10 +125,10 @@ Though this is not exactly true. Interpolation is a special syntax that Angular
表面上看，我们在元素标签之间插入了结果和对标签的属性进行了赋值。 表面上看，我们在元素标签之间插入了结果和对标签的属性进行了赋值。
这样思考起来很方便，并且这个误解很少给我们带来麻烦。 这样思考起来很方便，并且这个误解很少给我们带来麻烦。
但严格来讲，这是不对的。插值表达式是一个特殊的语法，Angular 把它转换成了[属性绑定](guide/template-syntax#property-binding)，[后面](guide/template-syntax#property-binding-or-interpolation-)将会解释这一点。 但严格来讲，这是不对的。插值表达式是一个特殊的语法，Angular 把它转换成了[属性绑定](guide/template-syntax#property-binding)，[后面](guide/template-syntax#property-binding-or-interpolation)将会解释这一点。
But first, let's take a closer look at template expressions and statements. But first, let's take a closer look at template expressions and statements.
讲解属性绑定之前，先深入了解一下模板表达式和模板语句。<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a> 讲解属性绑定之前，先深入了解一下模板表达式和模板语句。<a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -238,7 +243,7 @@ the global namespace. They can't refer to `window` or `document`. They
can't call `console.log` or `Math.max`. They are restricted to referencing can't call `console.log` or `Math.max`. They are restricted to referencing
members of the expression context. members of the expression context.
模板表达式不能引用全局命名空间中的任何东西，比如`window`或`document`。它们也不能调用`console.log`或`Math.max`。 模板表达式不能引用全局命名空间中的任何东西，比如`window`或`document`。它们也不能调用`console.log`或`Math.max`。
它们只能引用表达式上下文中的成员。<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a> 它们只能引用表达式上下文中的成员。<a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
{@a no-side-effects} {@a no-side-effects}
@ -343,7 +348,7 @@ it returns the same object *reference* when called twice in a row.
在单独的一次事件循环中，被依赖的值不应该改变。 在单独的一次事件循环中，被依赖的值不应该改变。
如果幂等的表达式返回一个字符串或数字，连续调用它两次，也应该返回相同的字符串或数字。 如果幂等的表达式返回一个字符串或数字，连续调用它两次，也应该返回相同的字符串或数字。
如果幂等的表达式返回一个对象（包括`Date`或`Array`），连续调用它两次，也应该返回同一个对象的*引用*。 如果幂等的表达式返回一个对象（包括`Date`或`Array`），连续调用它两次，也应该返回同一个对象的*引用*。
<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a> <a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -467,7 +472,7 @@ A method call or simple property assignment should be the norm.
Now that you have a feel for template expressions and statements, Now that you have a feel for template expressions and statements,
you're ready to learn about the varieties of data binding syntax beyond interpolation. you're ready to learn about the varieties of data binding syntax beyond interpolation.
现在，对模板表达式和语句有了一点感觉了吧。 现在，对模板表达式和语句有了一点感觉了吧。
除插值表达式外，还有各种各样的数据绑定语法，是学习它们是时候了。<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a> 除插值表达式外，还有各种各样的数据绑定语法，是学习它们是时候了。<a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -1160,7 +1165,7 @@ The following table summarizes:
With this broad view in mind, you're ready to look at binding types in detail. With this broad view in mind, you're ready to look at binding types in detail.
放开眼界，我们来看看每种绑定类型的具体情况。 放开眼界，我们来看看每种绑定类型的具体情况。
<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a> <a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -1602,7 +1607,7 @@ attribute 绑定的主要用例之一是设置 ARIA attribute（译注：ARIA指
<code-example path="template-syntax/src/app/app.component.html" region="attrib-binding-aria" title="src/app/app.component.html" linenums="false"> <code-example path="template-syntax/src/app/app.component.html" region="attrib-binding-aria" title="src/app/app.component.html" linenums="false">
</code-example> </code-example>
<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a> <a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -1662,7 +1667,7 @@ the [NgClass directive](guide/template-syntax#ngClass) is usually preferred when
</div> </div>
<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a> <a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -1715,7 +1720,7 @@ Note that a _style property_ name can be written in either
</div> </div>
<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a> <a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -1868,7 +1873,7 @@ The directive creates an `EventEmitter` and exposes it as a property.
The directive calls `EventEmitter.emit(payload)` to fire an event, passing in a message payload, which can be anything. The directive calls `EventEmitter.emit(payload)` to fire an event, passing in a message payload, which can be anything.
Parent directives listen for the event by binding to this property and accessing the payload through the `$event` object. Parent directives listen for the event by binding to this property and accessing the payload through the `$event` object.
通常，指令使用 Angular [EventEmitter](api/core/index/EventEmitter-class) 来触发自定义事件。 通常，指令使用 Angular [EventEmitter](api/core/EventEmitter) 来触发自定义事件。
指令创建一个`EventEmitter`实例，并且把它作为属性暴露出来。 指令创建一个`EventEmitter`实例，并且把它作为属性暴露出来。
指令调用`EventEmitter.emit(payload)`来触发事件，可以传入任何东西作为消息载荷。 指令调用`EventEmitter.emit(payload)`来触发事件，可以传入任何东西作为消息载荷。
父指令通过绑定到这个属性来监听事件，并通过`$event`对象来访问载荷。 父指令通过绑定到这个属性来监听事件，并通过`$event`对象来访问载荷。
@ -1927,7 +1932,7 @@ Deleting the hero updates the model, perhaps triggering other changes
including queries and saves to a remote server. including queries and saves to a remote server.
These changes percolate through the system and are ultimately displayed in this and other views. These changes percolate through the system and are ultimately displayed in this and other views.
删除这个英雄会更新模型，还可能触发其它修改，包括向远端服务器的查询和保存。 删除这个英雄会更新模型，还可能触发其它修改，包括向远端服务器的查询和保存。
这些变更通过系统进行扩散，并最终显示到当前以及其它视图中。<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a> 这些变更通过系统进行扩散，并最终显示到当前以及其它视图中。<a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -2038,7 +2043,7 @@ However, no native HTML element follows the `x` value and `xChange` event patter
可惜，原生 HTML 元素不遵循`x`值和`xChange`事件的模式。 可惜，原生 HTML 元素不遵循`x`值和`xChange`事件的模式。
Fortunately, the Angular [_NgModel_](guide/template-syntax#ngModel) directive is a bridge that enables two-way binding to form elements. Fortunately, the Angular [_NgModel_](guide/template-syntax#ngModel) directive is a bridge that enables two-way binding to form elements.
幸运的是，Angular 以 [_NgModel_](guide/template-syntax#ngModel) 指令为桥梁，允许在表单元素上使用双向数据绑定。<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a> 幸运的是，Angular 以 [_NgModel_](guide/template-syntax#ngModel) 指令为桥梁，允许在表单元素上使用双向数据绑定。<a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -2116,7 +2121,7 @@ This section is an introduction to the most commonly used attribute directives:
* [`NgModel`](guide/template-syntax#ngModel) - two-way data binding to an HTML form element * [`NgModel`](guide/template-syntax#ngModel) - two-way data binding to an HTML form element
[`NgModel`](guide/template-syntax#ngModel) - 双向绑定到HTML表单元素 [`NgModel`](guide/template-syntax#ngModel) - 双向绑定到HTML表单元素
<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a> <a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -2177,7 +2182,7 @@ It's up to you to call `setCurrentClassess()`, both initially and when the depen
</div> </div>
<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a> <a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -2234,7 +2239,7 @@ It's up to you to call `setCurrentStyles()`, both initially and when the depende
</div> </div>
<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a> <a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -2318,7 +2323,7 @@ The `<input>` box is one of those elements.
Angular provides *value accessors* for all of the basic HTML form elements and the Angular provides *value accessors* for all of the basic HTML form elements and the
[_Forms_](guide/forms) guide shows how to bind to them. [_Forms_](guide/forms) guide shows how to bind to them.
各种元素都有很多特有的处理细节，因此`NgModel`指令只支持实现了[ControlValueAccessor](api/forms/index/ControlValueAccessor-interface)的元素， 各种元素都有很多特有的处理细节，因此`NgModel`指令只支持实现了[ControlValueAccessor](api/forms/ControlValueAccessor)的元素，
它们能让元素适配本协议。 它们能让元素适配本协议。
`<input>`输入框正是其中之一。 `<input>`输入框正是其中之一。
Angular为所有的基础HTML表单都提供了*值访问器（Value accessor）*，[*表单*](guide/forms)一章展示了如何绑定它们。 Angular为所有的基础HTML表单都提供了*值访问器（Value accessor）*，[*表单*](guide/forms)一章展示了如何绑定它们。
@ -2545,7 +2550,7 @@ described below.
</div> </div>
<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a> <a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -2827,7 +2832,7 @@ For example, you could replace the `<confused-hero>` switch case with the follow
<code-example path="template-syntax/src/app/app.component.html" region="NgSwitch-div" title="src/app/app.component.html" linenums="false"> <code-example path="template-syntax/src/app/app.component.html" region="NgSwitch-div" title="src/app/app.component.html" linenums="false">
</code-example> </code-example>
<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a> <a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -2906,7 +2911,7 @@ The `heroForm` is actually a reference to an Angular [NgForm](api/forms/NgForm "
directive with the ability to track the value and validity of every control in the form. directive with the ability to track the value and validity of every control in the form.
如果你没有导入过`FormsModule`，Angular就不会控制这个表单，那么它就是一个[HTMLFormElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement)实例。 如果你没有导入过`FormsModule`，Angular就不会控制这个表单，那么它就是一个[HTMLFormElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement)实例。
这里的`heroForm`实际上是一个Angular [NgForm](api/forms/index/NgForm-directive "API: NgForm") 指令的引用， 这里的`heroForm`实际上是一个Angular [NgForm](api/forms/NgForm "API: NgForm") 指令的引用，
因此具备了跟踪表单中的每个控件的值和有效性的能力。 因此具备了跟踪表单中的每个控件的值和有效性的能力。
The native `<form>` element doesn't have a `form` property. The native `<form>` element doesn't have a `form` property.
@ -2945,7 +2950,7 @@ This example declares the `fax` variable as `ref-fax` instead of `#fax`.
<code-example path="template-syntax/src/app/app.component.html" region="ref-fax" title="src/app/app.component.html" linenums="false"> <code-example path="template-syntax/src/app/app.component.html" region="ref-fax" title="src/app/app.component.html" linenums="false">
</code-example> </code-example>
<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a> <a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -3179,7 +3184,7 @@ the directive property name on the *left* and the public alias on the *right*:
</div> </div>
<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a> <a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -3260,7 +3265,7 @@ The generated output would look something like this
"rate": 325 } "rate": 325 }
</code-example> </code-example>
<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a> <a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<hr/> <hr/>
@ -3413,7 +3418,7 @@ Rather it tells the TypeScript type checker to suspend strict null checks for a
You'll need this template operator when you turn on strict null checks. It's optional otherwise. You'll need this template operator when you turn on strict null checks. It's optional otherwise.
<a href="#top-of-page">back to top</a><a href="#toc">回到顶部</a> <a href="#top-of-page">back to top</a><a href="#top-of-page">回到顶部</a>
<hr/> <hr/>

8
aio/content/guide/testing.md
View File

@ -361,7 +361,7 @@ The `karma.conf.js` tells karma to look for spec files there,
for reasons explained [below](guide/testing#q-spec-file-location). for reasons explained [below](guide/testing#q-spec-file-location).
**将测试程序spec放到`app/`文件夹下的任何位置。** **将测试程序spec放到`app/`文件夹下的任何位置。**
`karma.conf.js`告诉`Karma`在这个文件夹中寻找测试程序spec文件，原因在 [这里](guide/testing#spec-file-location) 有所解释。 `karma.conf.js`告诉`Karma`在这个文件夹中寻找测试程序spec文件，原因在 [这里](guide/testing#q-spec-file-location) 有所解释。
Add the following code to `src/app/1st.spec.ts`. Add the following code to `src/app/1st.spec.ts`.
@ -2115,8 +2115,6 @@ Here's the previous test, rewritten using this click helper.
## 在测试宿主组件中测试组件 ## 在测试宿主组件中测试组件
# 在测试宿主组件中测试组件
In the previous approach, the tests themselves played the role of the host `DashboardComponent`. In the previous approach, the tests themselves played the role of the host `DashboardComponent`.
But does the `DashboardHeroComponent` work correctly when properly data-bound to a host component? But does the `DashboardHeroComponent` work correctly when properly data-bound to a host component?
@ -2225,7 +2223,7 @@ Testing the actual `DashboardComponent` seemed daunting because it injects the `
It also injects the `HeroService`, but faking that is a [familiar story](guide/testing#component-with-async-service). It also injects the `HeroService`, but faking that is a [familiar story](guide/testing#component-with-async-service).
The `Router` has a complicated API and is entwined with other services and application preconditions. The `Router` has a complicated API and is entwined with other services and application preconditions.
它同时还注入了`HeroService`，但是我们已经知道如何[伪造](guide/testing#component-with-async-servic)它。 它同时还注入了`HeroService`，但是我们已经知道如何[伪造](guide/testing#component-with-async-service)它。
`Router`的API非常复杂，并且它缠绕了其它服务和许多应用的先决条件。 `Router`的API非常复杂，并且它缠绕了其它服务和许多应用的先决条件。
Fortunately, the `DashboardComponent` isn't doing much with the `Router` Fortunately, the `DashboardComponent` isn't doing much with the `Router`
@ -2966,7 +2964,7 @@ as seen in the following setup variation:
Notice that `TestBed.configureTestingModule` no longer provides a (fake) `HeroService` because it's [not needed](guide/testing#spy-stub). Notice that `TestBed.configureTestingModule` no longer provides a (fake) `HeroService` because it's [not needed](guide/testing#spy-stub).
注意，`TestBed.configureTestingModule`不再提供（伪造）`HeroService`，因为已经[没有必要了](guide/testing#stub-hero-detail-service)。 注意，`TestBed.configureTestingModule`不再提供（伪造）`HeroService`，因为已经[没有必要了](guide/testing#spy-stub)。
{@a override-component-method} {@a override-component-method}

10
aio/content/guide/ts-to-js.md
View File

@ -109,7 +109,7 @@ In _ES5_, you access the Angular entities of the [the Angular packages](guide/gl
through the global `ng` object. through the global `ng` object.
Anything you can import from `@angular` is a nested member of this `ng` object: Anything you can import from `@angular` is a nested member of this `ng` object:
在 _ES5_ 中，通过全局`ng`对象访问 [Angular 包](glossary#scoped-package)中的 Angular 实体。 在 _ES5_ 中，通过全局`ng`对象访问 [Angular 包](guide/glossary#scoped-package)中的 Angular 实体。
凡是可以从`@angular`导入的，都是该`ng`对象的嵌套成员。 凡是可以从`@angular`导入的，都是该`ng`对象的嵌套成员。
@ -793,8 +793,8 @@ The [`@HostListener`](api/core/HostListener) decorator binds
host element events to component event handlers. host element events to component event handlers.
在 _TypeScript_ 和 _带装饰器的 ES6_ 中，可以使用宿主属性装饰器把宿主元素绑定到组件或指令。 在 _TypeScript_ 和 _带装饰器的 ES6_ 中，可以使用宿主属性装饰器把宿主元素绑定到组件或指令。
[`@HostBinding`](api/core/index/HostBinding-interface)装饰器把宿主元素属性绑定到组件数据属性。 [`@HostBinding`](api/core/HostBinding)装饰器把宿主元素属性绑定到组件数据属性。
[`@HostListener`](api/core/index/HostListener-interface)装饰器把宿主元素事件绑定到组件事件处理器。 [`@HostListener`](api/core/HostListener)装饰器把宿主元素事件绑定到组件事件处理器。
In _plain ES6_ or _ES5_, add a `host` attribute to the component metadata to achieve the In _plain ES6_ or _ES5_, add a `host` attribute to the component metadata to achieve the
same effect as `@HostBinding` and `@HostListener`. same effect as `@HostBinding` and `@HostListener`.
@ -883,8 +883,8 @@ The [`@ViewChild`](api/core/ViewChild) and
allow a component to query instances of other components that are used in allow a component to query instances of other components that are used in
its view. its view.
[`@ViewChild`](api/core/index/ViewChild-decorator) 和 [`@ViewChild`](api/core/ViewChild) 和
[`@ViewChildren`](api/core/index/ViewChildren-decorator) [`@ViewChildren`](api/core/ViewChildren)
属性装饰器允许组件查询位于其视图中的其它组件的实例。 属性装饰器允许组件查询位于其视图中的其它组件的实例。
In _ES5_ and _ES6_, you access a component's view children by adding a `queries` property to the component metadata. In _ES5_ and _ES6_, you access a component's view children by adding a `queries` property to the component metadata.

10
aio/content/guide/upgrade.md
View File

@ -544,7 +544,7 @@ change detection. The code itself doesn't have to call `scope.$apply()`
or anything like it. or anything like it.
在Angular中，事情有点不一样。虽然变更检测仍然会在每一个事件之后发生，却不再需要每次调用`scope.$apply()`了。 在Angular中，事情有点不一样。虽然变更检测仍然会在每一个事件之后发生，却不再需要每次调用`scope.$apply()`了。
这是因为所有Angular代码都运行在一个叫做[Angular zone](api/core/index/NgZone-class)的地方。 这是因为所有Angular代码都运行在一个叫做[Angular zone](api/core/NgZone)的地方。
Angular总是知道什么时候代码执行完了，也就知道了它什么时候应该触发变更检测。代码本身并不需要调用`scope.$apply()`或其它类似的东西。 Angular总是知道什么时候代码执行完了，也就知道了它什么时候应该触发变更检测。代码本身并不需要调用`scope.$apply()`或其它类似的东西。
In the case of hybrid applications, the `UpgradeModule` bridges the In the case of hybrid applications, the `UpgradeModule` bridges the
@ -588,7 +588,7 @@ are set. You can also hook into the changes by implementing the
just like you could if it hadn't been downgraded. just like you could if it hadn't been downgraded.
当我们降级一个Angular组件，然后把它用于AngularJS中时，组件的输入属性就会被AngularJS的变更检测体系监视起来。 当我们降级一个Angular组件，然后把它用于AngularJS中时，组件的输入属性就会被AngularJS的变更检测体系监视起来。
当那些输入属性发生变化时，组件中相应的属性就会被设置。我们也能通过实现[OnChanges](api/core/index/OnChanges-interface) 当那些输入属性发生变化时，组件中相应的属性就会被设置。我们也能通过实现[OnChanges](api/core/OnChanges)
接口来挂钩到这些更改，就像它未被降级时一样。 接口来挂钩到这些更改，就像它未被降级时一样。
Correspondingly, when you upgrade an AngularJS component and use it from Angular, Correspondingly, when you upgrade an AngularJS component and use it from Angular,
@ -1300,7 +1300,7 @@ The setup for an hybrid app is mostly the same as described in
save for differences in `index.html` and `main-aot.ts` save for differences in `index.html` and `main-aot.ts`
我们也可以其它Angular应用一样在混合式应用中发挥AOT编译的优势。 我们也可以其它Angular应用一样在混合式应用中发挥AOT编译的优势。
对混合式应用的设置过程和[预编译](cookbook/aot-compiler)章节中所讲的几乎完全一样，不同点在于`index.html`和`main-aot.ts`中。 对混合式应用的设置过程和[预编译](guide/aot-compiler)章节中所讲的几乎完全一样，不同点在于`index.html`和`main-aot.ts`中。
The `index.html` will likely have script tags loading AngularJS files, so the `index.html` The `index.html` will likely have script tags loading AngularJS files, so the `index.html`
for AOT must also load those files. for AOT must also load those files.
@ -1488,7 +1488,7 @@ which is an important [preparation step](guide/upgrade#follow-the-angular-styleg
a successful upgrade. a successful upgrade.
这确实是一个很好地起点。特别是，该结构遵循了[AngularJS 风格指南](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md)， 这确实是一个很好地起点。特别是，该结构遵循了[AngularJS 风格指南](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md)，
要想成功升级，这是一个很重要的[准备步骤](guide/upgrade#following-the-angular-style-guide)。 要想成功升级，这是一个很重要的[准备步骤](guide/upgrade#follow-the-angular-styleguide)。
* Each component, service, and filter is in its own source file, as per the * Each component, service, and filter is in its own source file, as per the
[Rule of 1](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility). [Rule of 1](https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#single-responsibility).
@ -1741,7 +1741,7 @@ By the time you're done, you'll be able to remove AngularJS from the project
completely, but the key is to do this piece by piece without breaking the application. completely, but the key is to do this piece by piece without breaking the application.
我们已经完成了准备工作，接下来就开始把PhoneCat升级到Angular。 我们已经完成了准备工作，接下来就开始把PhoneCat升级到Angular。
我们将在Angular[升级模块](guide/upgrade#upgrading-with-the-upgrade-adapter)的帮助下增量式的完成此项工作。 我们将在Angular[升级模块](guide/upgrade#upgrading-with-ngupgrade)的帮助下增量式的完成此项工作。
等我们完成的那一刻，就能把AngularJS从项目中完全移除了，但其中的关键是在不破坏此程序的前提下一小块一小块的完成它。 等我们完成的那一刻，就能把AngularJS从项目中完全移除了，但其中的关键是在不破坏此程序的前提下一小块一小块的完成它。

6
aio/content/guide/webpack.md
View File

@ -541,7 +541,7 @@ and exports several objects as properties of a `module.exports` object.
* [`resolve`](guide/webpack#common-resolves)&mdash;how to resolve file names when they lack extensions. * [`resolve`](guide/webpack#common-resolves)&mdash;how to resolve file names when they lack extensions.
[`resolve`](guide/webpack#common-resolve) - 省略扩展名时如何解释文件名。 [`resolve`](guide/webpack#common-resolves) - 省略扩展名时如何解释文件名。
* [`module.rules`](guide/webpack#common-rules)&mdash; `module` is an object with `rules` for deciding how files are loaded. * [`module.rules`](guide/webpack#common-rules)&mdash; `module` is an object with `rules` for deciding how files are loaded.
[`module.rules`](guide/webpack#common-rules) - `module`是一个对象，里面的`rules`属性用来决定文件如何加载。 [`module.rules`](guide/webpack#common-rules) - `module`是一个对象，里面的`rules`属性用来决定文件如何加载。
@ -1071,8 +1071,8 @@ Create a folder called `images` under the project's `assets` folder, then right-
on the image and download it to that folder. on the image and download it to that folder.
<code>app.component.html</code>显示了这个可下载的Angular Logo <code>app.component.html</code>显示了这个可下载的Angular Logo
<a href="assets/images/logos/angular2/angular.png" target="_blank"> <a href="assets/images/logos/angular/angular.png" target="_blank">
<img src="assets/images/logos/angular2/angular.png" height="40px" title="download Angular logo"></a>。 <img src="assets/images/logos/angular/angular.png" height="40px" title="download Angular logo"></a>。
在项目的`assets`目录下创建一个名叫`images`的文件夹，然后右键点击（Mac上是Cmd+点击）本图片，并把它下载到`images`文件夹中。 在项目的`assets`目录下创建一个名叫`images`的文件夹，然后右键点击（Mac上是Cmd+点击）本图片，并把它下载到`images`文件夹中。

10
aio/content/tutorial/toh-pt3.md
View File

@ -126,7 +126,7 @@ This file will hold the new `HeroDetailComponent`.
The file and component names follow the standard described in the Angular The file and component names follow the standard described in the Angular
[style guide](guide/styleguide#naming). [style guide](guide/styleguide#naming).
文件名和组件名遵循[风格指南](guide/style-guide#naming)中的标准方式。 文件名和组件名遵循[风格指南](guide/styleguide#naming)中的标准方式。
* The component _class_ name should be written in _upper camel case_ and end in the word "Component". * The component _class_ name should be written in _upper camel case_ and end in the word "Component".
The hero detail component class is `HeroDetailComponent`. The hero detail component class is `HeroDetailComponent`.
@ -225,7 +225,7 @@ The Angular [style guide](guide/styleguide#rule-of-one "Style guide: rule of one
`hero`属性的类型是`Hero`。 `hero`属性的类型是`Hero`。
`Hero`类仍然在`app.component.ts`文件中。 `Hero`类仍然在`app.component.ts`文件中。
现在，有两个组件需要`Hero`类的引用。 现在，有两个组件需要`Hero`类的引用。
而Angular[风格指南](guide/style-guide#rule-of-one "Style guide: rule of one")建议每个文件中只有一个类。 而Angular[风格指南](guide/styleguide#rule-of-one "Style guide: rule of one")建议每个文件中只有一个类。
Move the `Hero` class from `app.component.ts` to its own `hero.ts` file. Move the `Hero` class from `app.component.ts` to its own `hero.ts` file.
@ -639,4 +639,8 @@ Data access should be refactored to a separate service
and shared among the components that need data. and shared among the components that need data.
通过抽取共享组件，我们的《英雄指南》变得更有复用性了，但在`AppComponent`中，我们仍然使用着硬编码的模拟数据。显然，这种方式不能“可持续发展”。 通过抽取共享组件，我们的《英雄指南》变得更有复用性了，但在`AppComponent`中，我们仍然使用着硬编码的模拟数据。显然，这种方式不能“可持续发展”。
我们要把数据访问逻辑重构到一个独立的服务中，并在需要数据的组件之间共享。You’ll learn to create services in the [next tutorial](tutorial/toh-pt4"Services") page.在[下一步](tutorial/toh-pt4)，我们将学习如何创建服务。 我们要把数据访问逻辑重构到一个独立的服务中，并在需要数据的组件之间共享。
You’ll learn to create services in the [next tutorial](tutorial/toh-pt4 "Services") page.
在[下一步](tutorial/toh-pt4)，我们将学习如何创建服务。

4
aio/content/tutorial/toh-pt5.md
View File

@ -452,7 +452,7 @@ at the top of the `<head>` section.
For more information, see the [Set the base href](guide/router) For more information, see the [Set the base href](guide/router)
section of the [Routing and Navigation](guide/router) page. section of the [Routing and Navigation](guide/router) page.
要了解更多信息，请参见[路由与导航](guide/router)章的[设置基地址（base href）](guide/router#!)部分。 要了解更多信息，请参见[路由与导航](guide/router)章的[设置基地址（base href）](guide/router)部分。
@ -1200,7 +1200,7 @@ Read more on the [CanDeactivate](api/router/CanDeactivate) page.
回退太多步会跑出我们的应用。 回退太多步会跑出我们的应用。
在真实的应用中，我们需要使用<em>CanDeactivate</em>守卫对此进行防范。 在真实的应用中，我们需要使用<em>CanDeactivate</em>守卫对此进行防范。
要了解更多，参见[CanDeactivate](api/router/index/CanDeactivate-interface)。 要了解更多，参见[CanDeactivate](api/router/CanDeactivate)。
</div> </div>

4
aio/tools/transforms/angular-base-package/post-processors/h1-checker.js vendored
View File

@ -21,8 +21,8 @@ module.exports = function h1CheckerPostProcessor() {
}); });
file.title = file.headings.h1[0]; file.title = file.headings.h1[0];
if (file.headings.h1.length > 1) { if (file.headings.h1.length > 2) {
file.fail(`More than one h1 found in ${file}`); file.fail(`More than two h1 found in ${file}`);
} }
}; };
}; };

3
aio/tools/transforms/angular-base-package/post-processors/h1-checker.spec.js
View File

@ -14,11 +14,12 @@ describe('h1Checker postprocessor', () => {
processor.plugins = [plugin]; processor.plugins = [plugin];
}); });
it('should complain if there is more than one h1 in a document', () => { it('should complain if there is more than two h1 in a document', () => {
const doc = { const doc = {
docType: 'a', docType: 'a',
renderedContent: ` renderedContent: `
<h1>Heading 1</h2> <h1>Heading 1</h2>
<h1>标题1</h2>
<h2>Heading 2</h2> <h2>Heading 2</h2>
<h1>Heading 1a</h1> <h1>Heading 1a</h1>
` `