honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 合并第二版的翻译

This commit is contained in:
Zhicheng Wang 2018-03-07 14:35:57 +08:00
parent ba33ee016a
commit fc58e0eee0
33 changed files with 1072 additions and 319 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
aio/content/guide/api-page-class.md
View File

@ -128,7 +128,7 @@
Description Description
描述 说明
</th> </th>
@ -311,7 +311,7 @@
</span><span class="pun">}[],</span><span class="pln"> duration</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> delay</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> easing</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">,</span><span class="pln"> previousPlayers</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">[])</span></code> </span><span class="pun">}[],</span><span class="pln"> duration</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> delay</span><span class="pun">:</span><span class="pln"> number</span><span class="pun">,</span><span class="pln"> easing</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">string</span><span class="pun">,</span><span class="pln"> previousPlayers</span><span class="pun">:</span><span class="pln"> any</span><span class="pun">[])</span></code>
</pre></aio-code></code-example> </pre></aio-code></code-example>
</td> </td>
<td> <td>

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

@ -57,7 +57,7 @@ NgModules are a big deal.
This page introduces modules; the [NgModules](guide/ngmodules) pages This page introduces modules; the [NgModules](guide/ngmodules) pages
relating to NgModules covers them in detail. relating to NgModules covers them in detail.
_Angular 模块_很重要。这里只是简单介绍，在 [Angular 模块](guide/ngmodule)中会做深入讲解。 NgModules 很重要。这里只是简单介绍，在 [NgModules](guide/ngmodule)中会做深入讲解。
<br class="clear"> <br class="clear">
@ -229,7 +229,7 @@ Hang in there. The confusion yields to clarity with time and experience.
Learn more from the [NgModules](guide/ngmodules) page. Learn more from the [NgModules](guide/ngmodules) page.
更多信息，见 [Angular 模块](guide/ngmodule)。 更多信息，参见 [NgModules](guide/ngmodule)。
</div> </div>

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

@ -1,5 +1,7 @@
# Bootstrapping # Bootstrapping
# 启动过程
#### Prerequisites #### Prerequisites
A basic understanding of the following: A basic understanding of the following:
@ -152,6 +154,8 @@ the class was imported from another module.
You don't have any services to provide yet. You don't have any services to provide yet.
But you will create some before long and you may chose to provide many of them here. But you will create some before long and you may chose to provide many of them here.
我们还没有提供任何服务，但是很快就会创建一些，而且可能也会选择在这里提供它们。
{@a bootstrap-array} {@a bootstrap-array}
## The `providers` array ## The `providers` array
@ -172,6 +176,9 @@ Each bootstrapped component is the base of its own tree of components.
Inserting a bootstrapped component usually triggers a cascade of Inserting a bootstrapped component usually triggers a cascade of
component creations that fill out that tree. component creations that fill out that tree.
每个被引导的组件都是它自己的组件树的根。
插入一个被引导的组件通常触发一系列组件的创建并形成组件树。
While you can put more than one component tree on a host web page, While you can put more than one component tree on a host web page,
most applications have only one component tree and bootstrap a single root component. most applications have only one component tree and bootstrap a single root component.
@ -180,5 +187,7 @@ root module's `bootstrap` array.
## More about Angular Modules ## More about Angular Modules
## 关于Angular模块的更多知识
For more on NgModules you're likely to see frequently in apps, For more on NgModules you're likely to see frequently in apps,
see [Frequently Used Modules](#). see [Frequently Used Modules](#).

4
aio/content/guide/browser-support.md
View File

@ -414,9 +414,11 @@ Here are the features which may require additional polyfills:
[JIT compilation](guide/aot-compiler). [JIT compilation](guide/aot-compiler).
[JIT 编译](guide/aot-compiler)
Required to reflect for metadata. Required to reflect for metadata.
[JIT 编译](guide/aot-compiler) 需要 reflect 来提供元数据。 需要 reflect 来提供元数据。
</td> </td>

435
aio/content/guide/cheatsheet.md
View File

@ -1,5 +1,7 @@
<h1 class="no-toc">Cheat Sheet</h1> <h1 class="no-toc">Cheat Sheet</h1>
<h1 class="no-toc">速查表</h1>
<div id="cheatsheet"> <div id="cheatsheet">
<table class="is-full-width is-fixed-layout"> <table class="is-full-width is-fixed-layout">
@ -11,7 +13,9 @@
</th> </th>
<th><p><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';</code> <th>
<p><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';</code>
</p> </p>
@ -27,7 +31,11 @@
</td> </td>
<td><p>Bootstraps the app, using the root component from the specified <code>NgModule</code>. </p> <td>
<p>Bootstraps the app, using the root component from the specified <code>NgModule</code>. </p>
<p>用 <code>NgModule</code> 中指定的根组件进行启动。</p>
</td> </td>
@ -44,7 +52,9 @@
</th> </th>
<th><p><code>import { NgModule } from '@angular/core';</code> <th>
<p><code>import { NgModule } from '@angular/core';</code>
</p> </p>
@ -60,7 +70,11 @@
</td> </td>
<td><p>Defines a module that contains components, directives, pipes, and providers.</p> <td>
<p>Defines a module that contains components, directives, pipes, and providers.</p>
<p>定义一个模块，其中可以包含组件、指令、管道和服务提供商。</p>
</td> </td>
@ -72,7 +86,11 @@
</td> </td>
<td><p>List of components, directives, and pipes that belong to this module.</p> <td>
<p>List of components, directives, and pipes that belong to this module.</p>
<p>属于当前模块的组件、指令和管道的列表。</p>
</td> </td>
@ -84,9 +102,13 @@
</td> </td>
<td><p>List of modules to import into this module. Everything from the imported modules <td>
<p>List of modules to import into this module. Everything from the imported modules
is available to <code>declarations</code> of this module.</p> is available to <code>declarations</code> of this module.</p>
<p>本模块所导入的模块列表</p>
</td> </td>
</tr><tr> </tr><tr>
@ -97,7 +119,11 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>List of components, directives, and pipes visible to modules that import this module.</p> <td>
<p>List of components, directives, and pipes visible to modules that import this module.</p>
<p>那些导入了本模块的模块所能看到的组件、指令和管道的列表</p>
</td> </td>
@ -109,7 +135,11 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>List of dependency injection providers visible both to the contents of this module and to importers of this module.</p> <td>
<p>List of dependency injection providers visible both to the contents of this module and to importers of this module.</p>
<p>依赖注入提供商的列表，本模块以及本模块导入的所有模块中的内容都可以看见它们。</p>
</td> </td>
@ -121,7 +151,11 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>List of components to bootstrap when this module is bootstrapped.</p> <td>
<p>List of components to bootstrap when this module is bootstrapped.</p>
<p>当本模块启动时，随之启动的组件列表。</p>
</td> </td>
@ -154,7 +188,11 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>Binds property <code>value</code> to the result of expression <code>firstName</code>.</p> <td>
<p>Binds property <code>value</code> to the result of expression <code>firstName</code>.</p>
<p>把<code>value</code>属性绑定到表达式<code>firstName</code></p>
</td> </td>
@ -166,7 +204,11 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>Binds attribute <code>role</code> to the result of expression <code>myAriaRole</code>.</p> <td>
<p>Binds attribute <code>role</code> to the result of expression <code>myAriaRole</code>.</p>
<p>把属性（Attribute）<code>role</code>绑定到表达式<code>myAriaRole</code>的结果。</p>
</td> </td>
@ -178,7 +220,11 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>Binds the presence of the CSS class <code>extra-sparkle</code> on the element to the truthiness of the expression <code>isDelightful</code>.</p> <td>
<p>Binds the presence of the CSS class <code>extra-sparkle</code> on the element to the truthiness of the expression <code>isDelightful</code>.</p>
<p>根据<code>isDelightful</code>表达式的结果是否为真，决定CSS类<code>extra-sparkle</code>是否出现在当前元素上。</p>
</td> </td>
@ -190,7 +236,11 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>Binds style property <code>width</code> to the result of expression <code>mySize</code> in pixels. Units are optional.</p> <td>
<p>Binds style property <code>width</code> to the result of expression <code>mySize</code> in pixels. Units are optional.</p>
<p>把CSS样式属性<code>width</code>的px（像素）值绑定到表达式<code>mySize</code>的结果。单位是可选的。</p>
</td> </td>
@ -202,7 +252,11 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>Calls method <code>readRainbow</code> when a click event is triggered on this button element (or its children) and passes in the event object.</p> <td>
<p>Calls method <code>readRainbow</code> when a click event is triggered on this button element (or its children) and passes in the event object.</p>
<p>当这个按钮元素（及其子元素）上的click事件触发时，调用方法<code>readRainbow</code>，并把这个事件对象作为参数传进去。</p>
</td> </td>
@ -214,9 +268,13 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>Binds a property to an interpolated string, for example, "Hello Seabiscuit". Equivalent to: <td>
<p>Binds a property to an interpolated string, for example, "Hello Seabiscuit". Equivalent to:
<code>&lt;div [title]="'Hello ' + ponyName"&gt;</code></p> <code>&lt;div [title]="'Hello ' + ponyName"&gt;</code></p>
<p>把一个属性绑定到插值字符串（如"Hello Seabiscuit"）。这种写法等价于<code>&lt;div [title]="'Hello ' + ponyName"&gt;</code></p>
</td> </td>
</tr><tr> </tr><tr>
@ -227,7 +285,11 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>Binds text content to an interpolated string, for example, "Hello Seabiscuit".</p> <td>
<p>Binds text content to an interpolated string, for example, "Hello Seabiscuit".</p>
<p>把文本内容绑定到插值字符串（如"Hello Seabiscuit"）</p>
</td> </td>
@ -239,7 +301,11 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>Sets up two-way data binding. Equivalent to: <code>&lt;my-cmp [title]="name" (titleChange)="name=$event"&gt;</code></p> <td>
<p>Sets up two-way data binding. Equivalent to: <code>&lt;my-cmp [title]="name" (titleChange)="name=$event"&gt;</code></p>
<p>设置双向绑定。等价于<code>&lt;my-cmp [title]="name" (titleChange)="name=$event"&gt;</code>。</p>
</td> </td>
@ -251,7 +317,11 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>Creates a local variable <code>movieplayer</code> that provides access to the <code>video</code> element instance in data-binding and event-binding expressions in the current template.</p> <td>
<p>Creates a local variable <code>movieplayer</code> that provides access to the <code>video</code> element instance in data-binding and event-binding expressions in the current template.</p>
<p>创建一个局部变量<code>movieplayer</code>，支持在当前模板的数据绑定和事件绑定表达式中访问<code>video</code>元素的实例。</p>
</td> </td>
@ -263,7 +333,9 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>The <code>*</code> symbol turns the current element into an embedded template. Equivalent to: <td>
<p>The <code>*</code> symbol turns the current element into an embedded template. Equivalent to:
<code>&lt;ng-template [myUnless]="myExpression"&gt;&lt;p&gt;...&lt;/p&gt;&lt;/ng-template&gt;</code></p> <code>&lt;ng-template [myUnless]="myExpression"&gt;&lt;p&gt;...&lt;/p&gt;&lt;/ng-template&gt;</code></p>
</td> </td>
@ -276,7 +348,11 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>Transforms the current value of expression <code>cardNumber</code> via the pipe called <code>myCardNumberFormatter</code>.</p> <td>
<p>Transforms the current value of expression <code>cardNumber</code> via the pipe called <code>myCardNumberFormatter</code>.</p>
<p>使用名叫<code>myCardNumberFormatter</code>的管道对表达式<code>cardNumber</code>的当前值进行变幻</p>
</td> </td>
@ -288,7 +364,11 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>The safe navigation operator (<code>?</code>) means that the <code>employer</code> field is optional and if <code>undefined</code>, the rest of the expression should be ignored.</p> <td>
<p>The safe navigation operator (<code>?</code>) means that the <code>employer</code> field is optional and if <code>undefined</code>, the rest of the expression should be ignored.</p>
<p>安全导航操作符（<code>?</code>）表示<code>employer</code>字段是可选的，如果它是 <code>undefined</code> ，那么表达式其余的部分就会被忽略，并返回 <code>undefined</code>。</p>
</td> </td>
@ -300,7 +380,11 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>An SVG snippet template needs an <code>svg:</code> prefix on its root element to disambiguate the SVG element from an HTML component.</p> <td>
<p>An SVG snippet template needs an <code>svg:</code> prefix on its root element to disambiguate the SVG element from an HTML component.</p>
<p>模板中的 SVG 片段需要给它的根元素加上<code>svg:</code>前缀，以便把 SVG 元素和 HTML 元素区分开。</p>
</td> </td>
@ -312,7 +396,11 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>An <code>&lt;svg&gt;</code> root element is detected as an SVG element automatically, without the prefix.</p> <td>
<p>An <code>&lt;svg&gt;</code> root element is detected as an SVG element automatically, without the prefix.</p>
<p>以<code>&lt;svg&gt;</code>作为根元素时会自动识别为 SVG 元素，不需要前缀。</p>
</td> </td>
@ -329,7 +417,9 @@ is available to <code>declarations</code> of this module.</p>
</th> </th>
<th><p><code>import { CommonModule } from '@angular/common';</code> <th>
<p><code>import { CommonModule } from '@angular/common';</code>
</p> </p>
@ -345,7 +435,11 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>Removes or recreates a portion of the DOM tree based on the <code>showSection</code> expression.</p> <td>
<p>Removes or recreates a portion of the DOM tree based on the <code>showSection</code> expression.</p>
<p>根据<code>showSection</code>表达式的结果，移除或重新创建 DOM 树的一部分。</p>
</td> </td>
@ -357,7 +451,11 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.</p> <td>
<p>Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list.</p>
<p>把li元素及其内容变成一个模板，并使用这个模板为列表中的每一个条目实例化一个视图。</p>
</td> </td>
@ -369,7 +467,11 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of <code>conditionExpression</code>.</p> <td>
<p>Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of <code>conditionExpression</code>.</p>
<p>根据<code>conditionExpression</code>的当前值选择一个嵌入式模板，并用它替换这个 div 的内容。</p>
</td> </td>
@ -381,7 +483,11 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>Binds the presence of CSS classes on the element to the truthiness of the associated map values. The right-hand expression should return {class-name: true/false} map.</p> <td>
<p>Binds the presence of CSS classes on the element to the truthiness of the associated map values. The right-hand expression should return {class-name: true/false} map.</p>
<p>根据 map 中的 value 是否为真，来决定该元素上是否出现与 name 对应的 CSS 类。右侧的表达式应该返回一个形如 <code>{class-name: true/false}</code> 的 map。</p>
</td> </td>
@ -395,7 +501,9 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>Allows you to assign styles to an HTML element using CSS. You can use CSS directly, as in the first example, or you can call a method from the component.</p> <td>
<p>Allows you to assign styles to an HTML element using CSS. You can use CSS directly, as in the first example, or you can call a method from the component.</p>
</td> </td>
@ -412,7 +520,9 @@ is available to <code>declarations</code> of this module.</p>
</th> </th>
<th><p><code>import { FormsModule } from '@angular/forms';</code> <th>
<p><code>import { FormsModule } from '@angular/forms';</code>
</p> </p>
@ -428,7 +538,11 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>Provides two-way data-binding, parsing, and validation for form controls.</p> <td>
<p>Provides two-way data-binding, parsing, and validation for form controls.</p>
<p>为表单控件提供双向数据绑定、解析和验证功能。</p>
</td> </td>
@ -445,7 +559,9 @@ is available to <code>declarations</code> of this module.</p>
</th> </th>
<th><p><code>import { Directive, ... } from '@angular/core';</code> <th>
<p><code>import { Directive, ... } from '@angular/core';</code>
</p> </p>
@ -461,7 +577,11 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>Declares that a class is a component and provides metadata about the component.</p> <td>
<p>Declares that a class is a component and provides metadata about the component.</p>
<p>声明一个类是组件，并提供该组件的元数据。</p>
</td> </td>
@ -473,7 +593,11 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>Declares that a class is a directive and provides metadata about the directive.</p> <td>
<p>Declares that a class is a directive and provides metadata about the directive.</p>
<p>声明一个类是指令，并提供该指令的元数据。</p>
</td> </td>
@ -485,7 +609,11 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>Declares that a class is a pipe and provides metadata about the pipe.</p> <td>
<p>Declares that a class is a pipe and provides metadata about the pipe.</p>
<p>声明一个类是管道，并提供该管道的元数据。</p>
</td> </td>
@ -497,7 +625,9 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class. <td>
<p>Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.
</p> </p>
@ -516,7 +646,9 @@ is available to <code>declarations</code> of this module.</p>
</th> </th>
<th><p><code>@Directive({ property1: value1, ... })</code> <th>
<p><code>@Directive({ property1: value1, ... })</code>
</p> </p>
@ -532,11 +664,17 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>Specifies a CSS selector that identifies this directive within a template. Supported selectors include <code>element</code>, <td>
<p>Specifies a CSS selector that identifies this directive within a template. Supported selectors include <code>element</code>,
<code>[attribute]</code>, <code>.class</code>, and <code>:not()</code>.</p> <code>[attribute]</code>, <code>.class</code>, and <code>:not()</code>.</p>
<p>指定一个 CSS 选择器，用于在模板中标记出该指令。支持的选择器类型包括：<code>元素名</code>、<code>[属性名]</code>, <code>.类名</code> 和 <code>:not()</code>。</p>
<p>Does not support parent-child relationship selectors.</p> <p>Does not support parent-child relationship selectors.</p>
<p>但不支持指定父子关系的选择器。</p>
</td> </td>
</tr><tr> </tr><tr>
@ -547,7 +685,11 @@ is available to <code>declarations</code> of this module.</p>
</td> </td>
<td><p>List of dependency injection providers for this directive and its children.</p> <td>
<p>List of dependency injection providers for this directive and its children.</p>
<p>该指令及其子指令的依赖注入提供商列表。</p>
</td> </td>
@ -564,7 +706,10 @@ is available to <code>declarations</code> of this module.</p>
</th> </th>
<th><p> <th>
<p>
<code>@Component</code> extends <code>@Directive</code>, <code>@Component</code> extends <code>@Directive</code>,
so the <code>@Directive</code> configuration applies to components as well</p> so the <code>@Directive</code> configuration applies to components as well</p>
@ -580,7 +725,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>If set, the <code>templateUrl</code> and <code>styleUrl</code> are resolved relative to the component.</p> <td>
<p>If set, the <code>templateUrl</code> and <code>styleUrl</code> are resolved relative to the component.</p>
<p>如果设置了，那么 <code>templateUrl</code> 和 <code>styleUrl</code> 的路径就会相对于当前组件进行解析。</p>
</td> </td>
@ -592,7 +741,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>List of dependency injection providers scoped to this component's view.</p> <td>
<p>List of dependency injection providers scoped to this component's view.</p>
<p>依赖注入提供商列表，但它们的范围被限定为当前组件的视图。</p>
</td> </td>
@ -604,7 +757,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>Inline template or external template URL of the component's view.</p> <td>
<p>Inline template or external template URL of the component's view.</p>
<p>当前组件视图的内联模板或外部模板的 URL 。</p>
</td> </td>
@ -616,7 +773,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>List of inline CSS styles or external stylesheet URLs for styling the component’s view.</p> <td>
<p>List of inline CSS styles or external stylesheet URLs for styling the component’s view.</p>
<p>用于为当前组件的视图提供样式的内联 CSS 或外部样式表 URL 的列表。</p>
</td> </td>
@ -633,7 +794,9 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</th> </th>
<th><p><code>import { Input, ... } from '@angular/core';</code> <th>
<p><code>import { Input, ... } from '@angular/core';</code>
</p> </p>
@ -649,9 +812,13 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>Declares an input property that you can update via property binding (example: <td>
<p>Declares an input property that you can update via property binding (example:
<code>&lt;my-cmp [myProperty]="someExpression"&gt;</code>).</p> <code>&lt;my-cmp [myProperty]="someExpression"&gt;</code>).</p>
<p>声明一个输入属性，你可以通过属性绑定来更新它，如 <code>&lt;my-cmp [myProperty]="someExpression"&gt;</code>。 </p>
</td> </td>
</tr><tr> </tr><tr>
@ -662,7 +829,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>Declares an output property that fires events that you can subscribe to with an event binding (example: <code>&lt;my-cmp (myEvent)="doSomething()"&gt;</code>).</p> <td>
<p>Declares an output property that fires events that you can subscribe to with an event binding (example: <code>&lt;my-cmp (myEvent)="doSomething()"&gt;</code>).</p>
<p>声明一个输出属性，它发出事件，你可以用事件绑定来订阅它们（如：<code>&lt;my-cmp (myEvent)="doSomething()"&gt;</code>）。</p>
</td> </td>
@ -674,7 +845,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>Binds a host element property (here, the CSS class <code>valid</code>) to a directive/component property (<code>isValid</code>).</p> <td>
<p>Binds a host element property (here, the CSS class <code>valid</code>) to a directive/component property (<code>isValid</code>).</p>
<p>把宿主元素的一个属性（这里是 CSS 类 <code>valid</code>）绑定到指令或组件上的 <code>isValid</code> 属性。</p>
</td> </td>
@ -686,7 +861,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>Subscribes to a host element event (<code>click</code>) with a directive/component method (<code>onClick</code>), optionally passing an argument (<code>$event</code>).</p> <td>
<p>Subscribes to a host element event (<code>click</code>) with a directive/component method (<code>onClick</code>), optionally passing an argument (<code>$event</code>).</p>
<p>用指令或组件上的<code>onClick</code>方法订阅宿主元素上的<code>click</code>事件，并从中获取<code>$event</code>参数（可选）</p>
</td> </td>
@ -698,7 +877,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>Binds the first result of the component content query (<code>myPredicate</code>) to a property (<code>myChildComponent</code>) of the class.</p> <td>
<p>Binds the first result of the component content query (<code>myPredicate</code>) to a property (<code>myChildComponent</code>) of the class.</p>
<p>把组件内容查询（<code>myPredicate</code>）的第一个结果绑定到该类的 <code>myChildComponent</code> 属性上。</p>
</td> </td>
@ -710,7 +893,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>Binds the results of the component content query (<code>myPredicate</code>) to a property (<code>myChildComponents</code>) of the class.</p> <td>
<p>Binds the results of the component content query (<code>myPredicate</code>) to a property (<code>myChildComponents</code>) of the class.</p>
<p>把组件内容查询（<code>myPredicate</code>）的全部结果绑定到该类的 <code>myChildComponents</code> 属性上</p>
</td> </td>
@ -722,7 +909,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>Binds the first result of the component view query (<code>myPredicate</code>) to a property (<code>myChildComponent</code>) of the class. Not available for directives.</p> <td>
<p>Binds the first result of the component view query (<code>myPredicate</code>) to a property (<code>myChildComponent</code>) of the class. Not available for directives.</p>
<p>把组件视图查询（<code>myPredicate</code>）的第一个结果绑定到该类的 <code>myChildComponent</code> 属性上。对指令无效。</p>
</td> </td>
@ -734,7 +925,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>Binds the results of the component view query (<code>myPredicate</code>) to a property (<code>myChildComponents</code>) of the class. Not available for directives.</p> <td>
<p>Binds the results of the component view query (<code>myPredicate</code>) to a property (<code>myChildComponents</code>) of the class. Not available for directives.</p>
<p>把组件视图查询（<code>myPredicate</code>）的全部结果绑定到该类的 <code>myChildComponents</code> 属性上。对指令无效。</p>
</td> </td>
@ -751,7 +946,9 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</th> </th>
<th><p>(implemented as class methods) <th>
<p>(implemented as class methods)
</p> </p>
@ -767,7 +964,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.</p> <td>
<p>Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.</p>
<p>在任何其它生命周期钩子之前调用。可以用它来注入依赖项，但不要在这里做正事。</p>
</td> </td>
@ -779,7 +980,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>Called after every change to input properties and before processing content or child views.</p> <td>
<p>Called after every change to input properties and before processing content or child views.</p>
<p>每当输入属性发生变化时就会调用，但位于处理内容（<code>ng-content</code>）或子视图之前。</p>
</td> </td>
@ -791,7 +996,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>Called after the constructor, initializing input properties, and the first call to <code>ngOnChanges</code>.</p> <td>
<p>Called after the constructor, initializing input properties, and the first call to <code>ngOnChanges</code>.</p>
<p>在调用完构造函数、初始化完所有输入属性并首次调用过<code>ngOnChanges</code>之后调用。</p>
</td> </td>
@ -803,7 +1012,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check.</p> <td>
<p>Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check.</p>
<p>每当对组件或指令的输入属性进行变更检测时就会调用。可以用它来扩展变更检测逻辑，执行自定义的检测逻辑。</p>
</td> </td>
@ -815,7 +1028,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>Called after <code>ngOnInit</code> when the component's or directive's content has been initialized.</p> <td>
<p>Called after <code>ngOnInit</code> when the component's or directive's content has been initialized.</p>
<p><code>ngOnInit</code>完成之后，当组件或指令的内容（<code>ng-content</code>）已经初始化完毕时调用。</p>
</td> </td>
@ -827,7 +1044,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>Called after every check of the component's or directive's content.</p> <td>
<p>Called after every check of the component's or directive's content.</p>
<p>每当组件或指令的内容（<code>ng-content</code>）做变更检测时调用。</p>
</td> </td>
@ -839,7 +1060,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>Called after <code>ngAfterContentInit</code> when the component's view has been initialized. Applies to components only.</p> <td>
<p>Called after <code>ngAfterContentInit</code> when the component's view has been initialized. Applies to components only.</p>
<p>当<code>ngAfterContentInit</code>完毕，并且组件的视图已经初始化完毕时调用。只适用于组件。</p>
</td> </td>
@ -851,7 +1076,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>Called after every check of the component's view. Applies to components only.</p> <td>
<p>Called after every check of the component's view. Applies to components only.</p>
<p>当组件视图每次执行变更检测时调用。只适用于组件。</p>
</td> </td>
@ -863,7 +1092,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>Called once, before the instance is destroyed.</p> <td>
<p>Called once, before the instance is destroyed.</p>
<p>只在实例被销毁前调用一次。</p>
</td> </td>
@ -894,7 +1127,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>Sets or overrides the provider for <code>MyService</code> to the <code>MyMockService</code> class.</p> <td>
<p>Sets or overrides the provider for <code>MyService</code> to the <code>MyMockService</code> class.</p>
<p>把 <code>MyService</code> 的服务提供商设置或改写为 <code>MyMockService</code> 类。</p>
</td> </td>
@ -906,7 +1143,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>Sets or overrides the provider for <code>MyService</code> to the <code>myFactory</code> factory function.</p> <td>
<p>Sets or overrides the provider for <code>MyService</code> to the <code>myFactory</code> factory function.</p>
<p>把 <code>MyService</code> 的服务提供商设置或改写为 <code>myFactory</code> 工厂函数。</p>
</td> </td>
@ -918,7 +1159,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>Sets or overrides the provider for <code>MyValue</code> to the value <code>41</code>.</p> <td>
<p>Sets or overrides the provider for <code>MyValue</code> to the value <code>41</code>.</p>
<p>把 <code>MyValue</code> 的服务提供商改写为一个特定的值 <code>41</code> 。</p>
</td> </td>
@ -935,7 +1180,9 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</th> </th>
<th><p><code>import { Routes, RouterModule, ... } from '@angular/router';</code> <th>
<p><code>import { Routes, RouterModule, ... } from '@angular/router';</code>
</p> </p>
@ -951,7 +1198,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve.</p> <td>
<p>Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve.</p>
<p>为该应用配置路由。支持静态、参数化、重定向和通配符路由。也支持自定义路由数据和解析（resolve）函数。</p>
</td> </td>
@ -963,7 +1214,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>Marks the location to load the component of the active route.</p> <td>
<p>Marks the location to load the component of the active route.</p>
<p>标记出一个位置，用来加载活动路由的组件。</p>
</td> </td>
@ -975,7 +1230,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>Creates a link to a different view based on a route instruction consisting of a route path, required and optional parameters, query parameters, and a fragment. To navigate to a root route, use the <code>/</code> prefix; for a child route, use the <code>./</code>prefix; for a sibling or parent, use the <code>../</code> prefix.</p> <td>
<p>Creates a link to a different view based on a route instruction consisting of a route path, required and optional parameters, query parameters, and a fragment. To navigate to a root route, use the <code>/</code> prefix; for a child route, use the <code>./</code>prefix; for a sibling or parent, use the <code>../</code> prefix.</p>
<p>使用路由体系创建一个到其它视图的链接。路由体系由路由路径、必要参数、可选参数、查询参数和文档片段组成。要导航到根路由，请使用<code>/</code>前缀；要导航到子路由，使用<code>./</code>前缀；要导航到兄弟路由或父级路由，使用<code>../</code>前缀。</p>
</td> </td>
@ -987,7 +1246,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>The provided classes are added to the element when the <code>routerLink</code> becomes the current active route.</p> <td>
<p>The provided classes are added to the element when the <code>routerLink</code> becomes the current active route.</p>
<p>当 <code>routerLink</code> 指向的路由变成活动路由时，为当前元素添加一些类（比如这里的 <code>active</code>）。</p>
</td> </td>
@ -999,7 +1262,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>An interface for defining a class that the router should call first to determine if it should activate this component. Should return a boolean or an Observable/Promise that resolves to a boolean.</p> <td>
<p>An interface for defining a class that the router should call first to determine if it should activate this component. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>
<p>用来定义类的接口。路由器会首先调用本接口来决定是否激活该路由。应该返回一个 <code>boolean</code> 或能解析成 <code>boolean</code> 的 <code>Observable/Promise</code>。</p>
</td> </td>
@ -1011,7 +1278,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>An interface for defining a class that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean or an Observable/Promise that resolves to a boolean.</p> <td>
<p>An interface for defining a class that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>
<p>用来定义类的接口。路由器会在导航离开前首先调用本接口以决定是否取消激活本路由。应该返回一个 <code>boolean</code> 或能解析成 <code>boolean</code> 的 <code>Observable/Promise</code>。</p>
</td> </td>
@ -1023,7 +1294,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>An interface for defining a class that the router should call first to determine if it should activate the child route. Should return a boolean or an Observable/Promise that resolves to a boolean.</p> <td>
<p>An interface for defining a class that the router should call first to determine if it should activate the child route. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>
<p>用来定义类的接口。路由器会首先调用本接口来决定是否激活一个子路由。应该返回一个 <code>boolean</code> 或能解析成 <code>boolean</code> 的 <code>Observable/Promise</code>。</p>
</td> </td>
@ -1035,7 +1310,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>An interface for defining a class that the router should call first to resolve route data before rendering the route. Should return a value or an Observable/Promise that resolves to a value.</p> <td>
<p>An interface for defining a class that the router should call first to resolve route data before rendering the route. Should return a value or an Observable/Promise that resolves to a value.</p>
<p>用来定义类的接口。路由器会在渲染该路由之前，首先调用它来解析路由数据。应该返回一个值或能解析成值的 <code>Observable/Promise</code>。</p>
</td> </td>
@ -1047,7 +1326,11 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
<td><p>An interface for defining a class that the router should call first to check if the lazy loaded module should be loaded. Should return a boolean or an Observable/Promise that resolves to a boolean.</p> <td>
<p>An interface for defining a class that the router should call first to check if the lazy loaded module should be loaded. Should return a boolean or an Observable/Promise that resolves to a boolean.</p>
<p>用来定义类的接口。路由器会首先调用它来决定是否应该加载一个惰性加载模块。应该返回一个 <code>boolean</code> 或能解析成 <code>boolean</code> 的 <code>Observable/Promise</code>。</p>
</td> </td>

14
aio/content/guide/comparing-observables.md
View File

@ -69,6 +69,8 @@ sub.unsubscribe();
### Error handling ### Error handling
### 错误处理
* Observable execution errors are delivered to the subscriber's error handler, and the subscriber automatically unsubscribes from the observable. * Observable execution errors are delivered to the subscriber's error handler, and the subscriber automatically unsubscribes from the observable.
<code-example hideCopy> <code-example hideCopy>
@ -259,7 +261,7 @@ let subscription = clicks$
// Stop listening // Stop listening
subscription.unsubscribe();</pre> subscription.unsubscribe();</pre>
</td> </td>
<td> <td>
@ -273,7 +275,7 @@ button.addEventListener(‘click’, handler);
button.removeEventListener(‘click’, handler); button.removeEventListener(‘click’, handler);
</pre> </pre>
</td> </td>
</tr> </tr>
@ -311,14 +313,18 @@ button.removeEventListener(‘click’, handler);
</td> </td>
<td>Listen for keystrokes, but provide a stream representing the value in the input. <td>
Listen for keystrokes, but provide a stream representing the value in the input.
<pre>fromEvent(inputEl, 'keydown').pipe( <pre>fromEvent(inputEl, 'keydown').pipe(
map(e => e.target.value) map(e => e.target.value)
);</pre> );</pre>
</td> </td>
<td>Does not support configuration. <td>
Does not support configuration.
<pre>element.addEventListener(eventName, (event) => { <pre>element.addEventListener(eventName, (event) => {
// Cannot change the passed Event into another // Cannot change the passed Event into another
// value before it gets to the handler // value before it gets to the handler

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

@ -82,7 +82,7 @@ The running application displays three heroes:
<h3 class="no-toc">Test it</h3> <h3 class="no-toc">Test it</h3>
<h3 class="no-toc">测试一下</h3> <h3 class="no-toc">测试一下！</h3>
E2E test that all children were instantiated and displayed as expected: E2E test that all children were instantiated and displayed as expected:
@ -129,7 +129,7 @@ Here's the `NameParentComponent` demonstrating name variations including a name
<h3 class="no-toc">Test it</h3> <h3 class="no-toc">Test it</h3>
<h3 class="no-toc">测试一下</h3> <h3 class="no-toc">测试一下！</h3>
E2E tests of input property setter with empty and non-empty names: E2E tests of input property setter with empty and non-empty names:
@ -191,7 +191,7 @@ Here's the output of a button-pushing sequence:
<h3 class="no-toc">Test it</h3> <h3 class="no-toc">Test it</h3>
<h3 class="no-toc">测试一下</h3> <h3 class="no-toc">测试一下！</h3>
Test that ***both*** input properties are set initially and that button clicks trigger Test that ***both*** input properties are set initially and that button clicks trigger
the expected `ngOnChanges` calls and values: the expected `ngOnChanges` calls and values:
@ -251,7 +251,7 @@ and the method processes it:
<h3 class="no-toc">Test it</h3> <h3 class="no-toc">Test it</h3>
<h3 class="no-toc">测试一下</h3> <h3 class="no-toc">测试一下！</h3>
Test that clicking the *Agree* and *Disagree* buttons update the appropriate counters: Test that clicking the *Agree* and *Disagree* buttons update the appropriate counters:
@ -325,7 +325,7 @@ Here we see the parent and child working together.
<h3 class="no-toc">Test it</h3> <h3 class="no-toc">Test it</h3>
<h3 class="no-toc">测试一下</h3> <h3 class="no-toc">测试一下！</h3>
Test that the seconds displayed in the parent template Test that the seconds displayed in the parent template
match the seconds displayed in the child's status message. match the seconds displayed in the child's status message.
@ -431,7 +431,7 @@ that it takes future values from the timer component.
<h3 class="no-toc">Test it</h3> <h3 class="no-toc">Test it</h3>
<h3 class="no-toc">测试一下</h3> <h3 class="no-toc">测试一下！</h3>
Use [the same countdown timer tests](guide/component-interaction#countdown-tests) as before. Use [the same countdown timer tests](guide/component-interaction#countdown-tests) as before.
@ -512,7 +512,7 @@ facilitated by the service:
<h3 class="no-toc">Test it</h3> <h3 class="no-toc">Test it</h3>
<h3 class="no-toc">测试一下</h3> <h3 class="no-toc">测试一下！</h3>
Tests click buttons of both the parent `MissionControlComponent` and the `AstronautComponent` children Tests click buttons of both the parent `MissionControlComponent` and the `AstronautComponent` children
and verify that the history meets expectations: and verify that the history meets expectations:

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

@ -12,7 +12,7 @@ This cookbook explores many of the features of Dependency Injection (DI) in Angu
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="dependency-injection-in-action"></live-example>查看本烹饪书的源码。 要获取本“烹饪宝典”的代码，**参见<live-example name="dependency-injection-in-action"></live-example>**。
{@a app-wide-dependencies} {@a app-wide-dependencies}

38
aio/content/guide/docs-style-guide.md
View File

@ -124,11 +124,7 @@ All section heading text should be in "Sentence case", which means the first wor
**Always follow the section heading with at least one blank line.** **Always follow the section heading with at least one blank line.**
<h2 class="no-toc"> <h2 class="no-toc">Main section heading</h2>
Main section heading
</h2>
There are usually one or more main sections that may be further divided into secondary sections. There are usually one or more main sections that may be further divided into secondary sections.
@ -144,11 +140,7 @@ The main section heading should be followed by a blank line and then the content
``` ```
<h3 class="no-toc"> <h3 class="no-toc">Secondary section heading</h3>
Secondary section heading
</h3>
A secondary section heading is related to a main heading and _falls textually within_ the bounds of that main heading. A secondary section heading is related to a main heading and _falls textually within_ the bounds of that main heading.
@ -218,11 +210,7 @@ To exclude a heading from the TOC, create the heading as an `<h2>` or `<h3>` ele
```html ```html
<h3 class="no-toc"> <h3 class="no-toc">This heading is not displayed in the TOC</h3>
This heading is not displayed in the TOC
</h3>
``` ```
@ -230,11 +218,7 @@ You can turn off TOC generation for the _entire_ page by writing the title with
```html ```html
<h1 class="no-toc"> <h1 class="no-toc">A guide without a TOC</h1>
A guide without a TOC
</h1>
``` ```
@ -803,6 +787,8 @@ Remember to exclude these files from stackblitz by listing them in the `stackbli
## Live examples ## Live examples
## 在线例子
By adding `<live-example>` to the page you generate links that run sample code in the Stackblitz live coding environment and download that code to the reader's file system. By adding `<live-example>` to the page you generate links that run sample code in the Stackblitz live coding environment and download that code to the reader's file system.
Live examples (AKA "stackblitz") are defined by one or more `stackblitz.json` files in the root of a code sample folder. Each sample folder usually has a single unnamed definition file, the default `stackblitz.json`. Live examples (AKA "stackblitz") are defined by one or more `stackblitz.json` files in the root of a code sample folder. Each sample folder usually has a single unnamed definition file, the default `stackblitz.json`.
@ -1309,6 +1295,8 @@ Use HTML tables to present tabular data.
Routing Routing
路由
</td> </td>
<td> <td>
@ -1331,6 +1319,8 @@ Use HTML tables to present tabular data.
Routing Routing
路由
</td> </td>
<!-- can use markdown too; remember blank lines --> <!-- can use markdown too; remember blank lines -->
@ -1355,6 +1345,8 @@ Use HTML tables to present tabular data.
Routing Routing
路由
</td> </td>
<td> <td>
@ -1411,6 +1403,8 @@ Here is the markup for this table.
Routing Routing
路由
</td> </td>
<td> <td>
@ -1433,6 +1427,8 @@ Here is the markup for this table.
Routing Routing
路由
</td> </td>
<!-- can use markdown too; remember blank lines --> <!-- can use markdown too; remember blank lines -->
@ -1457,6 +1453,8 @@ Here is the markup for this table.
Routing Routing
路由
</td> </td>
<td> <td>

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

@ -782,6 +782,8 @@ You rarely access Angular feature modules directly. You usually import them from
## NgModule ## NgModule
## 可观察对象 (observable)
Helps you organize an application into cohesive blocks of functionality. Helps you organize an application into cohesive blocks of functionality.
An NgModule identifies the components, directives, and pipes that the application uses along with the list of external NgModules that the application needs, such as `FormsModule`. An NgModule identifies the components, directives, and pipes that the application uses along with the list of external NgModules that the application needs, such as `FormsModule`.
@ -957,7 +959,7 @@ For more information, see the [Routing & Navigation](guide/router) page.
## Router module ## Router module
## 路由器模块 ## 路由器模块 (router module)
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.

13
aio/content/guide/http.md
View File

@ -450,9 +450,6 @@ You can think of these observables as _blueprints_ for actual HTTP requests.
In fact, each `subscribe()` initiates a separate, independent execution of the observable. In fact, each `subscribe()` initiates a separate, independent execution of the observable.
Subscribing twice results in two HTTP requests. Subscribing twice results in two HTTP requests.
*注意这个`subscribe()`方法*。 所有从`HttpClient`返回的可观察对象都是*冷的（cold）*，也就是说，它们只是发起请求的*蓝图*而已。在我们调用`subscribe()`之前，什么都不会发生，而当我们每次调用`subscribe()`时，就会独立发起一次请求。
比如，下列代码会使用同样的数据发送两次同样的 POST 请求：
```javascript ```javascript
const req = http.get<Heroes>('/api/heroes'); const req = http.get<Heroes>('/api/heroes');
@ -483,6 +480,8 @@ in order to initiate the request.
## Advanced usage ## Advanced usage
## 高级用法
The above sections detail how to use the basic HTTP functionality in `@angular/common/http`, but sometimes you need to do more than make simple requests and get data back. The above sections detail how to use the basic HTTP functionality in `@angular/common/http`, but sometimes you need to do more than make simple requests and get data back.
### Configuring the request ### Configuring the request
@ -793,8 +792,6 @@ If you set the cloned request body to `undefined`, Angular assumes you intend to
That is not what you want. That is not what you want.
If you set the cloned request body to `null`, Angular knows you intend to clear the request body. If you set the cloned request body to `null`, Angular knows you intend to clear the request body.
这种克隆一个请求并设置一组新的请求头的操作非常常见，因此有了一种快捷写法：
```javascript ```javascript
newReq = req.clone({ ... }); // body not mentioned => preserve original body newReq = req.clone({ ... }); // body not mentioned => preserve original body
@ -963,8 +960,6 @@ the cached response first (and immediately), followed later
by the response from the server. by the response from the server.
Subscribers see a sequence of _two_ responses. Subscribers see a sequence of _two_ responses.
现在，如果 URL 被缓存过，那么任何人调用`http.get(url)`时都会收到*两次*响应。
### Listening to progress events ### Listening to progress events
### 监听进度事件 ### 监听进度事件
@ -1105,7 +1100,7 @@ There are also tests of an application data service that call `HttpClient` in
### Setup ### Setup
### 初始设置 ### 环境设置
To begin testing calls to `HttpClient`, To begin testing calls to `HttpClient`,
import the `HttpClientTestingModule` and the mocking controller, `HttpTestingController`, import the `HttpClientTestingModule` and the mocking controller, `HttpTestingController`,
@ -1150,6 +1145,8 @@ Now you can write a test that expects a GET Request to occur and provides a mock
The last step, verifying that no requests remain outstanding, is common enough for you to move it into an `afterEach()` step: The last step, verifying that no requests remain outstanding, is common enough for you to move it into an `afterEach()` step:
最后一步，验证没有发起过预期之外的请求，足够通用，因此我们可以把它移到`afterEach()`中：
<code-example <code-example
path="http/src/testing/http-client.spec.ts" path="http/src/testing/http-client.spec.ts"
region="afterEach" region="afterEach"

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

@ -344,7 +344,7 @@ Here's a brief description of each exercise:
Description Description
描述 说明
</th> </th>

66
aio/content/guide/module-types.md
View File

@ -38,12 +38,16 @@ typical characteristics, in real world apps, you may see hybrids.
Feature Module Feature Module
特性模块
</th> </th>
<th style="vertical-align: top"> <th style="vertical-align: top">
Guidelines Guidelines
指导原则
</th> </th>
</tr> </tr>
@ -54,6 +58,8 @@ typical characteristics, in real world apps, you may see hybrids.
Domain Domain
领域
</td> </td>
<td> <td>
@ -70,6 +76,8 @@ typical characteristics, in real world apps, you may see hybrids.
They might be imported by the root `AppModule` of a small application that lacks routing. They might be imported by the root `AppModule` of a small application that lacks routing.
对于缺少路由的小型应用，它们可能只会被根模块`AppModule`导入一次。
</td> </td>
</tr> </tr>
@ -80,6 +88,8 @@ typical characteristics, in real world apps, you may see hybrids.
Routed Routed
路由
</td> </td>
<td> <td>
@ -88,6 +98,8 @@ typical characteristics, in real world apps, you may see hybrids.
All lazy-loaded modules are routed feature modules by definition. All lazy-loaded modules are routed feature modules by definition.
根据这个定义，所有惰性加载的模块都是路由特性模块。
Routed feature modules don’t export anything because their components never appear in the template of an external component. Routed feature modules don’t export anything because their components never appear in the template of an external component.
A lazy-loaded routed feature module should not be imported by any module. Doing so would trigger an eager load, defeating the purpose of lazy loading.That means you won’t see them mentioned among the `AppModule` imports. An eager loaded routed feature module must be imported by another module so that the compiler learns about its components. A lazy-loaded routed feature module should not be imported by any module. Doing so would trigger an eager load, defeating the purpose of lazy loading.That means you won’t see them mentioned among the `AppModule` imports. An eager loaded routed feature module must be imported by another module so that the compiler learns about its components.
@ -104,6 +116,8 @@ typical characteristics, in real world apps, you may see hybrids.
Routing Routing
路由
</td> </td>
<td> <td>
@ -112,6 +126,8 @@ typical characteristics, in real world apps, you may see hybrids.
A routing module typically does the following: A routing module typically does the following:
路由模块通常会做这些：
<ul> <ul>
<li> <li>
@ -164,6 +180,8 @@ typical characteristics, in real world apps, you may see hybrids.
Service Service
服务
</td> </td>
<td> <td>
@ -182,6 +200,8 @@ typical characteristics, in real world apps, you may see hybrids.
Widget Widget
窗口部件
</td> </td>
<td> <td>
@ -194,6 +214,8 @@ typical characteristics, in real world apps, you may see hybrids.
Import widget modules in any module whose component templates need the widgets. Import widget modules in any module whose component templates need the widgets.
如果任何模块的组件模板中需要用到这些窗口部件，就请导入相应的窗口部件模块。
</td> </td>
</tr> </tr>
@ -210,24 +232,32 @@ The following table summarizes the key characteristics of each feature module gr
Feature Module Feature Module
特性模块
</th> </th>
<th style="vertical-align: top"> <th style="vertical-align: top">
Declarations Declarations
声明`declarations`
</th> </th>
<th style="vertical-align: top"> <th style="vertical-align: top">
Providers Providers
提供商`providers`
</th> </th>
<th style="vertical-align: top"> <th style="vertical-align: top">
Exports Exports
导出什么
</th> </th>
<th style="vertical-align: top"> <th style="vertical-align: top">
@ -244,24 +274,32 @@ The following table summarizes the key characteristics of each feature module gr
Domain Domain
领域
</td> </td>
<td> <td>
Yes Yes
有
</td> </td>
<td> <td>
Rare Rare
罕见
</td> </td>
<td> <td>
Top component Top component
顶级组件
</td> </td>
<td> <td>
@ -278,24 +316,32 @@ The following table summarizes the key characteristics of each feature module gr
Routed Routed
路由
</td> </td>
<td> <td>
Yes Yes
有
</td> </td>
<td> <td>
Rare Rare
罕见
</td> </td>
<td> <td>
No No
无
</td> </td>
<td> <td>
@ -312,12 +358,16 @@ The following table summarizes the key characteristics of each feature module gr
Routing Routing
路由
</td> </td>
<td> <td>
No No
无
</td> </td>
<td> <td>
@ -346,24 +396,32 @@ The following table summarizes the key characteristics of each feature module gr
Service Service
服务
</td> </td>
<td> <td>
No No
无
</td> </td>
<td> <td>
Yes Yes
有
</td> </td>
<td> <td>
No No
无
</td> </td>
<td> <td>
@ -380,24 +438,32 @@ The following table summarizes the key characteristics of each feature module gr
Widget Widget
窗口部件
</td> </td>
<td> <td>
Yes Yes
有
</td> </td>
<td> <td>
Rare Rare
罕见
</td> </td>
<td> <td>
Yes Yes
有
</td> </td>
<td> <td>

10
aio/content/guide/ngmodule-api.md
View File

@ -46,6 +46,8 @@ into three categories:
The following table summarizes the `@NgModule` metadata properties. The following table summarizes the `@NgModule` metadata properties.
下面是`@NgModule`元数据中属性的汇总表：
<table> <table>
<tr> <tr>
@ -62,7 +64,7 @@ The following table summarizes the `@NgModule` metadata properties.
Description Description
描述 说明
</th> </th>
@ -130,6 +132,8 @@ The following table summarizes the `@NgModule` metadata properties.
A list of dependency-injection providers. A list of dependency-injection providers.
依赖注入提供商的列表。
Angular registers these providers with the NgModule's injector. Angular registers these providers with the NgModule's injector.
If it is the NgModule used for bootstrapping then it is the root injector. If it is the NgModule used for bootstrapping then it is the root injector.
@ -231,9 +235,13 @@ The following table summarizes the `@NgModule` metadata properties.
Usually there's only one component in this list, the _root component_ of the application. Usually there's only one component in this list, the _root component_ of the application.
通常，在这个列表中只有一个组件，也就是应用的*根组件*。
Angular can launch with multiple bootstrap components, Angular can launch with multiple bootstrap components,
each with its own location in the host web page. each with its own location in the host web page.
Angular也可以引导多个引导组件，它们每一个都在宿主页面中有自己的位置。
A bootstrap component is automatically added to `entryComponents`. A bootstrap component is automatically added to `entryComponents`.
</td> </td>

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

@ -913,7 +913,7 @@ For more information, see [Entry Components](guide/entry-components).
## Why does Angular need _entryComponents_? ## Why does Angular need _entryComponents_?
## 为什么 Angular 需要*入口组件*？ ## 为什么Angular需要*入口组件*？
The reason is _tree shaking_. For production apps you want to load the smallest, fastest code possible. The code should contain only the classes that you actually need. The reason is _tree shaking_. For production apps you want to load the smallest, fastest code possible. The code should contain only the classes that you actually need.
It should exclude a component that's never used, whether or not that component is declared. It should exclude a component that's never used, whether or not that component is declared.

2
aio/content/guide/ngmodule-vs-jsmodule.md
View File

@ -65,6 +65,8 @@ The NgModule classes differ from JavaScript module in the following key ways:
* An NgModule bounds [declarable classes](guide/ngmodule-faq#q-declarable) only. * An NgModule bounds [declarable classes](guide/ngmodule-faq#q-declarable) only.
Declarables are the only classes that matter to the [Angular compiler](guide/ngmodule-faq#q-angular-compiler). Declarables are the only classes that matter to the [Angular compiler](guide/ngmodule-faq#q-angular-compiler).
Angular模块只绑定了[_可声明的类_](guide/ngmodule-faq#q-declarable)，这些可声明的类只是供[Angular编译器](guide/ngmodule-faq#q-angular-compiler)用的。
* Instead of defining all member classes in one giant file as in a JavaScript module, * Instead of defining all member classes in one giant file as in a JavaScript module,
you list the module's classes in the `@NgModule.declarations` list. you list the module's classes in the `@NgModule.declarations` list.

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

@ -1,5 +1,7 @@
# NgModules # NgModules
# Angular模块 (NgModule)
#### Prerequisites #### Prerequisites
A basic understanding of the following concepts: A basic understanding of the following concepts:
@ -26,6 +28,8 @@ section.
## Angular modularity ## Angular modularity
## Angular 模块化
Modules are a great way to organize an application and extend it with capabilities from external libraries. Modules are a great way to organize an application and extend it with capabilities from external libraries.
Angular libraries are NgModules, such as `FormsModule`, `HttpClientModule`, and `RouterModule`. Angular libraries are NgModules, such as `FormsModule`, `HttpClientModule`, and `RouterModule`.
@ -38,6 +42,8 @@ NgModules consolidate components, directives, and pipes into
cohesive blocks of functionality, each focused on a cohesive blocks of functionality, each focused on a
feature area, application business domain, workflow, or common collection of utilities. feature area, application business domain, workflow, or common collection of utilities.
Angular 模块把组件、指令和管道打包成内聚的功能块，每个模块聚焦于一个特性区域、业务领域、工作流或通用工具。
Modules can also add services to the application. Modules can also add services to the application.
Such services might be internally developed, like something you'd develop yourself or come from outside sources, such as the Angular router and HTTP client. Such services might be internally developed, like something you'd develop yourself or come from outside sources, such as the Angular router and HTTP client.

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

@ -582,7 +582,7 @@ display updates as you add heroes, even when you mutate the `heroes` array.
<h3 class="no-toc">The impure <i>AsyncPipe</i></h3> <h3 class="no-toc">The impure <i>AsyncPipe</i></h3>
<h3 class="no-toc">非纯管道 <i>AsyncPipe</i></h3> <h3 id='async-pipe'>非纯 <i>AsyncPipe</i></h3>
The Angular `AsyncPipe` is an interesting example of an impure pipe. The Angular `AsyncPipe` is an interesting example of an impure pipe.
The `AsyncPipe` accepts a `Promise` or `Observable` as input The `AsyncPipe` accepts a `Promise` or `Observable` as input

34
aio/content/guide/quickstart.md
View File

@ -29,13 +29,9 @@ And you can also <a href="generated/zips/cli-quickstart/cli-quickstart.zip" targ
你还可以 <a href="generated/zips/cli-quickstart/cli-quickstart.zip" target="_blank">下载这个例子。</a> 你还可以 <a href="generated/zips/cli-quickstart/cli-quickstart.zip" target="_blank">下载这个例子。</a>
<h2 id='devenv'> <h2 id='devenv'>Step 1. Set up the Development Environment</h2>
Step 1. Set up the Development Environment <h2 id='devenv'>步骤1. 设置开发环境</h2>
步骤1. 设置开发环境
</h2>
You need to set up your development environment before you can do anything. You need to set up your development environment before you can do anything.
@ -68,13 +64,9 @@ Then **install the [Angular CLI](https://github.com/angular/angular-cli)** globa
</code-example> </code-example>
<h2 id='create-proj'> <h2 id='create-proj'>Step 2. Create a new project</h2>
Step 2. Create a new project <h2 id='create-proj'>步骤2. 创建新项目</h2>
步骤2. 创建新项目
</h2>
Open a terminal window. Open a terminal window.
@ -100,13 +92,9 @@ It takes time to set up a new project; most of it is spent installing npm packag
</div> </div>
<h2 id='serve'> <h2 id='serve'>Step 3: Serve the application</h2>
Step 3: Serve the application <h2 id='serve'>步骤3. 启动开发服务器</h2>
步骤3. 启动开发服务器
</h2>
Go to the project directory and launch the server. Go to the project directory and launch the server.
@ -137,13 +125,9 @@ Your app greets you with a message:
<img src='generated/images/guide/cli-quickstart/app-works.png' alt="The app works!"> <img src='generated/images/guide/cli-quickstart/app-works.png' alt="The app works!">
</figure> </figure>
<h2 id='first-component'> <h2 id='first-component'>Step 4: Edit your first Angular component</h2>
Step 4: Edit your first Angular component <h2 id='first-component'>步骤4. 编辑我们的第一个Angular组件</h2>
步骤4. 编辑我们的第一个Angular组件
</h2>
The CLI created the first Angular component for you. The CLI created the first Angular component for you.
This is the _root component_ and it is named `app-root`. This is the _root component_ and it is named `app-root`.
@ -641,7 +625,7 @@ These files go in the root folder next to `src/`.
Purpose Purpose
用途 目的
</th> </th>

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

@ -924,7 +924,7 @@ such as one of the following:
Description Description
描述 说明
</th> </th>
@ -999,7 +999,7 @@ such as one of the following:
`true` if the control user has not yet entered the HTML control `true` if the control user has not yet entered the HTML control
and triggered its blur event. Its opposite is `myControl.touched`. and triggered its blur event. Its opposite is `myControl.touched`.
如果用户尚未进入这个HTML控件，也没有触发过它的`blur`（失去焦点）事件，则为`true`。 如果用户尚未进入这个HTML控件，也没有触发过它的`blur`（失去焦点）事件，则为`true`。
它是`myControl.touched`的反义词。 它是`myControl.touched`的反义词。
</td> </td>

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

@ -309,7 +309,7 @@ It has a great deal of useful information including:
Description Description
描述 说明
</th> </th>
@ -538,7 +538,7 @@ During each navigation, the `Router` emits navigation events through the `Router
Description Description
描述 说明
</th> </th>
@ -725,7 +725,7 @@ Here are the key `Router` terms and their meanings:
<code>Router</code> <code>Router</code>
<code>路由器</code> <code>Router</code>（路由器）
</td> </td>
@ -746,6 +746,8 @@ Here are the key `Router` terms and their meanings:
<code>RouterModule</code> <code>RouterModule</code>
<code>RouterModule</code>（路由器模块）
</td> </td>
<td> <td>
@ -765,7 +767,7 @@ Here are the key `Router` terms and their meanings:
<code>Routes</code> <code>Routes</code>
<code>路由定义（数组）</code> <code>Routes</code>（路由数组）
</td> </td>
@ -785,7 +787,7 @@ Here are the key `Router` terms and their meanings:
<code>Route</code> <code>Route</code>
<code>路由器</code> <code>Route</code>（路由）
</td> </td>
@ -806,6 +808,8 @@ Here are the key `Router` terms and their meanings:
<code>RouterOutlet</code> <code>RouterOutlet</code>
<code>RouterOutlet</code>（路由出口）
</td> </td>
<td> <td>
@ -824,6 +828,8 @@ Here are the key `Router` terms and their meanings:
<code>RouterLink</code> <code>RouterLink</code>
<code>RouterLink</code>（路由链接）
</td> </td>
<td> <td>
@ -842,6 +848,8 @@ Here are the key `Router` terms and their meanings:
<code>RouterLinkActive</code> <code>RouterLinkActive</code>
<code>RouterLinkActive</code>（活动路由链接）
</td> </td>
<td> <td>
@ -861,6 +869,8 @@ Here are the key `Router` terms and their meanings:
<code>ActivatedRoute</code> <code>ActivatedRoute</code>
<code>ActivatedRoute</code>（激活的路由）
</td> </td>
<td> <td>
@ -880,6 +890,8 @@ Here are the key `Router` terms and their meanings:
<code>RouterState</code> <code>RouterState</code>
<code>RouterState</code>（路由器状态）
</td> </td>
<td> <td>
@ -2507,7 +2519,7 @@ to handle parameter access for both route parameters (`paramMap`) and query para
Description Description
描述 说明
</th> </th>

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

@ -17,13 +17,9 @@ You can run the <live-example></live-example> in Stackblitz and download the cod
运行<live-example></live-example>来试用本页的代码。 运行<live-example></live-example>来试用本页的代码。
<h2 id='report-issues'> <h2 id='report-issues'>Reporting vulnerabilities</h2>
Reporting vulnerabilities <h2 id='report-issues'>举报漏洞</h2>
举报漏洞
</h2>
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).
@ -34,13 +30,9 @@ philosophy](https://www.google.com/about/appsecurity/).
要了解关于“谷歌如何处理安全问题”的更多信息，参见[谷歌的安全哲学](https://www.google.com/about/appsecurity/)。 要了解关于“谷歌如何处理安全问题”的更多信息，参见[谷歌的安全哲学](https://www.google.com/about/appsecurity/)。
<h2 id='best-practices'> <h2 id='best-practices'>Best practices</h2>
Best practices <h2 id='best-practices'>最佳实践</h2>
最佳实践
</h2>
* **Keep current with the latest Angular library releases.** * **Keep current with the latest Angular library releases.**
We regularly update the Angular libraries, and these updates may fix security defects discovered in We regularly update the Angular libraries, and these updates may fix security defects discovered in
@ -64,13 +56,9 @@ For more information, see the [Trusting safe values](guide/security#bypass-secur
**避免使用本文档中带“[_安全风险_](guide/security#bypass-security-apis)”标记的Angular API。** **避免使用本文档中带“[_安全风险_](guide/security#bypass-security-apis)”标记的Angular API。**
要了解更多信息，请参阅本章的[信任那些安全的值](guide/security#bypass-security-apis)部分。 要了解更多信息，请参阅本章的[信任那些安全的值](guide/security#bypass-security-apis)部分。
<h2 id='xss'> <h2 id='xss'>Preventing cross-site scripting (XSS)</h2>
Preventing cross-site scripting (XSS) <h2 id='xss'>防范跨站脚本(XSS)攻击</h2>
防范跨站脚本(XSS)攻击
</h2>
[Cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) enables attackers [Cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) enables attackers
to inject malicious code into web pages. Such code can then, for example, steal user data (in to inject malicious code into web pages. Such code can then, for example, steal user data (in
@ -247,13 +235,9 @@ carries a high risk of introducing template-injection vulnerabilities.
务必使用一个能够自动进行无害化处理以防范XSS漏洞的后端模板语言。不要在服务器端使用模板语言生成Angular模板， 务必使用一个能够自动进行无害化处理以防范XSS漏洞的后端模板语言。不要在服务器端使用模板语言生成Angular模板，
这样会带来很高的“模板注入”风险。 这样会带来很高的“模板注入”风险。
<h2 id='bypass-security-apis'> <h2 id='bypass-security-apis'>Trusting safe values</h2>
Trusting safe values <h2 id='bypass-security-apis'>信任安全值</h2>
信任安全值
</h2>
Sometimes applications genuinely need to include executable code, display an `<iframe>` from some Sometimes applications genuinely need to include executable code, display an `<iframe>` from some
URL, or construct potentially dangerous URLs. To prevent automatic sanitization in any of these URL, or construct potentially dangerous URLs. To prevent automatic sanitization in any of these
@ -324,13 +308,9 @@ Angular to allow binding into `<iframe src>`:
</code-example> </code-example>
<h2 id='http'> <h2 id='http'>HTTP-level vulnerabilities</h2>
HTTP-level vulnerabilities <h2 id='http'>HTTP级别的漏洞</h2>
HTTP级别的漏洞
</h2>
Angular has built-in support to help prevent two common HTTP vulnerabilities, cross-site request Angular has built-in support to help prevent two common HTTP vulnerabilities, cross-site request
forgery (CSRF or XSRF) and cross-site script inclusion (XSSI). Both of these must be mitigated primarily forgery (CSRF or XSRF) and cross-site script inclusion (XSSI). Both of these must be mitigated primarily
@ -339,13 +319,9 @@ on the server side, but Angular provides helpers to make integration on the clie
Angular内置了一些支持来防范两个常见的HTTP漏洞：跨站请求伪造（XSRF）和跨站脚本包含（XSSI）。 Angular内置了一些支持来防范两个常见的HTTP漏洞：跨站请求伪造（XSRF）和跨站脚本包含（XSSI）。
这两个漏洞主要在服务器端防范，但是Angular也自带了一些辅助特性，可以让客户端的集成变得更容易。 这两个漏洞主要在服务器端防范，但是Angular也自带了一些辅助特性，可以让客户端的集成变得更容易。
<h3 id='xsrf'> <h3 id='xsrf'>Cross-site request forgery</h3>
Cross-site request forgery <h3 id='xsrf'>跨站请求伪造（XSRF）</h3>
跨站请求伪造（XSRF）
</h3>
In a cross-site request forgery (CSRF or XSRF), an attacker tricks the user into visiting In a cross-site request forgery (CSRF or XSRF), an attacker tricks the user into visiting
a different web page (such as `evil.com`) with malignant code that secretly sends a malicious request a different web page (such as `evil.com`) with malignant code that secretly sends a malicious request
@ -413,13 +389,9 @@ See also Dave Smith's easy-to-understand
参见Dave Smith在<a href="https://www.youtube.com/watch?v=9inczw6qtpY" target="_blank" title="Cross Site Request Funkery Securing Your Angular Apps From Evil Doers">AngularConnect 2016关于XSRF的演讲</a>。 参见Dave Smith在<a href="https://www.youtube.com/watch?v=9inczw6qtpY" target="_blank" title="Cross Site Request Funkery Securing Your Angular Apps From Evil Doers">AngularConnect 2016关于XSRF的演讲</a>。
<h3 id='xssi'> <h3 id='xssi'>Cross-site script inclusion (XSSI)</h3>
Cross-site script inclusion (XSSI) <h3 id='xssi'>跨站脚本包含(XSSI)</h3>
跨站脚本包含(XSSI)
</h3>
Cross-site script inclusion, also known as JSON vulnerability, can allow an attacker's website to Cross-site script inclusion, also known as JSON vulnerability, can allow an attacker's website to
read data from a JSON API. The attack works on older browsers by overriding native JavaScript read data from a JSON API. The attack works on older browsers by overriding native JavaScript
@ -445,13 +417,9 @@ post](https://security.googleblog.com/2011/05/website-security-for-webmasters.ht
要学习更多这方面的知识，请参见[谷歌Web安全博客文章](https://security.googleblog.com/2011/05/website-security-for-webmasters.html)的XSSI小节。 要学习更多这方面的知识，请参见[谷歌Web安全博客文章](https://security.googleblog.com/2011/05/website-security-for-webmasters.html)的XSSI小节。
<h2 id='code-review'> <h2 id='code-review'>Auditing Angular applications</h2>
Auditing Angular applications <h2 id='code-review'>审计Angular应用程序</h2>
审计Angular应用程序
</h2>
Angular applications must follow the same security principles as regular web applications, and Angular applications must follow the same security principles as regular web applications, and
must be audited as such. Angular-specific APIs that should be audited in a security review, must be audited as such. Angular-specific APIs that should be audited in a security review,

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

@ -11,7 +11,7 @@ This cookbook explains how to do it.
See the <live-example name="set-document-title"></live-example>. See the <live-example name="set-document-title"></live-example>.
参见<live-example name="set-document-title"></live-example>。 参见<live-example name="set-document-title"></live-example>
## The problem with *&lt;title&gt;* ## The problem with *&lt;title&gt;*

10
aio/content/guide/singleton-services.md
View File

@ -89,6 +89,8 @@ a simple object with the following properties:
* `providers`: the configured providers. * `providers`: the configured providers.
`providers` - 配置好的服务提供商
In the <live-example name="ngmodules">live example</live-example> In the <live-example name="ngmodules">live example</live-example>
the root `AppModule` imports the `CoreModule` and adds the the root `AppModule` imports the `CoreModule` and adds the
`providers` to the `AppModule` providers. Specifically, `providers` to the `AppModule` providers. Specifically,
@ -118,12 +120,16 @@ Here's `forRoot()` that takes a `UserServiceConfig` object:
Lastly, call it within the `imports` list of the `AppModule`. Lastly, call it within the `imports` list of the `AppModule`.
最后，我们在`AppModule`的`imports`*列表*中调用它。
<code-example path="ngmodules/src/app/app.module.ts" region="import-for-root" title="src/app/app.module.ts (imports)" linenums="false"> <code-example path="ngmodules/src/app/app.module.ts" region="import-for-root" title="src/app/app.module.ts (imports)" linenums="false">
</code-example> </code-example>
The app displays "Miss Marple" as the user instead of the default "Sherlock Holmes". The app displays "Miss Marple" as the user instead of the default "Sherlock Holmes".
该应用不再显示默认的 “Sherlock Holmes”，而是用 “Miss Marple” 作为用户名称。
Remember to _import_ `CoreModule` as a Javascript import at the top of the file; don't add it to more than one `@NgModule` `imports` list. Remember to _import_ `CoreModule` as a Javascript import at the top of the file; don't add it to more than one `@NgModule` `imports` list.
<!-- KW--Does this mean that if we need it elsewhere we only import it at the top? I thought the services would all be available since we were importing it into `AppModule` in `providers`. --> <!-- KW--Does this mean that if we need it elsewhere we only import it at the top? I thought the services would all be available since we were importing it into `AppModule` in `providers`. -->
@ -155,6 +161,10 @@ The `@Optional` decorator means not finding the service is OK.
The injector returns `null`, the `parentModule` parameter is null, The injector returns `null`, the `parentModule` parameter is null,
and the constructor concludes uneventfully. and the constructor concludes uneventfully.
默认情况下，当注入器找不到想找的提供商时，会抛出一个错误。
但`@Optional`装饰器表示找不到该服务也无所谓。
于是注入器会返回`null`，`parentModule`参数也就被赋成了空值，而构造函数没有任何异常。
It's a different story if you improperly import `CoreModule` into a lazy-loaded module such as `CustomersModule`. It's a different story if you improperly import `CoreModule` into a lazy-loaded module such as `CustomersModule`.
Angular creates a lazy-loaded module with its own injector, Angular creates a lazy-loaded module with its own injector,

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

@ -374,9 +374,6 @@ Its intended source is implicit.
Angular sets `let-hero` to the value of the context's `$implicit` property Angular sets `let-hero` to the value of the context's `$implicit` property
which `NgFor` has initialized with the hero for the current iteration. which `NgFor` has initialized with the hero for the current iteration.
上下文中的属性`let-hero`没有指定过，实际上它来自一个隐式变量。
Angular会把`let-hero`设置为上下文对象中的`$implicit`属性，`NgFor`会用当前迭代中的英雄初始化它。
* The [API guide](api/common/NgForOf "API: NgFor") * The [API guide](api/common/NgForOf "API: NgFor")
describes additional `NgFor` directive properties and context properties. describes additional `NgFor` directive properties and context properties.

22
aio/content/guide/styleguide.md
View File

@ -676,8 +676,6 @@ and reference assets of different types.
<a href="#toc">Back to top</a> <a href="#toc">Back to top</a>
<a href="#toc">回到顶部</a>
{@a 02-04} {@a 02-04}
### Service names ### Service names
@ -1063,8 +1061,6 @@ For example, the prefix `toh` represents from **T**our **o**f **H**eroes and the
<a href="#toc">Back to top</a> <a href="#toc">Back to top</a>
<a href="#toc">回到顶部</a>
{@a 02-09} {@a 02-09}
### Pipe names ### Pipe names
@ -1808,8 +1804,6 @@ It is rarely worth the effort to change them at the risk of breaking existing co
**Consider** using an interface for data models. **Consider** using an interface for data models.
**考虑**用类代替接口。
</div> </div>
<div class="s-why"> <div class="s-why">
@ -1917,8 +1911,6 @@ discourage the `I` prefix.
<a href="#toc">Back to top</a> <a href="#toc">Back to top</a>
<a href="#toc">回到顶部</a>
{@a 03-06} {@a 03-06}
### Import line spacing ### Import line spacing
@ -2007,8 +1999,6 @@ Use the naming conventions for files in this guide.
<a href="#toc">Back to top</a> <a href="#toc">Back to top</a>
<a href="#toc">回到顶部</a>
{@a 04-01} {@a 04-01}
### _LIFT_ ### _LIFT_
@ -2085,8 +2075,6 @@ A descriptive folder structure makes a world of difference to you and the people
<a href="#toc">Back to top</a> <a href="#toc">Back to top</a>
<a href="#toc">回到顶部</a>
{@a 04-03} {@a 04-03}
### Identify ### Identify
@ -2206,8 +2194,6 @@ Use a flatter structure until there is an obvious value to creating a new folder
<a href="#toc">Back to top</a> <a href="#toc">Back to top</a>
<a href="#toc">回到顶部</a>
{@a 04-05} {@a 04-05}
### _T-DRY_ (Try to be _DRY_) ### _T-DRY_ (Try to be _DRY_)
@ -3623,7 +3609,7 @@ A typical *lazy loaded folder* contains a *routing component*, its child compone
**Consider** giving components an _element_ selector, as opposed to _attribute_ or _class_ selectors. **Consider** giving components an _element_ selector, as opposed to _attribute_ or _class_ selectors.
**坚持**给组件一个*元素*选择器，而不是*属性*或*类*选择器。 **考虑**给组件一个*元素*选择器，而不是*属性*或*类*选择器。
</div> </div>
@ -3911,8 +3897,6 @@ and the directive name doesn't describe the property.
<a href="#toc">Back to top</a> <a href="#toc">Back to top</a>
<a href="#toc">回到顶部</a>
{@a 05-14} {@a 05-14}
### Member sequence ### Member sequence
@ -4094,8 +4078,6 @@ helps instantly identify which members of the component serve which purpose.
<a href="#toc">Back to top</a> <a href="#toc">Back to top</a>
<a href="#toc">回到顶部</a>
{@a 05-17} {@a 05-17}
### Put presentation logic in the component class ### Put presentation logic in the component class
@ -4190,8 +4172,6 @@ helps instantly identify which members of the component serve which purpose.
<a href="#toc">Back to top</a> <a href="#toc">Back to top</a>
<a href="#toc">回到顶部</a>
{@a 06-03} {@a 06-03}
### _HostListener_/_HostBinding_ decorators versus _host_ metadata ### _HostListener_/_HostBinding_ decorators versus _host_ metadata

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

@ -1631,6 +1631,8 @@ followed by a dot (`.`) and the name of a CSS style property: `[style.style-prop
Some style binding styles have a unit extension. Some style binding styles have a unit extension.
The following example conditionally sets the font size in “em” and “%” units . The following example conditionally sets the font size in “em” and “%” units .
有些样式绑定中的样式带有单位。在这里，以根据条件用 “em” 和 “%” 来设置字体大小的单位。
<code-example path="template-syntax/src/app/app.component.html" region="style-binding-2" title="src/app/app.component.html" linenums="false"> <code-example path="template-syntax/src/app/app.component.html" region="style-binding-2" title="src/app/app.component.html" linenums="false">
</code-example> </code-example>
@ -3032,13 +3034,9 @@ because events stream *out* of that property and toward the handler in a templat
从`HeroDetailComponent`角度来看，`HeroDetailComponent.deleteRequest`是个**输出**属性， 从`HeroDetailComponent`角度来看，`HeroDetailComponent.deleteRequest`是个**输出**属性，
因为事件从那个属性流*出*，流向模板绑定语句中的处理器。 因为事件从那个属性流*出*，流向模板绑定语句中的处理器。
<h3 id='aliasing-io'> <h3 id='aliasing-io'>Aliasing input/output properties</h3>
Aliasing input/output properties <h3 id='aliasing-io'>给输入/输出属性起别名</h3>
给输入/输出属性起别名
</h3>
Sometimes the public name of an input/output property should be different from the internal name. Sometimes the public name of an input/output property should be different from the internal name.

2
aio/content/guide/testing-observables.md
View File

@ -1,3 +1,5 @@
# Testing # Testing
# 测试
TBD. Original content [here](https://docs.google.com/document/d/1gGP5sqWNCHAWWV_GLdZQ1XyMO4K-CHksUxux0BFtVxk/edit#heading=h.ohqykkhzdhb2). TBD. Original content [here](https://docs.google.com/document/d/1gGP5sqWNCHAWWV_GLdZQ1XyMO4K-CHksUxux0BFtVxk/edit#heading=h.ohqykkhzdhb2).

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

File diff suppressed because it is too large Load Diff

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

@ -651,7 +651,7 @@ bootstrapping the AngularJS module.
For more information, see [NgModules](guide/ngmodules). For more information, see [NgModules](guide/ngmodules).
要了解Angular模块的更多信息，请参阅[Angular模块](guide/ngmodule)页。 要了解更多，请参阅[NgModules](guide/ngmodule)页。
</div> </div>
@ -1273,8 +1273,6 @@ compilation can pick it up.
You can then inject it in Angular using its class as a type annotation: You can then inject it in Angular using its class as a type annotation:
然后我们可以一个字符串型令牌，把它注入到Angular中：
<code-example path="upgrade-module/src/app/ajs-to-a-providers/hero-detail.component.ts" title="hero-detail.component.ts"> <code-example path="upgrade-module/src/app/ajs-to-a-providers/hero-detail.component.ts" title="hero-detail.component.ts">
</code-example> </code-example>

72
aio/content/guide/visual-studio-2015.md
View File

@ -46,13 +46,9 @@ Note that the resulting code does not map to the docs. Adjust accordingly.
</div> </div>
<h2 id='prereq1'> <h2 id='prereq1'>Prerequisite: Node.js</h2>
Prerequisite: Node.js <h2 id='prereq1'>前提条件: Node.js</h2>
前提条件: Node.js
</h2>
Install **[Node.js® and npm](https://nodejs.org/en/download/)** Install **[Node.js® and npm](https://nodejs.org/en/download/)**
if they are not already on your machine. if they are not already on your machine.
@ -69,13 +65,9 @@ Older versions produce errors.
</div> </div>
<h2 id='prereq2'> <h2 id='prereq2'>Prerequisite: Visual Studio 2015 Update 3</h2>
Prerequisite: Visual Studio 2015 Update 3 <h2 id='prereq2'>前提条件: Visual Studio 2015 Update 3</h2>
前提条件: Visual Studio 2015 Update 3
</h2>
The minimum requirement for developing Angular applications with Visual Studio is Update 3. The minimum requirement for developing Angular applications with Visual Studio is Update 3.
Earlier versions do not follow the best practices for developing applications with TypeScript. Earlier versions do not follow the best practices for developing applications with TypeScript.
@ -90,13 +82,9 @@ Or use `Tools | Extensions and Updates` to update to Update 3 directly from Visu
如果还没有，安装**[Visual Studio 2015 Update 3](https://www.visualstudio.com/en-us/news/releasenotes/vs2015-update3-vs)**。或者使用`Tools | Extensions and Updates`来直接在Visual Studio 2015中更新到Update 3。 如果还没有，安装**[Visual Studio 2015 Update 3](https://www.visualstudio.com/en-us/news/releasenotes/vs2015-update3-vs)**。或者使用`Tools | Extensions and Updates`来直接在Visual Studio 2015中更新到Update 3。
<h2 id='prereq3'> <h2 id='prereq3'>Prerequisite: Configure External Web tools</h2>
Prerequisite: Configure External Web tools <h2 id='prereq3'>前提条件: 配置External Web tools</h2>
前提条件: 配置External Web tools
</h2>
Configure Visual Studio to use the global external web tools instead of the tools that ship with Visual Studio: Configure Visual Studio to use the global external web tools instead of the tools that ship with Visual Studio:
@ -129,13 +117,9 @@ find them in either location, it will use its own versions of the tools.
Visual Studio将优先在当前的工作区查找外部工具，如果没有找到，便查找全局路径，如果还没有找到，Visual Studio就使用自带的工具版本。 Visual Studio将优先在当前的工作区查找外部工具，如果没有找到，便查找全局路径，如果还没有找到，Visual Studio就使用自带的工具版本。
<h2 id='prereq4'> <h2 id='prereq4'>Prerequisite: Install TypeScript 2.2 for Visual Studio 2015</h2>
Prerequisite: Install TypeScript 2.2 for Visual Studio 2015 <h2 id='prereq4'>前提条件: 安装TypeScript 2.2 for Visual Studio 2015</h2>
前提条件: 安装TypeScript 2.2 for Visual Studio 2015
</h2>
While Visual Studio Update 3 ships with TypeScript support out of the box, it currently doesn’t ship with TypeScript 2.2, While Visual Studio Update 3 ships with TypeScript support out of the box, it currently doesn’t ship with TypeScript 2.2,
which you need to develop Angular applications. which you need to develop Angular applications.
@ -163,26 +147,18 @@ restart it to make sure everything is clean.
至此，Visual Studio准备好了。重新启动Visual Stuido，这样我们可以有一个崭新的开始。 至此，Visual Studio准备好了。重新启动Visual Stuido，这样我们可以有一个崭新的开始。
<h2 id='download'> <h2 id='download'>Step 1: Download the QuickStart files</h2>
Step 1: Download the QuickStart files <h2 id='download'>第一步: 现在“快速上手”文件</h2>
第一步: 现在“快速上手”文件
</h2>
[Download the QuickStart source](https://github.com/angular/quickstart) [Download the QuickStart source](https://github.com/angular/quickstart)
from GitHub. If you downloaded as a zip file, extract the files. from GitHub. If you downloaded as a zip file, extract the files.
从GitHub[下载“快速上手”的源代码](https://github.com/angular/quickstart)。如果下载的是一个压缩的zip文件，解压它。 从GitHub[下载“快速上手”的源代码](https://github.com/angular/quickstart)。如果下载的是一个压缩的zip文件，解压它。
<h2 id='create-project'> <h2 id='create-project'>Step 2: Create the Visual Studio ASP.NET project</h2>
Step 2: Create the Visual Studio ASP.NET project <h2 id='create-project'>第二步：创建Visual Studio ASP.net项目</h2>
第二步：创建Visual Studio ASP.net项目
</h2>
Create the ASP.NET 4.x project in the usual way as follows: Create the ASP.NET 4.x project in the usual way as follows:
@ -213,13 +189,9 @@ no authentication, and no hosting. Pick the template and options appropriate for
</div> </div>
<h2 id='copy'> <h2 id='copy'>Step 3: Copy the QuickStart files into the ASP.NET project folder</h2>
Step 3: Copy the QuickStart files into the ASP.NET project folder <h2 id='copy'>第三步: 把“快速上手”的文件复制到ASP.NET项目所在的目录</h2>
第三步: 把“快速上手”的文件复制到ASP.NET项目所在的目录
</h2>
Copy the QuickStart files you downloaded from GitHub into the folder containing the `.csproj` file. Copy the QuickStart files you downloaded from GitHub into the folder containing the `.csproj` file.
Include the files in the Visual Studio project as follows: Include the files in the Visual Studio project as follows:
@ -248,13 +220,9 @@ Include the files in the Visual Studio project as follows:
* src/tsconfig.json * src/tsconfig.json
<h2 id='restore'> <h2 id='restore'>Step 4: Restore the required packages</h2>
Step 4: Restore the required packages <h2 id='restore'> 第四步: 恢复需要的包 </h2>
第四步: 恢复需要的包
</h2>
Restore the packages required for an Angular application as follows: Restore the packages required for an Angular application as follows:
@ -289,13 +257,9 @@ Restore the packages required for an Angular application as follows:
**不要**将`node_modules`目录添加到项目中，让它隐藏。 **不要**将`node_modules`目录添加到项目中，让它隐藏。
<h2 id='build-and-run'> <h2 id='build-and-run'>Step 5: Build and run the app</h2>
Step 5: Build and run the app <h2 id='build-and-run'>第五步：构建和运行应用</h2>
第五步：构建和运行应用
</h2>
First, ensure that `src/index.html` is set as the start page. First, ensure that `src/index.html` is set as the start page.
Right-click `index.html` in Solution Explorer and select option `Set As Start Page`. Right-click `index.html` in Solution Explorer and select option `Set As Start Page`.

20
aio/content/marketing/docs.md
View File

@ -1,5 +1,7 @@
<h1 class="no-toc">What is Angular?</h1> <h1 class="no-toc">What is Angular?</h1>
<h1 class="no-toc">什么是 Angular？</h1>
Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop
Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到端工具和一些最佳实践于一身，为你解决开发方面的各种挑战。Angular 为开发者提升构建 Web、手机或桌面应用的能力。 Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到端工具和一些最佳实践于一身，为你解决开发方面的各种挑战。Angular 为开发者提升构建 Web、手机或桌面应用的能力。
@ -11,48 +13,30 @@ Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angu
<section>Get a Glimpse of Angular</section> <section>Get a Glimpse of Angular</section>
<section>Angular 走马观花</section>
<p>A quick look at an Angular "hello world" application.</p> <p>A quick look at an Angular "hello world" application.</p>
<p>快速体验 Angular 的 "hello world" 应用。</p>
<p class="card-footer">Angular in Action</p> <p class="card-footer">Angular in Action</p>
<p class="card-footer">体验 Angular</p>
</a> </a>
<a href="guide/quickstart" class="docs-card" title="Angular Quickstart"> <a href="guide/quickstart" class="docs-card" title="Angular Quickstart">
<section>Get Going with Angular</section> <section>Get Going with Angular</section>
<section>开始使用 Angular</section>
<p>Get going on your own environment with the Quickstart.</p> <p>Get going on your own environment with the Quickstart.</p>
<p>跟随"快速上手"构建你的开发环境</p>
<p class="card-footer">Quickstart</p> <p class="card-footer">Quickstart</p>
<p class="card-footer">快速上手</p>
</a> </a>
<a href="guide/architecture" class="docs-card" title="Angular Architecture"> <a href="guide/architecture" class="docs-card" title="Angular Architecture">
<section>Fundamentals</section> <section>Fundamentals</section>
<section>基本原理</section>
<p>Learn Angular application fundamentals, starting with an architecture overview.</p> <p>Learn Angular application fundamentals, starting with an architecture overview.</p>
<p>学习 Angular 应用的基本原理。<br/>从架构概览开始。</p>
<p class="card-footer">Architecture</p> <p class="card-footer">Architecture</p>
<p class="card-footer">架构</p>
</a> </a>
</div> </div>

2
aio/content/tutorial/toh-pt6.md
View File

@ -186,6 +186,8 @@ method included in the sample source code.
### Error handling ### Error handling
### 错误处理
Things go wrong, especially when you're getting data from a remote server. Things go wrong, especially when you're getting data from a remote server.
The `HeroService.getHeroes()` method should catch errors and do something appropriate. The `HeroService.getHeroes()` method should catch errors and do something appropriate.