fix(doc): fix 404 problem of some api url
This commit is contained in:
parent
e6655fa627
commit
b21c90c358
@ -155,7 +155,7 @@ table(width="100%")
|
|||||||
|
|
||||||
Most Angular 2 classes have one or more TypeScript *decorators*
|
Most Angular 2 classes have one or more TypeScript *decorators*
|
||||||
attached to provide configuration and metadata. For example,
|
attached to provide configuration and metadata. For example,
|
||||||
a component must have a [`@Component`](../api/core/Component-decorator.html) decorator.
|
a component must have a [`@Component`](../api/core/index/Component-decorator.html) decorator.
|
||||||
|
|
||||||
+makeExample('cb-ts-to-js/ts/app/hero.component.ts', 'metadata')(format="." )
|
+makeExample('cb-ts-to-js/ts/app/hero.component.ts', 'metadata')(format="." )
|
||||||
|
|
||||||
@ -168,7 +168,7 @@ table(width="100%")
|
|||||||
Each item in the array corresponds to a TypeScript decorator.
|
Each item in the array corresponds to a TypeScript decorator.
|
||||||
|
|
||||||
In the following example, we create a new instance of `Component` that corresponds
|
In the following example, we create a new instance of `Component` that corresponds
|
||||||
to the [`@Component`](../api/core/Component-decorator.html) TypeScript decorator.
|
to the [`@Component`](../api/core/index/Component-decorator.html) TypeScript decorator.
|
||||||
|
|
||||||
+makeExample('cb-ts-to-js/js/app/hero.component.js', 'metadata')(format="." )
|
+makeExample('cb-ts-to-js/js/app/hero.component.js', 'metadata')(format="." )
|
||||||
|
|
||||||
@ -252,8 +252,8 @@ table(width="100%")
|
|||||||
for components and directives.
|
for components and directives.
|
||||||
|
|
||||||
For [inputs and outputs](../guide/template-syntax.html#inputs-outputs),
|
For [inputs and outputs](../guide/template-syntax.html#inputs-outputs),
|
||||||
we use [`@Input`](../api/core/Input-var.html)
|
we use [`@Input`](../api/core/index/Input-var.html)
|
||||||
and [`@Output`](../api/core/Output-var.html) property decorators.
|
and [`@Output`](../api/core/index/Output-var.html) property decorators.
|
||||||
They may optionally specify input and output binding names if we want them to be
|
They may optionally specify input and output binding names if we want them to be
|
||||||
different from the class property names.
|
different from the class property names.
|
||||||
|
|
||||||
@ -351,10 +351,10 @@ table(width="100%")
|
|||||||
|
|
||||||
We can attach additional decorators to constructor parameters
|
We can attach additional decorators to constructor parameters
|
||||||
to qualify the injection behavior. We can mark
|
to qualify the injection behavior. We can mark
|
||||||
optional dependencies with the [`@Optional`](../api/core/Optional-var.html),
|
optional dependencies with the [`@Optional`](../api/core/index/Optional-var.html),
|
||||||
inject host element attributes with [`@Attribute`](../api/core/Attribute-var.html),
|
inject host element attributes with [`@Attribute`](../api/core/index/Attribute-var.html),
|
||||||
inject content child queries with [`@Query`](../api/core/Query-var.html)
|
inject content child queries with [`@Query`](../api/core/index/Query-var.html)
|
||||||
and inject view child queries with [`@ViewQuery`](../api/core/ViewQuery-var.html)).
|
and inject view child queries with [`@ViewQuery`](../api/core/index/ViewQuery-var.html)).
|
||||||
|
|
||||||
+makeExample('cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts')(format="." )
|
+makeExample('cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts')(format="." )
|
||||||
|
|
||||||
@ -374,8 +374,8 @@ table(width="100%")
|
|||||||
|
|
||||||
:marked
|
:marked
|
||||||
We can apply other additional parameter decorators such as
|
We can apply other additional parameter decorators such as
|
||||||
[`@Host`](../api/core/Host-var.html) and
|
[`@Host`](../api/core/index/Host-var.html) and
|
||||||
[`@SkipSelf`](../api/core/SkipSelf-var.html) in the same way -
|
[`@SkipSelf`](../api/core/index/SkipSelf-var.html) in the same way -
|
||||||
by adding `new ng.core.Host()` or `ng.core.SkipSelf()` in the
|
by adding `new ng.core.Host()` or `ng.core.SkipSelf()` in the
|
||||||
parameters array.
|
parameters array.
|
||||||
|
|
||||||
@ -399,9 +399,9 @@ table(width="100%")
|
|||||||
### Host Decorators
|
### Host Decorators
|
||||||
|
|
||||||
We can use host property decorators to bind a host element to a component or directive.
|
We can use host property decorators to bind a host element to a component or directive.
|
||||||
The [`@HostBinding`](../api/core/HostBinding-var.html) decorator
|
The [`@HostBinding`](../api/core/index/HostBinding-var.html) decorator
|
||||||
binds host element properties to component data properties.
|
binds host element properties to component data properties.
|
||||||
The [`@HostListener`](../api/core/HostListener-var.html) decorator bimds
|
The [`@HostListener`](../api/core/index/HostListener-var.html) decorator bimds
|
||||||
host element events to component event handlers.
|
host element events to component event handlers.
|
||||||
|
|
||||||
+makeExample('cb-ts-to-js/ts/app/heroes-bindings.component.ts')(format="." )
|
+makeExample('cb-ts-to-js/ts/app/heroes-bindings.component.ts')(format="." )
|
||||||
@ -433,16 +433,16 @@ table(width="100%")
|
|||||||
There are several property decorators for querying the descendants of
|
There are several property decorators for querying the descendants of
|
||||||
a component or directive.
|
a component or directive.
|
||||||
|
|
||||||
The [`@ViewChild`](../api/core/ViewChild-var.html) and
|
The [`@ViewChild`](../api/core/index/ViewChild-var.html) and
|
||||||
[`@ViewChildren`](../api/core/ViewChildren-var.html) property decorators
|
[`@ViewChildren`](../api/core/index/ViewChildren-var.html) property decorators
|
||||||
allow a component to query instances of other components that are used in
|
allow a component to query instances of other components that are used in
|
||||||
its view.
|
its view.
|
||||||
|
|
||||||
+makeExample('cb-ts-to-js/ts/app/heroes-queries.component.ts', 'view')(format="." )
|
+makeExample('cb-ts-to-js/ts/app/heroes-queries.component.ts', 'view')(format="." )
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
The [`@ContentChild`](../api/core/ContentChild-var.html) and
|
The [`@ContentChild`](../api/core/index/ContentChild-var.html) and
|
||||||
[`@ContentChildren`](../api/core/ContentChildren-var.html) property decorators
|
[`@ContentChildren`](../api/core/index/ContentChildren-var.html) property decorators
|
||||||
allow a component to query instances of other components that have been projected
|
allow a component to query instances of other components that have been projected
|
||||||
into its view from elsewhere.
|
into its view from elsewhere.
|
||||||
|
|
||||||
|
@ -758,7 +758,7 @@ block what-should-we-use-as-token
|
|||||||
There is no interface type information left for Angular to find at runtime.
|
There is no interface type information left for Angular to find at runtime.
|
||||||
|
|
||||||
//- FIXME simplify once APIs are defined for Dart.
|
//- FIXME simplify once APIs are defined for Dart.
|
||||||
- var opaquetoken = _docsFor == 'dart' ? '<b>OpaqueToken</b>' : '<a href="../api/core/OpaqueToken-class.html"><b>OpaqueToken</b></a>'
|
- var opaquetoken = _docsFor == 'dart' ? '<b>OpaqueToken</b>' : '<a href="../api/core/index/OpaqueToken-class.html"><b>OpaqueToken</b></a>'
|
||||||
:marked
|
:marked
|
||||||
### OpaqueToken
|
### OpaqueToken
|
||||||
|
|
||||||
|
@ -492,7 +492,7 @@ figure.image-display
|
|||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
Why "ngModel"?
|
Why "ngModel"?
|
||||||
A directive's [exportAs](../api/core/DirectiveMetadata-class.html#!#exportAs) property
|
A directive's [exportAs](../api/core/index/DirectiveMetadata-class.html#!#exportAs-anchor) property
|
||||||
tells Angular how to link the reference variable to the directive.
|
tells Angular how to link the reference variable to the directive.
|
||||||
We set `name` to `ngModel` because the `ngModel` directive's `exportAs` property happens to be "ngModel".
|
We set `name` to `ngModel` because the `ngModel` directive's `exportAs` property happens to be "ngModel".
|
||||||
|
|
||||||
|
@ -403,7 +403,7 @@ figure.image-display
|
|||||||
+makeExample('lifecycle-hooks/ts/app/on-changes.component.ts', 'ng-on-changes', 'OnChangesComponent (ngOnChanges)')(format=".")
|
+makeExample('lifecycle-hooks/ts/app/on-changes.component.ts', 'ng-on-changes', 'OnChangesComponent (ngOnChanges)')(format=".")
|
||||||
:marked
|
:marked
|
||||||
The `ngOnChanges` method takes an object that maps each changed property name to a
|
The `ngOnChanges` method takes an object that maps each changed property name to a
|
||||||
[SimpleChange](../api/core/SimpleChange-class.html) object with the current and previous property values.
|
[SimpleChange](../api/core/index/SimpleChange-class.html) object with the current and previous property values.
|
||||||
We iterate over the changed properties and log them.
|
We iterate over the changed properties and log them.
|
||||||
|
|
||||||
The input properties for our example `OnChangesComponent` are `hero` and `power`.
|
The input properties for our example `OnChangesComponent` are `hero` and `power`.
|
||||||
@ -462,7 +462,7 @@ figure.image-display
|
|||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
We also see that the `ngOnChanges` method is called in contradiction of the
|
We also see that the `ngOnChanges` method is called in contradiction of the
|
||||||
[incorrect API documentation](../api/core/DoCheck-interface.html).
|
[incorrect API documentation](../api/core/index/DoCheck-class.html).
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
@ -478,7 +478,7 @@ figure.image-display
|
|||||||
:marked
|
:marked
|
||||||
The following hooks take action based on changing values *within the child view*
|
The following hooks take action based on changing values *within the child view*
|
||||||
which we can only reach by querying for the child view via the property decorated with
|
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/index/ViewChild-var.html).
|
||||||
|
|
||||||
+makeExample('lifecycle-hooks/ts/app/after-view.component.ts', 'hooks', 'AfterViewComponent (class excerpts)')(format=".")
|
+makeExample('lifecycle-hooks/ts/app/after-view.component.ts', 'hooks', 'AfterViewComponent (class excerpts)')(format=".")
|
||||||
.a(id="wait-a-tick")
|
.a(id="wait-a-tick")
|
||||||
@ -559,7 +559,7 @@ figure.image-display
|
|||||||
|
|
||||||
The following *AfterContent* hooks take action based on changing values in a *content child*
|
The following *AfterContent* hooks take action based on changing values in a *content child*
|
||||||
which we can only reach by querying for it via the property decorated with
|
which we can only reach by querying for it via the property decorated with
|
||||||
[@ContentChild](../api/core/ContentChild-var.html).
|
[@ContentChild](../api/core/index/ContentChild-var.html).
|
||||||
|
|
||||||
+makeExample('lifecycle-hooks/ts/app/after-content.component.ts', 'hooks', 'AfterContentComponent (class excerpts)')(format=".")
|
+makeExample('lifecycle-hooks/ts/app/after-content.component.ts', 'hooks', 'AfterContentComponent (class excerpts)')(format=".")
|
||||||
|
|
||||||
|
@ -892,7 +892,7 @@ code-example(format="").
|
|||||||
## Router Lifecycle Hooks
|
## Router Lifecycle Hooks
|
||||||
|
|
||||||
Angular components have [lifecycle hooks](lifecycle-hooks.html). For example, Angular calls the hook methods of the
|
Angular components have [lifecycle hooks](lifecycle-hooks.html). For example, Angular calls the hook methods of the
|
||||||
[OnInit](../api/core/OnInit-interface.html) and [OnDestroy](../api/core/OnDestroy-interface.html)
|
[OnInit](../api/core/index/OnInit-class.html) and [OnDestroy](../api/core/index/OnDestroy-class.html)
|
||||||
interfaces when it creates and destroys components.
|
interfaces when it creates and destroys components.
|
||||||
|
|
||||||
The router also has hooks for *its* lifecycle such as
|
The router also has hooks for *its* lifecycle such as
|
||||||
@ -1369,8 +1369,8 @@ code-example(format="." language="bash").
|
|||||||
How do we ensure that happens if not in the constructor?
|
How do we ensure that happens if not in the constructor?
|
||||||
|
|
||||||
Angular detects when a component has certain lifecycle methods like
|
Angular detects when a component has certain lifecycle methods like
|
||||||
[ngOnInit](../api/core/OnInit-interface.html) and
|
[ngOnInit](../api/core/index/OnInit-class.html) and
|
||||||
[ngOnDestroy](../api/core/OnDestroy-interface.html) and calls
|
[ngOnDestroy](../api/core/index/OnDestroy-class.html) and calls
|
||||||
them
|
them
|
||||||
at the appropriate moment.
|
at the appropriate moment.
|
||||||
|
|
||||||
|
@ -1516,8 +1516,8 @@ code-example(format="." language="bash").
|
|||||||
How do we ensure that happens if not in the constructor?
|
How do we ensure that happens if not in the constructor?
|
||||||
|
|
||||||
Angular detects when a component has certain lifecycle methods like
|
Angular detects when a component has certain lifecycle methods like
|
||||||
[ngOnInit](../api/core/OnInit-interface.html) and
|
[ngOnInit](../api/core/index/OnInit-class.html) and
|
||||||
[ngOnDestroy](../api/core/OnDestroy-interface.html) and calls
|
[ngOnDestroy](../api/core/index/OnDestroy-class.html) and calls
|
||||||
them
|
them
|
||||||
at the appropriate moment.
|
at the appropriate moment.
|
||||||
|
|
||||||
|
@ -1445,7 +1445,7 @@ a(href="#toc") Back to top
|
|||||||
|
|
||||||
.s-rule.do
|
.s-rule.do
|
||||||
:marked
|
:marked
|
||||||
**Do** use [`@Input`](https://angular.io/docs/ts/latest/api/core/Input-var.html) and [`@Output`](https://angular.io/docs/ts/latest/api/core/Output-var.html) instead of the `inputs` and `outputs` properties of the [`@Directive`](https://angular.io/docs/ts/latest/api/core/Directive-decorator.html) and [`@Component`](https://angular.io/docs/ts/latest/api/core/Component-decorator.html) decorators:
|
**Do** use [`@Input`](https://angular.io/docs/ts/latest/api/core/index/Input-var.html) and [`@Output`](https://angular.io/docs/ts/latest/api/core/index/Output-var.html) instead of the `inputs` and `outputs` properties of the [`@Directive`](https://angular.io/docs/ts/latest/api/core/index/Directive-decorator.html) and [`@Component`](https://angular.io/docs/ts/latest/api/core/index/Component-decorator.html) decorators:
|
||||||
|
|
||||||
.s-rule.do
|
.s-rule.do
|
||||||
:marked
|
:marked
|
||||||
@ -1457,7 +1457,7 @@ a(href="#toc") Back to top
|
|||||||
|
|
||||||
.s-why
|
.s-why
|
||||||
:marked
|
:marked
|
||||||
**Why?** If we ever need to rename the property or event name associated to [`@Input`](https://angular.io/docs/ts/latest/api/core/Input-var.html) or [`@Output`](https://angular.io/docs/ts/latest/api/core/Output-var.html) we can modify it on a single place.
|
**Why?** If we ever need to rename the property or event name associated to [`@Input`](https://angular.io/docs/ts/latest/api/core/index/Input-var.html) or [`@Output`](https://angular.io/docs/ts/latest/api/core/index/Output-var.html) we can modify it on a single place.
|
||||||
|
|
||||||
.s-why
|
.s-why
|
||||||
:marked
|
:marked
|
||||||
|
@ -490,8 +490,8 @@ table
|
|||||||
If we must read a target element property or call one of its methods,
|
If we must read a target element property or call one of its methods,
|
||||||
we'll need a different technique.
|
we'll need a different technique.
|
||||||
See the API reference for
|
See the API reference for
|
||||||
[viewChild](../api/core/ViewChild-var.html) and
|
[viewChild](../api/core/index/ViewChild-var.html) and
|
||||||
[contentChild](../api/core/ContentChild-var.html).
|
[contentChild](../api/core/index/ContentChild-var.html).
|
||||||
|
|
||||||
// TODO (global): once we have api docs everywhere, change /docs/ts/latest/ to ../
|
// TODO (global): once we have api docs everywhere, change /docs/ts/latest/ to ../
|
||||||
|
|
||||||
@ -783,7 +783,7 @@ block style-property-name-dart-diff
|
|||||||
<a id="custom-event"></a>
|
<a id="custom-event"></a>
|
||||||
### Custom events with EventEmitter
|
### Custom events with EventEmitter
|
||||||
|
|
||||||
Directives typically raise custom events with an Angular [EventEmitter](../api/core/EventEmitter-class.html).
|
Directives typically raise custom events with an Angular [EventEmitter](../api/core/index/EventEmitter-class.html).
|
||||||
A directive creates an `EventEmitter` and exposes it as a property.
|
A directive creates an `EventEmitter` and exposes it as a property.
|
||||||
The directive calls `EventEmitter.emit(payload)` to fire an event, passing in a message payload that can be anything.
|
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.
|
Parent directives listen for the event by binding to this property and accessing the payload through the `$event` object.
|
||||||
|
@ -345,7 +345,7 @@ figure.image-display
|
|||||||
In Angular 2 things are different. While change detection still
|
In Angular 2 things are different. While change detection still
|
||||||
occurs after every event, no one needs to call `scope.$apply()` for
|
occurs after every event, no one needs to call `scope.$apply()` for
|
||||||
that to happen. This is because all Angular 2 code runs inside something
|
that to happen. This is because all Angular 2 code runs inside something
|
||||||
called the [Angular zone](../api/core/NgZone-class.html). Angular always
|
called the [Angular zone](../api/core/index/NgZone-class.html). Angular always
|
||||||
knows when the code finishes, so it also knows when it should kick off
|
knows when the code finishes, so it also knows when it should kick off
|
||||||
change detection. The code itself doesn't have to call `scope.$apply()`
|
change detection. The code itself doesn't have to call `scope.$apply()`
|
||||||
or anything like it.
|
or anything like it.
|
||||||
@ -376,7 +376,7 @@ figure.image-display
|
|||||||
the component's inputs will be watched using Angular 1 change detection.
|
the component's inputs will be watched using Angular 1 change detection.
|
||||||
When those inputs change, the corresponding properties in the component
|
When those inputs change, the corresponding properties in the component
|
||||||
are set. We can also hook into the changes by implementing the
|
are set. We can also hook into the changes by implementing the
|
||||||
[OnChanges](../api/core/OnChanges-interface.html) interface in the component,
|
[OnChanges](../api/core/index/OnChanges-class.html) interface in the component,
|
||||||
just like we could if it hadn't been downgraded.
|
just like we could if it hadn't been downgraded.
|
||||||
|
|
||||||
Correspondingly, when we upgrade an Angular 1 component and use it from Angular 2,
|
Correspondingly, when we upgrade an Angular 1 component and use it from Angular 2,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user