diff --git a/public/docs/js/latest/cookbook/ts-to-js.jade b/public/docs/js/latest/cookbook/ts-to-js.jade index f4f6e43213..c3057e560f 100644 --- a/public/docs/js/latest/cookbook/ts-to-js.jade +++ b/public/docs/js/latest/cookbook/ts-to-js.jade @@ -225,7 +225,7 @@ table(width="100%") attached to provide configuration and metadata. For example, a component must have a [`@Component`](../api/core/Component-decorator.html) decorator. - 大部分Angular 2的类都有一个或者多个附加的TypeScript*装饰器*,用来提供配置和元数据。比如一个组件必须要有一个[`@Component`](../api/core/Component-decorator.html)装饰器。 + 大部分Angular 2的类都有一个或者多个附加的TypeScript*装饰器*,用来提供配置和元数据。比如一个组件必须要有一个[`@Component`](../api/core/index/Component-decorator.html)装饰器。 +makeExample('cb-ts-to-js/ts/app/hero.component.ts', 'metadata')(format="." ) @@ -244,7 +244,7 @@ table(width="100%") In the following example, we create a new instance of `Component` that corresponds to the [`@Component`](../api/core/Component-decorator.html) TypeScript decorator. - 在下面的例子中,我们新建了一个`Component`的新实例,与[`@Component`](../api/core/Component-decorator.html)TypeScript装饰器对应。 + 在下面的例子中,我们新建了一个`Component`的新实例,与[`@Component`](../api/core/index/Component-decorator.html)TypeScript装饰器对应。 +makeExample('cb-ts-to-js/js/app/hero.component.js', 'metadata')(format="." ) @@ -361,7 +361,7 @@ table(width="100%") They may optionally specify input and output binding names if we want them to be different from the class property names. - 我们使用[`@Input`](../api/core/Input-var.html) 和 [`@Output`](../api/core/Output-var.html)装饰器 + 我们使用[`@Input`](../api/core/index/Input-var.html) 和 [`@Output`](../api/core/index/Output-var.html)装饰器 来装饰[输入和输出](../guide/template-syntax.html#inputs-outputs)。 如果想要他们有与类属性名字不同的名字,我们可以选择性的指定输入和输出的绑定名字。 @@ -501,9 +501,9 @@ table(width="100%") inject content child queries with [`@Query`](../api/core/Query-var.html) and inject view child queries with [`@ViewQuery`](../api/core/ViewQuery-var.html). - 我们可以附加额外装饰器到构造函数来调整注入行为。我们使用[`@Optional`](../api/core/Optional-var.html)来标示依赖是可选的, - 用[`@Attribute`](../api/core/Attribute-var.html)标示注入宿主元素属性, - 用[`@Query`](../api/core/Query-var.html)来注入内容子查询,用[`@ViewQuery`](../api/core/ViewQuery-var.html)来注入视图子查询。 + 我们可以附加额外装饰器到构造函数来调整注入行为。我们使用[`@Optional`](../api/core/index/Optional-var.html)来标示依赖是可选的, + 用[`@Attribute`](../api/core/index/Attribute-var.html)标示注入宿主元素属性, + 用[`@Query`](../api/core/index/Query-var.html)来注入内容子查询,用[`@ViewQuery`](../api/core/index/ViewQuery-var.html)来注入视图子查询。 +makeExample('cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts')(format="." ) @@ -537,8 +537,8 @@ table(width="100%") by adding `new ng.core.Host()` or `ng.core.SkipSelf()` in the parameters array. - 我们可以用同样的方法来应用其他额外的参数装饰器,比如[`@Host`](../api/core/Host-var.html) 和 - [`@SkipSelf`](../api/core/SkipSelf-var.html):添加`new ng.core.Host()` 或 `ng.core.SkipSelf()`到参数数组中。 + 我们可以用同样的方法来应用其他额外的参数装饰器,比如[`@Host`](../api/core/index/Host-var.html) 和 + [`@SkipSelf`](../api/core/index/SkipSelf-var.html):添加`new ng.core.Host()` 或 `ng.core.SkipSelf()`到参数数组中。 a(id="other-property-metadata") @@ -570,8 +570,8 @@ table(width="100%") host element events to component event handlers. 我们可以使用宿主属性装饰器来绑定一个宿主元素到一个组件或者指令。 - [`@HostBinding`](../api/core/HostBinding-var.html)装饰器绑定宿主元素属性到组件数据属性。 - [`@HostListener`](../api/core/HostListener-var.html)装饰器绑定宿主元素事件到组件事件处理器。 + [`@HostBinding`](../api/core/index/HostBinding-var.html)装饰器绑定宿主元素属性到组件数据属性。 + [`@HostListener`](../api/core/index/HostListener-var.html)装饰器绑定宿主元素事件到组件事件处理器。 +makeExample('cb-ts-to-js/ts/app/heroes-bindings.component.ts')(format="." ) @@ -624,8 +624,8 @@ table(width="100%") allow a component to query instances of other components that are used in its view. - [`@ViewChild`](../api/core/ViewChild-var.html)和 - [`@ViewChildren`](../api/core/ViewChildren-var.html)属性装饰器允许一个组件查询 + [`@ViewChild`](../api/core/index/ViewChild-var.html)和 + [`@ViewChildren`](../api/core/index/ViewChildren-var.html)属性装饰器允许一个组件查询 在自己模板里使用过的其他组件的实例。 @@ -637,8 +637,8 @@ table(width="100%") allow a component to query instances of other components that have been projected into its view from elsewhere. - [`@ContentChild`](../api/core/ContentChild-var.html) 和 - [`@ContentChildren`](../api/core/ContentChildren-var.html)属性装饰器允许一个组件查询那些被从其它地方投影进自己视图里的组件的实例。 + [`@ContentChild`](../api/core/index/ContentChild-var.html) 和 + [`@ContentChildren`](../api/core/index/ContentChildren-var.html)属性装饰器允许一个组件查询那些被从其它地方投影进自己视图里的组件的实例。 +makeExample('cb-ts-to-js/ts/app/heroes-queries.component.ts', 'content')(format="." ) diff --git a/public/docs/ts/latest/guide/forms.jade b/public/docs/ts/latest/guide/forms.jade index 1309687091..bea9a62ea0 100644 --- a/public/docs/ts/latest/guide/forms.jade +++ b/public/docs/ts/latest/guide/forms.jade @@ -668,7 +668,7 @@ figure.image-display There is also a `NgControl` *abstract* directive which is *not the same thing*. We often ignore this technical distinction and refer to `NgControlName` more conveniently (albeit incorrectly) as the *NgControl* directive. - 我们模板中的这个`ngControl`*属性*实际上被映射到了 [NgControlName](../api/common/NgControlName-directive.html)指令。 + 我们模板中的这个`ngControl`*属性*实际上被映射到了 [NgControlName](../api/common/index/NgControlName-directive.html)指令。 虽然还有另一个叫`NgControl`的*抽象*指令,但和这个属性不是一回事。 我们通常会忽略这点技术上的差异。为了更方便(尽管不正确),我们提起`NgControlName`时还是会把它叫做*NgControl*指令。 @@ -861,7 +861,7 @@ figure.image-display We set `name` to `ngForm` because the `NgControlName` directive's `exportAs` property happens to be "ngForm". 为什么是"ngForm"? - 指令的[exportAs](../api/core/DirectiveMetadata-class.html#!#exportAs)属性告诉Angular如何把局部变量链接到指令中。 + 指令的[exportAs](../api/core/index/DirectiveMetadata-class.html#!#exportAs)属性告诉Angular如何把局部变量链接到指令中。 这里我们把`name`设置为`ngForm`就是因为`NgControlName`指令的`exportAs`属性设置为了“ngForm”。 This seems unintuitive at first until we realize that *all* control directives in the @@ -1038,7 +1038,7 @@ figure.image-display What `NgForm` directive? We didn't add an [NgForm](../api/common/NgForm-directive.html) directive! - 什么`NgForm`指令?我们没有添加过[NgForm](../api/common/NgForm-directive.html)指令啊! + 什么`NgForm`指令?我们没有添加过[NgForm](../api/common/index/NgForm-directive.html)指令啊! Angular did. Angular creates and attaches an `NgForm` directive to the `
` tag automatically. diff --git a/public/docs/ts/latest/guide/lifecycle-hooks.jade b/public/docs/ts/latest/guide/lifecycle-hooks.jade index 8ce97b1449..c2b5f3a1e8 100644 --- a/public/docs/ts/latest/guide/lifecycle-hooks.jade +++ b/public/docs/ts/latest/guide/lifecycle-hooks.jade @@ -659,7 +659,7 @@ figure.image-display [SimpleChange](../api/core/SimpleChange-class.html) object with the current and previous property values. We iterate over the changed properties and log them. - `ngOnChanges`方法获取了一个对象,它把每个发生变化的属性名都映射到了一个[SimpleChange](../api/core/SimpleChange-class.html)对象, + `ngOnChanges`方法获取了一个对象,它把每个发生变化的属性名都映射到了一个[SimpleChange](../api/core/index/SimpleChange-class.html)对象, 该对象中有属性的当前值和前一个值。我们在这些发生了变化的属性上进行迭代,并记录它们。 The input properties for our example `OnChangesComponent` are `hero` and `power`. @@ -755,7 +755,7 @@ figure.image-display We also see that the `ngOnChanges` method is called in contradiction of the [incorrect API documentation](../api/core/DoCheck-interface.html). - 我们还看到,`ngOnChanges`方法的调用方式与[API文档](../api/core/DoCheck-interface.html)中是不一样的,这是因为API文档过时了。 + 我们还看到,`ngOnChanges`方法的调用方式与[API文档](../api/core/index/DoCheck-interface.html)中是不一样的,这是因为API文档过时了。 (译注:这是经过与官方开发组沟通得到的消息,由于代码快速迭代,因此API文档现在的更新不够及时,将来会进行一次系统的梳理和更正) .l-main-section :marked @@ -779,7 +779,7 @@ figure.image-display which we can only reach by querying for the child view via the property decorated with [@ViewChild](../api/core/ViewChild-var.html). - 下列钩子基于*子视图中*的每一次数据变更采取行动,我们只能通过带[@ViewChild](../api/core/ViewChild-var.html)装饰器的属性来访问子视图。 + 下列钩子基于*子视图中*的每一次数据变更采取行动,我们只能通过带[@ViewChild](../api/core/index/ViewChild-var.html)装饰器的属性来访问子视图。 +makeExample('lifecycle-hooks/ts/app/after-view.component.ts', 'hooks', 'AfterViewComponent (class excerpts)')(format=".") .a(id="wait-a-tick") @@ -908,7 +908,7 @@ figure.image-display which we can only reach by querying for it via the property decorated with [@ContentChild](../api/core/ContentChild-var.html). - 下列*AfterContent*钩子基于*子级内容*中值的变化而采取相应的行动,这里我们只能通过带有[@ContentChild](../api/core/ContentChild-var.html)装饰器的属性来查询到“子级内容”。 + 下列*AfterContent*钩子基于*子级内容*中值的变化而采取相应的行动,这里我们只能通过带有[@ContentChild](../api/core/index/ContentChild-var.html)装饰器的属性来查询到“子级内容”。 +makeExample('lifecycle-hooks/ts/app/after-content.component.ts', 'hooks', 'AfterContentComponent (class excerpts)')(format=".") diff --git a/public/docs/ts/latest/guide/pipes.jade b/public/docs/ts/latest/guide/pipes.jade index 1a8ad3db09..5fd54351aa 100644 --- a/public/docs/ts/latest/guide/pipes.jade +++ b/public/docs/ts/latest/guide/pipes.jade @@ -61,7 +61,7 @@ p. function on the right. All pipes work this way. 在这个插值表达式中,我们让组件的`birthday`值通过[管道操作符](./template-syntax.html#pipe)( | )流动到 - 右侧的[Date管道](../api/common/DatePipe-class.html)函数中。所有管道都会用这种方式工作。 + 右侧的[Date管道](../api/common/index/DatePipe-class.html)函数中。所有管道都会用这种方式工作。 .l-main-section :marked @@ -147,7 +147,7 @@ figure.image-display :marked Learn more about the `DatePipes` format options in the [API Docs](../api/common/DatePipe-class.html). - 要了解更多`DatePipes`的格式选项,请参阅[API文档](../api/common/DatePipe-class.html)。 + 要了解更多`DatePipes`的格式选项,请参阅[API文档](../api/common/index/DatePipe-class.html)。 :marked ## Chaining pipes @@ -640,7 +640,7 @@ figure.image-display provides an easy way to diagnosis a mysteriously failing data binding or inspect an object for future binding. - [JsonPipe](../api/common/JsonPipe-class.html)为你诊断数据绑定的某些神秘错误或为做进一步绑定而探查数据时,提供了一个简单途径。 + [JsonPipe](../api/common/index/JsonPipe-class.html)为你诊断数据绑定的某些神秘错误或为做进一步绑定而探查数据时,提供了一个简单途径。 :marked Here's the complete component implementation: diff --git a/public/docs/ts/latest/guide/server-communication.jade b/public/docs/ts/latest/guide/server-communication.jade index d2dd396947..b36f6e9516 100644 --- a/public/docs/ts/latest/guide/server-communication.jade +++ b/public/docs/ts/latest/guide/server-communication.jade @@ -629,7 +629,7 @@ code-example(format="." language="javascript"). [Headers](../api/http/Headers-class.html) are one of the [RequestOptions](../api/http/RequestOptions-class.html). Compose the options object and pass it in as the *third* parameter of the `post` method, as shown above. - [Headers](../api/http/Headers-class.html)是[RequestOptions](../api/http/RequestOptions-class.html)中的一员。 + [Headers](../api/http/index/Headers-class.html)是[RequestOptions](../api/http/index/RequestOptions-class.html)中的一员。 可以把这些配置对象组合起来,并且传给`post`方法的*第三个*参数,就像前面见过的那样。 :marked diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade index c770419d07..67d40d272d 100644 --- a/public/docs/ts/latest/guide/template-syntax.jade +++ b/public/docs/ts/latest/guide/template-syntax.jade @@ -840,8 +840,8 @@ table [contentChild](../api/core/ContentChild-var.html). 如果我们不得不读取目标元素上的属性或调用它的某个方法,我们得用另一种技术。 - 参见API参考中的[viewChild](../api/core/ViewChild-var.html)和 - [contentChild](../api/core/ContentChild-var.html)。 + 参见API参考中的[viewChild](../api/core/index/ViewChild-var.html)和 + [contentChild](../api/core/index/ContentChild-var.html)。 // TODO (global): once we have api docs everywhere, change /docs/ts/latest/ to ../ @@ -1315,7 +1315,7 @@ block style-property-name-dart-diff The directive calls `EventEmitter.emit(payload)` to fire an event, passing in a message payload that can be anything. Parent directives listen for the event by binding to this property and accessing the payload through the `$event` object. - 指令使用典型的Angular [EventEmitter](../api/core/EventEmitter-class.html)来触发自定义事件。 + 指令使用典型的Angular [EventEmitter](../api/core/index/EventEmitter-class.html)来触发自定义事件。 指令创建一个`EventEmitter`实例,并且把它作为一个属性暴露出来。 指令调用`EventEmitter.emit(payload)`来触发事件,传进去的消息载荷可以是任何东西。 父指令通过绑定到这个属性来监听这个事件,并且通过`$event`对象来访问这个载荷。 @@ -1461,7 +1461,7 @@ block style-property-name-dart-diff a technique that is beyond the scope of this chapter. `ngModel`输入属性设置元素的值属性,而`ngModelChange`输出属性监听元素值的变化。 - 实现细节对每种元素都很特定,所以`NgModel`指令只和元素一起工作,比如输入框,它由[ControlValueAccessor](../api/common/ControlValueAccessor-interface.html)提供支持。 + 实现细节对每种元素都很特定,所以`NgModel`指令只和元素一起工作,比如输入框,它由[ControlValueAccessor](../api/common/index/ControlValueAccessor-interface.html)提供支持。 除非写一个合适的*值访问器*,否则我们不能把`[(ngModel)]`用在我们自己的自定义组件上。但*值访问器*技术超出了本章的范围。 :marked Separate `ngModel` bindings is an improvement. We can do better. @@ -1854,7 +1854,7 @@ block dart-no-truthy-falsey :marked Learn about other special *index-like* values such as `last`, `even`, and `odd` in the [NgFor API reference](../api/common/NgFor-directive.html). - 要学习更多的*类似index*的值,例如`last`、`even`和`odd`,请参阅[NgFor API 参考](../api/common/NgFor-directive.html)。 + 要学习更多的*类似index*的值,例如`last`、`even`和`odd`,请参阅[NgFor API 参考](../api/common/index/NgFor-directive.html)。 :marked #### NgForTrackBy diff --git a/public/docs/ts/latest/guide/upgrade.jade b/public/docs/ts/latest/guide/upgrade.jade index 612c0ed1b4..af91634dac 100644 --- a/public/docs/ts/latest/guide/upgrade.jade +++ b/public/docs/ts/latest/guide/upgrade.jade @@ -577,7 +577,7 @@ figure.image-display or anything like it. 在Angular 2中,事情有点不一样。虽然变更检测仍然会在每一个事件之后发生,却不再需要每次调用`scope.$apply()`了。 - 这是因为所有Angular 2代码都运行在一个叫做[Angular zone](../api/core/NgZone-class.html)的地方。 + 这是因为所有Angular 2代码都运行在一个叫做[Angular zone](../api/core/index/NgZone-class.html)的地方。 Angular总是知道什么时候代码执行完了,也就知道了它什么时候应该触发变更检测。代码本身并不需要调用`scope.$apply()`或其它类似的东西。 In the case of hybrid applications, the `UpgradeAdapter` bridges the @@ -621,7 +621,7 @@ figure.image-display just like we could if it hadn't been downgraded. 当我们降级一个Angular 2组件,然后把它用于Angular 1中时,组件的输入属性就会被Angular 1的变更检测体系监视起来。 - 当那些输入属性发生变化时,组件中相应的属性就会被设置。我们也能通过实现[OnChanges](../api/core/OnChanges-interface.html) + 当那些输入属性发生变化时,组件中相应的属性就会被设置。我们也能通过实现[OnChanges](../api/core/index/OnChanges-interface.html) 接口来挂钩到这些更改,就像它未被降级时一样。 Correspondingly, when we upgrade an Angular 1 component and use it from Angular 2, diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade index 8a42e6efbb..2afc5194b2 100644 --- a/public/docs/ts/latest/tutorial/toh-pt5.jade +++ b/public/docs/ts/latest/tutorial/toh-pt5.jade @@ -754,7 +754,7 @@ code-example(format=''). 回退太多步儿会跑出我们的应用。 在Demo中,这算不上问题。但在真实的应用中,我们需要对此进行防范。 - 也许你该用[*routerCanDeactivate*钩子](/docs/ts/latest/api/router/CanDeactivate-interface.html)。 + 也许你该用[*routerCanDeactivate*钩子](/docs/ts/latest/api/router/index/CanDeactivate-interface.html)。 :marked Then we wire this method with an event binding to a *Back* button that we add to the bottom of the component template.